0
Guy Ich bin ein bisschen auf dieses Projekt. Versuchen, eine Google Calander-Seite zu erstellen. Geben Sie einer Funktion ein Array von Objekten, die jedes Objekt mit 2 Eigenschaften haben, starten und beenden Sie, drucken Sie folgendes auf dem Bildschirm aus.CSS-Positionierung/brauchen Idee
ich fast fertig bin .... das ist, was ich habe bisher
Ich bin Lager auf die Positionierung. Wenn ich das innere Div absolut oder relativ machen sollte. Denn wenn ich sie relativ mache, fallen sie zu sehr herab, wenn ich das Absolute mache und dann Probleme habe, sie richtig auszurichten.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div id="canv" class="canvas">
<!-- <div class="event">
<h1>Sample Item</h1>
<p>Sample location</p>
</div> -->
</div>
<div class="time">
<p>9:00 <span class="am">AM</span></p>
<p class="thirty">9:30</p>
<p>10:00 <span class="am">AM</span></p>
<p class="thirty">10:30</p>
<p>11:00 <span class="am">AM</span></p>
<p class="thirty">11:30</p>
<p>12:00 <span class="am">PM</span></p>
<p class="thirty">12:30</p>
<p>1:00 <span class="am">PM</span></p>
<p class="thirty">1:30</p>
<p>2:00 <span class="am">PM</span></p>
<p class="thirty">2:30</p>
<p>3:00 <span class="am">PM</span></p>
<p class="thirty">3:30</p>
<p>4:00 <span class="am">PM</span></p>
<p class="thirty">4:30</p>
<p>5:00 <span class="am">PM</span></p>
<p class="thirty">5:30</p>
<p>6:00 <span class="am">PM</span></p>
<p class="thirty">6:30</p>
<p>7:00 <span class="am">PM</span></p>
<p class="thirty">7:30</p>
<p>8:00 <span class="am">PM</span></p>
<p class="thirty">8:30</p>
<p>9:00 <span class="am">PM</span></p>
</div>
</div>
</div>
<script>
var events = [
{start: 30, end: 150},
{start: 540, end: 600},
{start: 560, end: 620},
{start: 610, end: 670}
];
var canvas = document.getElementById("canv");
var totalElem = 0;
var totalTop = 0;
var total = events.forEach(function(event, index){
var testArr = events;
var test = testArr.length - index;
if(index > 0 && test >=2){
totalElem++
}
})
function layOutDay(event){
var newArr = event;
event.forEach(function(event, index){
var env = document.createElement("div"),
h1 = document.createElement("h1"),
p = document.createElement("p"),
sampleItem = document.createTextNode("Sample Item"),
sampleLocation = document.createTextNode("Sample Location");
p.appendChild(sampleLocation);
h1.appendChild(sampleItem);
env.className = "event";
env.setAttribute('id', index)
env.appendChild(h1);
env.appendChild(p);
canvas.appendChild(env);
//conversion
//totalTop = keeping track of start of each event
var pixelsStart = (event.start * .86);
pixelsEnd = ((event.end - event.start) * .86);
totalTop += pixelsEnd;
console.log(totalTop, 'test');
env.style.top = pixelsStart + "px";
env.style.height = pixelsEnd + "px";
// check start collide with previous event
var test = newArr.length - index;
if(index > 0 && test >=2){
var start = event.start,
end = event.end,
check = newArr[index+1].start;
function between(check, start, end) {
return check >= start && check <= end;
}
if (between(check, start, end)) {
var newWidth = (96/totalElem)
env.style.width = newWidth + "%";
}
}
}) // end of loop
// correct placement
// 1. If 2 or more events - done
// 2. Grab values then check range
// 3. if within same range then run logic to divide with evently
// 4. else place elements as is
// var newArr = document.getElementsByClassName("event");
// if(newArr.length > 1){
// var start = obj.start;
// var end = obj.end;
// var check = checkObj.start
// var check = function between(check, start, end) {
// return check >= start && check <= end;
// }
// if (check(600, 560, 620)) {
// console.log('true')
// }
// }
}
layOutDay(events);
</script>
</body>
</html>
css
body {
font-size: 40px;
}
.wrapper {
position: relative;
}
.canvas {
background-color: #ECECEC;
border-left: 2px solid #ABABAB;
height: 620px;
width: 720px;
float: right;
margin-right: 300px;
margin-left: 10px;
position: relative;
}
p {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 13px;
margin-bottom: 13px;
}
.am {
font-size: 10px;
color: #ADADAD;
}
.thirty {
font-size: 10px;
color: #ADADAD;
}
.wrapper {
width: 1100px;
}
.time {
text-align: right;
position: relative;
}
.event {
background-color: #ffffff;
border: 1px solid #D9D9D9;
border-left: 3px solid #63AF8F;
width: 96%;
margin-left: 10px;
margin-right: 0px;
position: relative;
float: right;
top: 28px;
height: 52px;
overflow: hidden;
}
.event h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #63AF8F;
padding: 0;
padding-top: 5px;
padding-left: 5px;
margin: 0px;
}
.event p {
padding: 0;
padding-left: 5px;
margin: 0px;
color: #ADADAD;
}
/*# sourceMappingURL=../maps/style.css.map */
hier ist mein JsFiddle https://jsfiddle.net/#&togetherjs=jOBEK3Fxv3 –
Interessant ... Ich meine, das war das Design, das ich von meinem Kunden und die Funktionalität, die er will, habe ich nur versuchen, die zu erreichen Aufgabe. –
Ich entschuldige mich. Ich habe deine Frage missverstanden. Ich dachte, das Bild ist das, was Sie gerade haben, und Sie fragen uns nach besseren Design-Ideen. Vielleicht hat es damit zu tun, dass Sie keine [mcve] zur Verfügung gestellt haben. Oder vielleicht mit der Tatsache, dass Ihre Frage nicht klar ist. Ich bin mir nicht ganz sicher. Was denken Sie? –