Autor Zpráva
winterboyMT
Profil
nasel jsem tady takovy zajimavy skryvany text: http://www.jakpsatweb.cz/javascript/priklady/skryvani-odkryvani.html

ale potreboval bych to pouzit jako menu ale aby se to po kliknuti na to druhy zase zabalilo to prvni a naopak... nevite jak na to???
Hooonza
Profil *
<script>
function zobrazSkryj(idecko){
if (idecko=="oddil1") {
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
el=document.getElementById("oddil2").style;
el.display=(el.display == 'none')?'block':'none';
};
if (idecko=="oddil2") {
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
el=document.getElementById("oddil1").style;
el.display=(el.display == 'none')?'block':'none';
};
}

</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>

...

<h3 onclick="zobrazSkryj('oddil1')">Nadpis</h3>
<div id="oddil1" class="skryvany">
První oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
Druhý oddíl: bla bla bla text</div>
winterboyMT
Profil
to je bezvadny... funguje to ale jenom na 2 polozky a je to preklikavaci jenom z te jedne na druhou... ale ja bych to potreboval pouzit na 3 polozky. jak se to dá upravit? zkousel sem zkopirovat tu cast ktera zavira ten druhy oddil a napsal jsem aby kdyz kliknu na odd1 tak to zavre 2 a 3, kdyz kliknu na odd2 tak to zavre 1 a 3 a kdyz kliknu na odd3 tak to zavre 1 a 2. ale stejne to nefunguje... nevim jestli se to tak da vubec pouzit ale zkusil sem to a nejede to... jak to predelat na tri polozky?
winterboyMT
Profil
a jeste sem nasel takovej malej hacek.. kdyz kliknu na odd 1 tak se otevre ale kdyz na nej kliknu jeste jednou tak se zase zavre a sam se otevre odd2. to bych potreboval taky nejak odstranit... at se klidne zavre ale at se neotevira sam ten druhy. jinak diky HOOONZA... ses machr.

PLS pomoz
Hooonza
Profil *
<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
if (idecko=="oddil1") {a="oddil2"; b="oddil3"};
if (idecko=="oddil2") {a="oddil1"; b="oddil3"};
if (idecko=="oddil3") {a="oddil2"; b="oddil1"};

fl=document.getElementById(a).style;
gl=document.getElementById(b).style;
fl.display='none';
gl.display='none';
}

</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>

...

<h3 onclick="zobrazSkryj('oddil1')">Nadpis</h3>
<div id="oddil1" class="skryvany">
První oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
Druhý oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil3')">Nadpis třetího oddílu</h3>
<div id="oddil3" class="skryvany">
Třetí oddíl: bla bla bla text</div>
winterboyMT
Profil
SUPER!!! Diky moc... perfektni... funguje to sqele!!!
starburst
Profil
tak sem jeste narazil na jeden problem:-( v Mozile se to zobrazi vsechno otevreny... jako kdyz se nacte stranka tak jsou vsechny oddily otevreny... a po kliknuti se to chova uz spravne... jako ostatni se zavrou a dal to normalne funguje... v Exploreru a FF to funguje perfectne... neda se to jeste nejak odstranit???
Hooonza
Profil *
tak jsou vsechny oddily otevreny...

Mně se to chová v Mozille správně už od začátku...
Nechybí ti tam do head překopírovat část se stylem? Protože úvodní skrytí odstavců není vůbec otázka javaskriptu, ale stylu. Konkrétně celá stránka, jak mi dobře v Mozille funguje:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2">
<meta http-equiv="Content-Language" content="cs"><title>Skrývání a odkrývání textu javascriptem</title>



<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
if (idecko=="oddil1") {a="oddil2"; b="oddil3"};
if (idecko=="oddil2") {a="oddil1"; b="oddil3"};
if (idecko=="oddil3") {a="oddil2"; b="oddil1"};

fl=document.getElementById(a).style;
gl=document.getElementById(b).style;
fl.display='none';
gl.display='none';
}

</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>
</head>


<body>

<h1>Skrývání a odkrývání textu na přání uľivatele</h1>
<h3 onclick="zobrazSkryj('oddil1')">Nadpis</h3>
<div id="oddil1" class="skryvany">
První oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
Druhý oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil3')">Nadpis třetího oddílu</h3>
<div id="oddil3" class="skryvany">
Třetí oddíl: bla bla bla text</div>
<p><a href="http://www.jakpsatweb.cz/javascript/priklady/index.html">Javascr ipt - příklady</a></p>

</body></html>
Bubák
Profil
úvodní skrytí odstavců není vůbec otázka javaskriptu, ale stylu
Hezký prohřešek proti přístupnosti.
Hooonza
Profil *
?
YoSarin
Profil
Hooonza
když někdo vypne JS, tak podmenu vůbec neuvidí - jediná možnost jak se do něj dostat je vypnout i CSS :-) (neboj já to mám n stránkách stejně ;) )ideální by byl defaultní stav - viditelné a pak to pomocí JS všechno skrýt... :-)
Yo'Sarin
djlj
Profil
ideální by byl defaultní stav - viditelné a pak to pomocí JS všechno skrýt.
A nebo zjistit, zda je JS zapnutý a podle toho pak vygenerovat menu buď pomocí JS, nebo bez něj.
starburst
Profil
nechybi mi nic... teda aspon doufam... no koukni se dystak co tam mam spatne pls:
http://tulaci.com

ale mam pocit ze je tam vse dobre zkopirovany...
Hooonza
Profil *
YoSarin, djlj
S tou přístupností je to pravda, mělo by to tedy spíš být nějak takto (celý dokument):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2">
<meta http-equiv="Content-Language" content="cs"><title>Skrývání a odkrývání textu javascriptem</title>



<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
if (idecko=="oddil1") {a="oddil2"; b="oddil3"};
if (idecko=="oddil2") {a="oddil1"; b="oddil3"};
if (idecko=="oddil3") {a="oddil2"; b="oddil1"};

fl=document.getElementById(a).style;
gl=document.getElementById(b).style;
fl.display='none';
gl.display='none';
}

function skryjvse () {
for (z=1; z<4; z++) document.getElementById('oddil'+z).style.display = 'none';
}

</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: block}
</style>
</head>


<body onload="skryjvse();">

<h1>Skrývání a odkrývání textu na přání uľivatele</h1>
<h3 onclick="zobrazSkryj('oddil1')">Nadpis</h3>
<div id="oddil1" class="skryvany">
První oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil2')">Nadpis druhého oddílu</h3>
<div id="oddil2" class="skryvany">
Druhý oddíl: bla bla bla text</div>
<h3 onclick="zobrazSkryj('oddil3')">Nadpis třetího oddílu</h3>
<div id="oddil3" class="skryvany">
Třetí oddíl: bla bla bla text</div>
<p><a href="http://www.jakpsatweb.cz/javascript/priklady/index.html">Javascr ipt - příklady</a></p>

</body></html>


starburst
Takovéhle stránky (teda, nevím, co na to designoví fajnšmekři) se mi líbí :-))
Tak jo, skript částečně funguje - zajímavý je, že mně při nahrátí stránky zůstanou všechna menu otevřená! Což bude zřejmě tím, že ve stylu máš nakopírované

..skryvany {display: none}
místo
.skryvany {display: none}
(jedna tečka navíc... :-) )
Což ale teď ani moc nevadí nevadí :-)

Jestli tu tečku umažeš, zaměň display: none za display: block

a ->

Zkus to ještě teda kvůli té přístupnosti, jak píše YoSarin a djlj, doplnit o ten dnešní skript:
1. do tagu <body> dopnit onload="skryjvse();"
2. mezi tagy <script> a </script>, těsně před </script>, doplnit funkci

function skryjvse () {
for (z=1; z<4; z++) document.getElementById('oddil'+z).style.display = 'none';
}
nonewood
Profil
starburst
Přišlo mi jako zajímavé podotknout, jak se při scrollování této stránky nejspíš díky objemné grafice ve Firefoxu obraz seká, v Opeře to jede krásně plynule a v IE, je to asi tak mezi.

Hooonza
Měl bych určité výhrady k webu, ale na to se autor tématu neptá :-)
starburst
Profil
tak dokonce stacilo odstranit pouze tu druhou tecku.... takze to funguje perfektne... nechapu jak se tam dostala a ze sem si toho nevsiml... jeste vyzkousim FF ale myslim ze kdyz to jede v mozile a IE tak v FF to pojede taky fajn... dik ze se libi.... ale viz co rika nonewood : je to cely skladany z obrazku a docela se to seka....a taky mi to DOCELA HODNE VADI ale nevim jak to odstranit...je hrozne pomala ta stranka... jenze jak jinak udelat text (napr nadpisy) z pisma ktery mam jen ja? vim ze se to da nejak udelat stahovanim fontu ...nekde sem to tady cetl ale proste potrebuju aby to vypadalo tak nehaj hezky... je to pro decka tak se jim to musi libit..... jaky mas vyhrady prosim? jak sem rikal nejsem zadnej machr a rad se priucim a opravim chyby.... potreboval bych tam daleko vice vychytavek ale spoustu toho neumim tak to delam pomalicku tak nejak jak se ucim.... treba bych nutne potreboval vedet to co tady resi winterboyMT jak udelat na jedne strane menu ktery se neloaduje a napravo aby se nacitala stranka bez IFRAMU.... protoze pak mi to dela v pravo dva scrolly a je to skaredy... no kdyby ste to nekdo vedel tak mi prosim poradte... jinak DIK vsem
starburst
Profil
jeste me napadla jedna ptakovina... da se to pouzit i na onclick ? jako ze bych mel napr tu ruku na onclik misto onmouseover a kdyz kliknu na neco tak se ta ruka vrati a zustane otocena ta aktualni???
Hooonza
Profil *
starburst
Všechno možné jde, když tomu věnuješ čas a péči... :-)
starburst
Profil
a neni tady nejaka stranka ktera by popisovala co znamena co a co se kam dava? a proste nejakej tutorial??? ja totiz nemam jak se to naucit kdyz v podstate jenom zkopirovavam to co mi nekdo napise... jako rozumim co asi co znamena ale sam to proste nenapisu....a to s tou tabulkou nejak vyresit jde??? jde mi o to aby mi zmizli ty scrollbary... nebo nejak jinak to udelat... proste aby se to natahlo
Hooonza
Profil *
O tvorbě webu http://www.jakpsatweb.cz/, články na http://interval.cz/, http://www.jaknaweb.com/, ...

Javascript:
http://www.jakpsatweb.cz/javascript/ - tam je polopatě naprostý základ
http://tvorba-www.webz.cz/js/azjavascript.htm
http://interval.cz/vyvoj-aplikaci/javascript/

A kopírování je taky výbornej postup:-)

S tou tabulkou mě zase napadá Yuhů: třeba by to šlo udělat takhle?
http://dusan.pc-slany.cz/ (pojezdi si myší po odkazech nahoře na stránce)
Hooonza
Profil *
PHP - základy: http://tvorba-www.webz.cz/php/php/azphp2.htm
Hooonza
Profil *
No jo, vidíš: Amatérská tvorba webových stránek - http://tvorba-www.webz.cz/ - hromada materiálu i odkazů:-)
Anonymní
Profil *
hele a pude to ve vsech prohlizecich??
Toto téma je uzamčeno. Odpověď nelze zaslat.