-2
저는 CSS가 좋지 않아서 제가하고있는 일을 잘 모릅니다. 나는 jsfiddle을 만들었습니다. 여기 CSS가 서로 위에 div를 유지합니다.
<!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>
는 자바 스크립트 파일입니다 : 여기
은 HTML 파일입니다
/*======================================================
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
좋아, 나는 겸허히 사과합니다. 그리고 그것을 해결하기위한 전초 기지, 진지하게! –