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
<!doctype html> <style> .hledani ul {list-style: none} .hledani li { =display: block; overflow: hidden; max-height: 1.5em; opacity: 1; transition: 1s all } </style> <script> /* převede text na malá písmena a nahradí mezery */ function sjednotit(text) { return text.replace(/ /g, "-").toLowerCase(); } /* připojení CSS JavaScriptem s podporou IE 7 */ function nastavitCss(css) { var stylSkript = document.getElementById("styl-skriptu"); if (stylSkript) { stylSkript.parentNode.removeChild(stylSkript); } var pomocnyDiv = document.createElement('div'); pomocnyDiv.innerHTML = '<p>jen tak</p><style id="styl-skriptu">' + css + '</style>'; document.getElementsByTagName('head')[0].appendChild(pomocnyDiv.childNodes[1]); } function vyhledatBezAnimace(slovo) { nastavitCss(".polozky li {display: none} li[data-slova*=\"" + slovo.toLowerCase() + "\"] {display: list-item}"); } /* vytvoří potřebné selektory */ function vyhledat(slovo) { var hidden = "max-height: 0; opacity: 0; =display: none"; var visible = "max-height: 1.5em; opacity: 1; =display: block"; /* Firefox a Chrome by při smazání hledaného slova nic neukázal */ if (slovo == "") { hidden = hidden; } nastavitCss(".hledani ul li {" + hidden + "} .hledani ul li[data-slova*=\"" + sjednotit(slovo) + "\"] {" + visible + "}"); } </script> <div class="hledani"> <p> <label>Hledaný výraz: <input type="text" onkeyup="vyhledat(this.value)"></label> </p> <ul id="hledane"> <b><li>Toto se zobrazuje hnedle při načtení stránky!</li></b> <b><li>Já chci, aby se to zobrazoval až, když někdo něco napíše do inputu.</li></b> <li>-- Taková mezera --</li> <li>Zjištění skutečných rozměrů obrázku</li> <li>Box model</li> <li>Stejně vysoké sloupce</li> <li>Odkaz jako tlačítko</li> <li>Upload souborů bez refreshe</li> <li>Automatická datová optimalisace obrázků</li> <li>Animace</li> <li>Flat UI</li> </ul> <script> var zaznam = document.getElementById("hledane").getElementsByTagName("li"); for (var i = 0; i < zaznam.length; i++) { zaznam[i].setAttribute("data-slova", sjednotit(zaznam[i].innerHTML)); } </script> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>