-2
Я довольно плохо разбираюсь в CSS и не знаю, что делаю. Я сделал jsfiddle.CSS, поддерживающие div друг на друга
Вот HTML-файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Prilyx Test">
<meta name="author" content="Prilyx">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font -->
<!-- CSS -->
<!-- JS -->
<script src="js/test.js"></script>
</head>
<body>
<script>
var employees = [ { id:1, user: '[Name Here]'} ];
</script>
<div id="main" class="main bg-grey overflow-scroll-both">
</div>
</body>
</html>
Вот Javascript Файл:
/*======================================================
Global variables
======================================================*/
var m_bInitialized = false;
var m_bFirstLoad = true;
var node_id = 0;
/**
Key Presses
*/
var keyShiftPressed = false;
var keyCtrlPressed = false;
/**
Elements
*/
var elementMain;
var employees = [{
id: 1,
user: '[Name Here]'
}];
/*======================================================
Initialization functions
======================================================*/
window.onload = function() {
console.log("Test");
elementMain = document.getElementById("main");
init();
}
/**
The main initialization function that gets called once the body
of the webpage has loaded.
**/
var init = function() {
var node = {
id: "0",
body: "Test",
creator_id: "1",
created_at: "2016-07-21 00:00:00"
};
addNodes(node);
}
/**
Things to load after the page has initialized
**/
var load = function() {
}
/*======================================================
Clean up functions
======================================================*/
window.onbeforeunload = function() {
}
/*======================================================
Helper functions specific to this page
======================================================*/
Number.prototype.pad = function(size) {
var s = String(this);
while (s.length < (size || 2)) {
s = "0" + s;
}
return s;
}
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);
}
var addNodes = function(node) {
console.log("adding node");
var ele = document.createElement("div");
ele.style.display = "inline-block";
ele.style.minWith = "450px";
ele.style.whiteSpace = "normal";
ele.style.borderRadius = "4px";
ele.style.margin = "5px";
ele.style.verticalAlign = "top";
ele.style.backgroundColor = "#d05656";
var header = document.createElement("header");
header.innerHTML = "Default";
header.style.color = "white";
header.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
header.style.fontSize = "1.6em";
header.style.textAlign = "center";
header.style.marginTop = "15px";
for (var i = 0; i < employees.length; i++) {
if (employees[i]['id'] == node['creator_id']) {
ele.id = 'e_' + employees[i]['id'];
header.innerHTML = employees[i]['user'];
break;
}
}
ele.appendChild(header);
var times = document.createElement("div");
times.style.width = "auto";
times.style.height = "auto";
for (var i = 0; i < 24; i++) {
var timenode = document.createElement("div");
timenode.style.width = "450px";
timenode.style.height = "auto";
timenode.style.marginBottom = "20px";
timenode.style.marginLeft = "10px";
timenode.style.marginRight = "10px";
timenode.style.marginBottom = "10px";
timenode.style.paddingBottom = "2px";
if (i < 23) {
timenode.style.marginTop = "5px";
}
times.appendChild(timenode);
var timestamp = document.createElement("i");
timestamp.style.marginLeft = "10px";
timestamp.style.marginTop = "10px";
timestamp.style.backgroundColor = "#D8B279";
timestamp.style.color = "white";
timestamp.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
timestamp.style.fontSize = "1em";
var time = "2016-07-21 " + (i).pad() + ":00:00";
timestamp.innerHTML = time;
timenode.appendChild(timestamp);
var nodeList = document.createElement("div");
nodeList.style.width = "auto";
nodeList.style.minWidth = "150px";
nodeList.style.minHeight = "100px";
nodeList.style.height = "auto";
timenode.appendChild(nodeList);
var end = Math.floor(Math.random() * 3) + 1;
for (var j = 0; j < end; j++) {
var node = document.createElement("textarea");
node.id = node_id++;
node.style.float = "none";
node.style.clear = "both";
node.style.width = "150px";
node.style.height = "100px";
node.style.display = "inline-block";
node.style.verticalAlign = "top";
node.style.marginTop = "5px";
node.style.marginBottom = "5px";
node.style.marginLeft = "10px";
node.style.marginRight = "10px";
node.style.border = "none";
node.style.resize = "none";
node.style.backgroundColor = "#39853e";
node.style.textAlign = "center";
node.style.color = "white";
node.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
node.style.fontSize = "1.4em";
node.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
} else if (e.keyCode == 16) {
keyShiftPressed = true;
return;
} else if (e.keyCode == 17) {
keyCtrlPressed = true;
return;
} else {
return;
}
e.preventDefault();
});
node.addEventListener('keyup', function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
if (keyShiftPressed && !keyCtrlPressed) {
addNode(this, true, false);
} else if (!keyShiftPressed && keyCtrlPressed) {
addNode(this, false, true);
} else {
addNode(this, false, false);
}
} else if (e.keyCode == 16) {
keyShiftPressed = false;
return;
} else if (e.keyCode == 17) {
keyCtrlPressed = false;
return;
} else {
return;
}
e.preventDefault();
});
nodeList.appendChild(node);
}
}
ele.appendChild(times);
main.appendChild(ele);
}
var addNode = function(self, subtask, previoustask) {
var node = document.createElement("textarea");
node.id = node_id++;
node.style.float = "none";
node.style.clear = "both";
node.style.width = "150px";
node.style.height = "100px";
node.style.display = "inline-block";
node.style.verticalAlign = "middle";
node.style.marginTop = "5px";
node.style.marginBottom = "5px";
if (!subtask && !previoustask) {
node.style.marginLeft = self.style.marginLeft;
} else if (subtask && !previoustask) {
node.style.marginLeft = parseInt(self.style.marginLeft.slice(0, -2)) + 120 + "px";
} else if (!subtask && previoustask) {
if (parseInt(node.style.marginLeft.slice(0, -2)) < 100) {
node.style.marginLeft = self.style.marginLeft;
} else {
node.style.marginLeft = parseInt(self.style.marginLeft.slice(0, -2)) - 120 + "px";
}
}
node.style.marginRight = "10px";
node.style.border = "none";
node.style.resize = "none";
node.style.backgroundColor = "#39853e";
node.style.textAlign = "center";
node.style.color = "white";
node.style.textShadow = "0 1px 0 rgba(0,0,0,0.4)";
node.style.fontSize = "1.4em";
node.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
} else if (e.keyCode == 16) {
keyShiftPressed = true;
} else if (e.keyCode == 17) {
keyCtrlPressed = true;
return;
} else {
return;
}
e.preventDefault();
});
node.addEventListener('keyup', function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
if (keyShiftPressed && !keyCtrlPressed) {
addNode(this, true, false);
} else if (!keyShiftPressed && keyCtrlPressed) {
addNode(this, false, true);
} else {
addNode(this, false, false);
}
} else if (e.keyCode == 16) {
keyShiftPressed = false;
} else if (e.keyCode == 17) {
keyCtrlPressed = false;
return;
} else {
return;
}
e.preventDefault();
});
insertAfter(node, self);
node.focus();
}
То, что я пытаюсь сделать, это, чтобы эти зеленые узлы укладывают друг на друга вместо справа. Когда кто-то нажат, зеленый узел устанавливается непосредственно под текущим узлом. Если нажать shift + enter, узел будет помещен под ним, но будет продвигать границу ширины узлов. Если нажать ctrl + enter, узел будет помещен под ним, но оттянут назад, пока он не окажется слева.
Как это: Example design
Что вы на самом деле говорят: я понятия не имею, о CSS, вы можете сделать это для меня? Это не произойдет на SO. –
Я не прошу кого-то сделать это для меня, в скрипке это почти сделано. Все мои узлы располагаются справа друг от друга, а не укладываются друг на друга. Я пробовал их плавать, но все дело просто ломается, я пытался обернуть их, но он ломается, я не очень хорошо разбираюсь в CSS и просил помочь получить их в стек. – Jason
Хорошо, я смиренно приговариваю. И слава для его решения, серьезно! –