Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="timelineobal"> <div class="timeline" style="width:2000%;left:-200%;"> <div class="casovaosa"> <div class="hodina" style="left:10%">10:00</div> <div class="hodina" style="left:11%">11:00</div> <div class="hodina" style="left:12%">12:00</div> <div class="hodina" style="left:13%">13:00</div> <div class="hodina" style="left:14%">14:00</div> <div class="hodina" style="left:15%">15:00</div> </div> <ul class="mistnost101"> <li style="left:10%;width:1.5%"> <a href="#" class="r">10:00 - 11:30</a> </li> <li style="left:12%;width:1.5%"> <a href="#" class="g">12:00 - 13:30</a> </li> </ul> <ul class="velkysal"> <li style="left:11%;width:1%"> <a href="#" class="g">11:00 - 12:00</a> </li> <li style="left:12.25%;width:1.75%"> <a href="#" class="r">12:15 - 14:00</a> </li> </ul> <ul class="malysal"> <li style="left:14%;width:1%"> <a href="#" class="b">14:00 - 15:00</a> </li> </ul> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.timelineobal { overflow:hidden; position:relative; padding:0 2em; } .timeline { font-size: 1.6em; position:relative; } .casovaosa { height:2em; line-height:1.6em; position:relative; } .hodina { position:absolute; width: 1%; margin-left:-0.5%; text-align: center; background-color:white; } .timeline ul { position: relative; list-style: none; height: 4em; margin:0; padding:0; margin-bottom:1em; } .timeline li { position: absolute; list-style: none; height: 100%; margin:0; padding:0; } .timeline a { display:block; padding: 1.2em 0; text-align: center; box-sizing: border-box; border: .1em solid #000; color: black; height: 100%; text-decoration:none; } .timeline .r { background: red; } .timeline .g { background: green; } .timeline .b { background: blue; color:white; }
CSS
Autoformát
CSS reset
Až na konci
//pomocny vypocet pro hodnoty pro .timeline var prvniHodina=10; var posledniHodina=15; var viditelnychHodin=posledniHodina-prvniHodina; var zoom=100/viditelnychHodin; console.log('width:'+100*zoom+'%'); console.log('left:'+-prvniHodina*zoom+'%');
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>