Autor Zpráva
Radek Hrabůvka
Profil
#1 · Zasláno: 5. 10. 2005, 12:13:06 · Upravil/a: Radek Hrabůvka
Odpovědět Citovat
Pro stránky svého známého bych chtěl udělat rozbalovací menu. Několik jsem jich vyzkoušel a skoro nejlepší bylo to, co jsem našel na JPW - Skrývání a odkrývání textu javascriptem. Má to však dva háčky: bez JS to je nanic, protože menu je sbalené. Proto jsem v kódu přepsal "block" na "none a "none" na "block". Tím mi vzniknul problém, jak menu sbalit - neumím to, jen něco tuším o "onload".
V "ostrém" provozu bude kód na stránce s několika cizími počítaly (dlouhá odezva, výpadky), nevím proto, jestli sbalení menu je vhodné vázat na "onload", nebo jestli je lepší řešení.
"Můj" kód:
<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'none')?'block':'none';
}
</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: block}
</style>

<h1>Zobraz - skryj</h1>

<h3 onclick="zobrazSkryj('oddil1')">Nadpis prvního oddílu</h3>
<div id="oddil1" class="skryvany">
První oddíl:<br>bla bla text</div>
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
Druhý oddíl:<br>bla bla text</div>
alessi
Profil *
#2 · Zasláno: 7. 10. 2005, 19:38:18
Odpovědět Citovat
www.blender3d.org pěkný-funkční
alessi
Profil *
#3 · Zasláno: 7. 10. 2005, 19:40:42
Odpovědět Citovat
Akorát budeš muset místo písma nařezat obrázky. Je to lepší, můžeš jim dát průhlednost... :-), takže ti zcela nezakryje věci, na které se to rozbalí...
Chamurappi
Profil
#4 · Zasláno: 8. 10. 2005, 03:54:33
Odpovědět Citovat
Reaguji na Radka Hrabůvku:
Bez JS rozebírá HTML prohlížeč to, co najde uvnitř elementu <noscript>. Se zapnutým JS jeho obsah zcela ignoruje. To znamená, že i když je uvnitř něj <style>, přehlíží ho. Můžeš tedy snadno při absenci JS stylem zviditelnit něco, co jsi jiným stylem o kus výše skryl. Menu z JPW jde takto zfunkčnit.

Událost onload nebývá příliš použitelná právě kvůli čekání na obrázky. Nejsnadnějším řešením je vložit ten kód, který se má ihned provést, přímo do kódu. Pracuje-li s nějakým elementem, musí být za ním.

Varování: Ani jeden z těchto postupů nebude fungovat v XHTML :-)
peta
Profil *
#5 · Zasláno: 8. 10. 2005, 08:29:58
Odpovědět Citovat
Radek Hrabůvka
www.volny.cz/dvereapodlahy/
tam se pouziva body behaviour, JS v CSS
Radek Hrabůvka
Profil
#6 · Zasláno: 9. 10. 2005, 23:30:23
Odpovědět Citovat
Chamurappi Z důvodů malování jsem měl PC mimo provoz, proto se ozývám dnes večer. Včera mě napadlo, že by se do dalo řešit pomocí noskript, ale říkal jsem si, že to bude poměrně dost kódu navíc (mnohem míň jak jedno kilo, vydrží to i "majitelé vytáčeného spojení", ušetřím jinde) a že to bude funkční řešení, ale neměl jsem jak ověřit jeho . Zítrra pořádně popřemýšlím, co do <noscript> napsat, abych měl úsporný, přehledný a funkční kód. Kdyby to bylo moc kostrbaté, tak zveřejním kód a dotaz, zda by to šlo s noskript (nebo jinak) udělat lépe.
Chamurappi Díky za nasměrování správným směrem. XHTML neumím a pro mě nemá oproti html žádnou výhodu, abych se ho naučil. Tvorbu stránek v html dělám *zdarma* jako zábavu (a z "donucení" ve dvou neziskovkách, kam "patřím"). Občas trochu pomůžu pár známým s nekomerčními stránkami řešit největší problémy (jako nyní nepřístupnost rozbalovacího menu v Opeře a Mozille), ale jinak je nechám, ať se sami snaží.
alessi Díky, já chtěl textové menu, je mnohem rychlejší, než grafika. Ale pokud někdo bude dělat "nahezkaný" web, využije tvůj odkaz.
peta behaviour je IE only, to bych si nepomoh. Buď to bude vždy funkční, sice bez JS s menším komfortem, jinak to nemá žádný význam.
Leo
Profil
#7 · Zasláno: 10. 10. 2005, 00:34:10 · Upravil/a: Leo
Odpovědět Citovat
"bez JS to je nanic, protože menu je sbalené"

Pokud je odkaz v zakladni urovni menu aktivni a mate dobre strukturovany web, tak to neni takova tragedie, odkazy co jsou v nerozbalenym podmenu se proste objevi na te dalsi strance.

Co se tyka style uvnitr noscript, neni to validni :-) Slo by jeste JavaScriptem modifikovat CSS styl predtim, nez se zpracuje element toho menu, ale v kazdym prohlizeci se to musi udelat jinak a nejsem si jisty, jestli by to behalo vsude (notoricky Opera ma s timhle problemy). Jeste tak nejshudnejsi je nastavit externimu css disabled (nejspis taky nevalidni), ale nejsem si jisty, v jakem poradi se to bude zpracovavat.

Leo
Fred
Profil
#8 · Zasláno: 10. 10. 2005, 07:05:39
Odpovědět Citovat
Načti styl související s javascriptem javascriptem.

function loadstyle() {
var css=document.createElement('link');
css.setAttribute('href','styl-skryte-casti-co-odkryva-js.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
document.getElementsByTagName('head').item(0).appendChild(css);
}
Leo
Profil
#9 · Zasláno: 10. 10. 2005, 11:26:23
Odpovědět Citovat
"Načti styl související s javascriptem javascriptem."

Zkousel jsi, jestli pak prohlizec ceka na stazeni toho noveho externiho css stylu? Leo
Fred
Profil
#10 · Zasláno: 10. 10. 2005, 12:16:38
Odpovědět Citovat
Nečeká, vím. Ale funguje to pak trochu jako v Opeře, nejdřív se to zpbrazí neostylovaný. Starý pokus mám tady http://abrakadabra.nazory.cz/experimenty/pristupne/index.html
Leo
Profil
#11 · Zasláno: 10. 10. 2005, 12:20:32
Odpovědět Citovat
Diky, kouknu se na to, Leo
Leo
Profil
#12 · Zasláno: 10. 10. 2005, 12:23:00
Odpovědět Citovat
Jeste me napadlo mit ten druhy styl prilinkovany natvrdo (uz v HTML) a JavaScriptem hned za nim jen zmenit media treba na print, jestli by prohlizece pockaly. Leo
Fred
Profil
#13 · Zasláno: 10. 10. 2005, 13:51:17
Odpovědět Citovat
To by možná bylo rychlejší.
peta
Profil *
#14 · Zasláno: 10. 10. 2005, 14:45:36
Odpovědět Citovat
Radek Hrabůvka
"peta behaviour je IE only, to bych si nepomoh. Buď to bude vždy funkční, sice bez JS s menším komfortem, jinak to nemá žádný význam."

Asi jsem malo chapevej, ale co tim bylo mysleno?
objekt:hover funguje vsude, pro IE se doplnuje javascriptem csshover.htc (alias behaviour v CSS)
Bez behaviour ti funguje objekt:hover a prave pro IE se pridava javascript.

Nechces javascript? Pouzij Flash, Javu.
Uvedom si vsak, ze java je asi 50M na disku, flash kolem 4M a oboji neni v default instalaci treba firefoxu.

Nebo to chces pouze javascriptem? Ja ti vazne nerozumim. Zkousel jsi tu stranku ve kterem prohlizeci a ve kterem nefungovala?
Fred
Profil
#15 · Zasláno: 10. 10. 2005, 15:56:46 · Upravil/a: Fred
Odpovědět Citovat
peta pleteš si události onmouseover na to je hover a třeba to .htc a onclick na to je jen js, tedy kromě :focus a ten se na to použít nedá.
peta
Profil *
#16 · Zasláno: 10. 10. 2005, 18:21:48
Odpovědět Citovat
Radek Hrabůvka
pokud ti jde jen o skryti, tak to onload muze vypadat treba takto:
<head>
<script>
function init()
{
zobrazSkryj('oddil1');zobrazSkryj('oddil2');
}
</script>
</head>
<body onload="init()">

nebo

<body onload="zobrazSkryj('oddil1');zobrazSkryj('oddil2');">

Fred
??? bavim se o tom prikladu, co jsem mu dal, co se rozbaluje samo. Vim, ze to tam nahore pise o akci onclick. Ale prijde mi to u MENU nesmirna zdrzovacka pouzivat onclick
Radek Hrabůvka
Profil
#17 · Zasláno: 12. 10. 2005, 06:09:04
Odpovědět Citovat
Díky všem za podnětné návrhy.

peta Díky, s tou funkcí init() to vypadá dobře, dělá přesně to, co potřebuji.

Ještě bych se potřeboval zbavit závislosti na onload, aby se funkce init() spustila "ihned". Pokud by to nešlo vyřešit, udělal bych to kombinací přes <noscript>.
Radek Hrabůvka
Profil
#18 · Zasláno: 12. 10. 2005, 20:17:54
Odpovědět Citovat
Už to mám, jsem přes JS opravdová lama, že jsem na to nepřišel dřív!!! Hned za rozbalovací menu jsem dal "sbalovací" funkci:
<script>
init()
</script>
A to je vše.

Znova všem díky, nejvíce děkuji Chamurappimu za nasměrování a petovi za poskytnutý kód.
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0