Diskuse JPW: Skrývanie a zobrazovanie obsahu

	Autor	Zpráva
	jancikfilip Profil	#1 · Zasláno: 20. 3. 2010, 23:43:34 · Upravil/a: Moderátor (editace znemožněna) Odpovědět Citovat Ahoj na stranke mam obsah ktorý sa rozbaľuje po kliknutí na odkaz pomocou Javascript. Takže uvediem priklad. mam kdlaz 1,2,3,4 a5 po kliknutí na odkaz 1 sa mi rozbali obsah. po kliknuti sa 2 sa mi taktiez rozbali obsah. To čo chcem je, aby po kliknutí na ďaľší odkaz sa predchádzajúci zavrel, res. zavreli všetky ostatné aby bol viditelný len ten na ktorý som klikol ako na posledný. používam takýto script : <script type="text/javascript"> function inss(id){ obj = document.getElementById(id); if(obj.style.display=='none'){ obj.style.display='block'; } else{ obj.style.display='none'; } } </script> Ďakujem za rady =)))
	sysel Profil	#2 · Zasláno: 21. 3. 2010, 03:42:13 · Upravil/a: sysel Odpovědět Citovat Mno, což takhle pokaždé probrat všechna vhodná idčka a to co chci otevřít a ostatní pozavírat. Třeba: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Obsah</title> <script type="text/javascript"> var idecka={1:'1d',2:'2d',3:'3d'}; function swapuj(idko) { moje = document.getElementById( idecka[idko] ).style.display for (idx in idecka) { document.getElementById( idecka[idx] ).style.display = 'none'; } if(moje == 'none') document.getElementById( idecka[idko] ).style.display = 'block'; } </script> </head> <body> <p id="1" onclick="swapuj(this.id)" >kapitola 1. </p> <div id="1d" style="display: none"> <p>bla bla</p> <p>ble ble</p> <p>bli bli</p> <p>blo blo</p> </div> <p id="2" onclick="swapuj(this.id)" >kapitola 2. </p> <div id="2d" style="display: none"> <p>bla bla</p> <p>ble ble</p> <p>bli bli</p> <p>blo blo</p> </div> <p id="3" onclick="swapuj(this.id)" >kapitola 3. </p> <div id="3d" style="display: none"> <p>bla bla</p> <p>ble ble</p> <p>bli bli</p> <p>blo blo</p> </div> </body> </html>
	jancikfilip Profil	#3 · Zasláno: 21. 3. 2010, 13:14:45 Odpovědět Citovat Ja sa do javascript-u vôbec nevyznám... viem akurat Html a css takže to čo si mi napísal je premna španielska dedina. :D preto prikladám ešte link na stránku kte to mám.... pretože to tam mám dost zložité... Odkaz
	sysel Profil	#4 · Zasláno: 21. 3. 2010, 20:36:04 Odpovědět Citovat Já na to kouknu, snad by to neměl být problém. Pokud se obsah stránky moc nemění, mohlo by se to výše uvedené prakticky opsat. Pokud jsou plánované častější změny, popřemýšlím nad scriptem, který si vystačí bez nalosti idček. Ale chvilku mi na to nechte.
	sysel Profil	#5 · Zasláno: 22. 3. 2010, 02:29:48 Odpovědět Citovat Tak nějak by to mohlo fungovat, ale omlouvám se, možná bude potřeba přestylovat <dd>. Já jsem si hrál jen s HTML a JavaScriptem a ostatní vazby jsem nevyužíval. <script type="text/javascript"> function swapp(oDD) { oContent = document.getElementById('content'); cDDs = oContent.getElementsByTagName('dd'); moje = oDD.getElementsByTagName('div')[0].style.display for(jdx = 0;jdx<cDDs.length;jdx++) { oDiv = cDDs[jdx].getElementsByTagName('div')[0]; oDiv.style.display = 'none'; } if(moje == 'none') oDD.getElementsByTagName('div')[0].style.display = 'block'; } </script> <style type="text/css"> <!-- dt {float: left; clear: left; width: 11em; font-weight: bolder; color:#330000; class="styl64"} dd {color: #33EEEE; cursor: hand; cursor: pointer} .style3 { color: #75390B} .styl33 {font-size: 24px} .styl52 {font-family: Georgia, "Times New Roman", Times, serif} .styl58 {font-size: 24px; color: #F1DBC6;} .styl64 {font-size: 1.1em; color: #330000; } .styl68 {font-size: 1.3em; } .styl69 {font-size: 1.4em; color: #660000; font-weight: bold;} .styl71 { color: #330000 } .styl72 {font-size: 1,3; color: #330000; font-weight: bold;} --> </style> ... <div id="content"> <dl> <dt>C. Saint-Saëns:</dt> <dd onClick="javascript:swapp(this)">C. Saint-Saëns: Koncert pre klavír a orchester č.2 g-mol op. 22 <div id="o3" style="display: none;"> <iframe src="player/saint/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="160" frameborder="0" style="padding-left:125px"> Vas prehlaiad nepodporuje iframe </iframe> </div> </dd> <dt>J. Francaix:</dt> <dd onClick="javascript:swapp(this)">Concertino pre klavír a orchester <div id="o2" style="display: none;"> <iframe src="player/francaix/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="180" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd> <dt>A. Roussel:</dt> <dd onClick="javascript:swapp(this)">Koncert pre klavír a orchester G-dur op. 36 <div id="o4" style="display: none;"> <iframe src="player/roussel/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="160" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><br /> <dt>L. van Beehtoven:</dt> <dd onClick="javascript:swapp(this)">Pre Elišku <div id="o5" style="display: none;"> <iframe src="player/bethoven_elise/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="135" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd> <dt>  </dt> <dd onClick="javascript:swapp(this)">Sonáta pre klavír c-mol op.13 „Patetická“ <div id="o6" style="display: none;"> <iframe src="player/bethoven_c_mol/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="160" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd> <dt> </dt> <dd onClick="javascript:swapp(this)">Sonáta pre klavír cis-mol op.27 č.2 „Mesačného svitu“ <div id="o7" style="display: none;"> <iframe src="player/bethoven_cis_mol/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="180" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd> <dt>  </dt> <dd onClick="javascript:swapp(this)">Sonáta pre klavír f-mol op.57 „Appassionata“ <div id="o8" style="display: none;"> <iframe src="player/bethoven_f_mol/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="180" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><br />
	sysel Profil	#6 · Zasláno: 22. 3. 2010, 02:30:36 Odpovědět Citovat a pokračování až <dt>F.Schubert:</dt> <dd onClick="javascript:swapp(this)">Moment musical č.3 f mol <div id="o9" style="display: none;"> <iframe src="player/schubert_moment_musical/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)">Scherzo č.1 B dur <div id="o10" style="display: none;"> <iframe src="player/schubert_scherzo_no.1/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><br /><dt> </dt> <dd onClick="javascript:swapp(this)">Impromptu op. 90 č.1 c-mol <div id="o11" style="display: none;"> <iframe src="player/schubert_impromptu_op. 90_no.1_c_moll/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> <br /> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)"> Impromptu op. 90 č.2 Es-dur <div id="o12" style="display: none;"> <iframe src="player/schubert_impromptu_op._ 90_no.2_es_dur/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)">Impromptu op. 90 č.3 G-dur <div id="o13" style="display: none;"> <iframe src="player/schubert_impromptu_op._90_no.3_g_dur/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)"> Impromptu op. 90 č.4 As-dur <div id="o14" style="display: none;"> <iframe src="player/schubert_impromptu_op._90_no.4_as_dur/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><br /><dt> </dt> <dd onClick="javascript:swapp(this)">Impromptu op. 142 č.1 f-mol <div id="o15" style="display: none;"> <iframe src="player/schubert_impromptu_op._142 no.1_f_moll/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)">Impromptu op. 142 č.2 As-dur <div id="o16" style="display: none;"> <iframe src="player/schubert_impromptu_op._142_no.2_as_dur/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)">Impromptu op. 142 č.3 B-dur <div id="o17" style="display: none;"> <iframe src="player/schubert_impromptu_op._142_no.3_b_dur/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> <dd onClick="javascript:swapp(this)">Impromptu op. 142 č.4 f-mol <div id="o18" style="display: none;"> <iframe src="player/schubert_impromptu_op._142_no.4_f_moll/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd> </dl> </div>
	jancikfilip Profil	#7 · Zasláno: 23. 3. 2010, 12:26:07 · Upravil/a: jancikfilip Odpovědět Citovat sysel: Díky =) klidne to mužu zkopírovat...?? ty si to vlastne udelal zamna nie?? :D Ďakujem
	sysel Profil	#8 · Zasláno: 23. 3. 2010, 13:21:41 Odpovědět Citovat Moc se neradujte, ještě si užijete s dolaďováním CSS a vůbec, ale jinak: You are welcome :-)
	jancikfilip Profil	#9 · Zasláno: 23. 3. 2010, 15:54:02 Odpovědět Citovat A prečo sa nemám radovať? čo treba este dolaďovať na css? stačí ak zmenim farbu dd pretože je tam nejaka kriklavá.... inač somto skusil nahodiť a funguje to,...
	sysel Profil	#10 · Zasláno: 23. 3. 2010, 23:03:38 Odpovědět Citovat Tak to se fakt rád dozvídám, nemohl jsem konfrontovat kotrast s pozadím a také původní nastavení měnilo barvu textu pod myší. Pokud to není potřeba a barvu jste doladil a přesto to stále funguje, můžeme si zatleskat. :-)
	jancikfilip Profil	#11 · Zasláno: 24. 3. 2010, 17:55:45 · Upravil/a: jancikfilip Odpovědět Citovat sysel: OK... pytam sa preto, čí to môže robiť ešte problémy, pretože tam budem pridávať asi dalších 10 odkazov na tie pesničky, a chcem vediet ktorým spôsobom to mám teda robiť ďalej. Mal si ma mysli nejakú konkretnú vec s tym doladovaím? PS: kludne mi môžeš tikať som ešte sopliak je mi 17 let :D
	sysel Profil	#12 · Zasláno: 25. 3. 2010, 00:33:04 Odpovědět Citovat Tak to som rad, že som si dal tu prácu a prerobil som to bez potreby atributov id. Pokusim sa trochu vysvetliť: funkcia swapp() je volaná s premennou this, čo značí systemove meno pre objekt, v ktorom sa program práve nachádzá. Funkcia si najprv urobí prehliad o prostredí, v ktorom bude robiť zmeny, teda definuje si odkaz na objekt <div> v ktorom sa nachádzajú všetky potrebné objekty -> oContent. Ďalej si pripraví kolekciu všetkých elementov <dd> vnútri <div>u oContent -> cDDs. Pred zmenami si uloží stav zobrazenie vlastneho pod<div>u -> moje. Pak sa všetky pod<div>y pozatvárajů a na záver sa aktuálny pod<div> zobrazí ak iba bol pred tým skrytý. Celý fígel je v tom, že sa pre vyhladanie vhodných elementov využíva methoda .getElementsByTagName('menoTagu'), ktorej rozsah vyhladávanie sa dá obmedziť na všetky podelementy jednoho DOM elementu. Pozor toto funguje iba s touto methodou, podobné methody getElementsByName a getElementById prehliadávjú vždy iba celý document! Takže jediné id je nutné v tom hlavnom <div id="content">. Ostatné neni su potrebne a len som bol líny ich zrušiť. Ak budete presne dodržiavat tú istú štruktúru ako doposiaľ <dd onClick="javascript:swapp(this)">Impromptu op. 90 č.3 G-dur <div id="o13" style="display: none;"> <iframe src="player/schubert_impromptu_op._90_no.3_g_dur/player.html"; scrolling="no"; allowTransparency="true"; width="210" height="130" frameborder="0" style="padding-left:125px"> </iframe> </div> </dd><dt> </dt> tak by všetko malo vporiadku premávať. P.S. Ja som bol takto vychovaný a nepovažujem tykanie/vykanie za bohviečo. A svojim študentom som vykal pre to, že som chciel aby cítili, že uznávam ich dôstojnosť. Viem, že komunita sa riadí svojimi pravidlami a nehoradzujem sa proti tykaní, lebo si to považujem ako prejav prijatí do tohto programátorského sprisahania :-D Som hrdý na to, že môžem spolupracovať so 17ročným "sopliakom", ktorý dokáže realisovať taký pekný webovský projekt.
	jancikfilip Profil	#13 · Zasláno: 25. 3. 2010, 23:52:55 · Upravil/a: jancikfilip Odpovědět Citovat Tak som to teda implementoval do webu nanovo, to ale až teraz som prišiel na jednu malú ´´chybičku´´ a to je, že pri najetí myškou na odkaz, sa text ako odkaz nechová. to je samozrejme tak koli tomu že nieje napisane ako odkaz. Ako docielim aby sa tie ´´odkazy´´ pri najetí myšou, správali ako odkaz? tj. napr. zmenili farbu .... ako je to pri klasickom odkaze <a></a> Vopred ďakujem šete raz za odpoveď
	sysel Profil	#14 · Zasláno: 26. 3. 2010, 02:37:53 Odpovědět Citovat Vyskúšal som to a ide sa vrátiť k použitiu <a ...></a> takto: <dd><a href="javascript:;" onClick="javascript:swapp(this);" class="styl71">Impromptu op. 142 č.4 f-mol</a> Možno je to trocha kostrbaté, ále svôj účeľ to plní. Vsamotnej funkcii je treba pozmeniť ridky päť a deväť: <script type="text/javascript"> function swapp(oDD) { oContent = document.getElementById('content'); cDDs = oContent.getElementsByTagName('dd'); moje = oDD.parentNode.getElementsByTagName('div')[0].style.display for(jdx = 0;jdx<cDDs.length;jdx++) { oDiv = cDDs[jdx].getElementsByTagName('div')[0]; oDiv.style.display = 'none'; } if(moje == 'none') oDD.parentNode.getElementsByTagName('div')[0].style.display = 'block'; } </script> Možno by sa dalo dajako napodobiť správanie <dd> tagu pomocou eventov onMouseOver, ále to je zbytočne zložité. Tak sme sa kruhom dostali tamer zpäť k pôvonej versii, ospravedlňujem sa, na tie blikačky moc niesom, no pripúšťam, že to bude päknejšie.
	jancikfilip Profil	#15 · Zasláno: 28. 3. 2010, 15:22:32 · Upravil/a: jancikfilip Odpovědět Citovat Dobrý deň, tak som to teda spravil s tym <a></a>. Bohužail to robí problém v tom, že po kliknutí na odkaz ma presmeruje na /javascript;[/b]]http://www.stráka.com/sk/javascript; namiesto toho aby to rozbalilo. V podstate odkazujem na javascript... :D ale myslel som ze odkazem iba na tu funkciu ktora to rozbali. Dá sa to nejak odstrániť? Ďakujem za odpoveď
	sysel Profil	#16 · Zasláno: 28. 3. 2010, 17:31:13 Odpovědět Citovat Snad je to jen zapomenutá dvojtečka <a href="javascript:;" Nelze na funkci odkazovat tak jak to bylo dříve, protože takový odkaz nezachytí objekt this a tak se ztratí důležitá podmínka funkčnosti. Ale pokud fungovalo původní uspořádání tak, když se v původní referenci objeví pouze javascripový prázdný příkaz, tak by to mělo fungovat i nadále. Mně to ve FF3.6 pracuje dobře.
	jancikfilip Profil	#17 · Zasláno: 28. 3. 2010, 22:17:34 Odpovědět Citovat sysel: Prepáč, bola to ta dvojbodka... ospravedlnujem sa.. že som itravoval :D A inč, ty si slovák alebo čech? pratože raz si pisal po slovensky jeden prispevok ...? Dakujem
	sysel Profil	#18 · Zasláno: 29. 3. 2010, 01:47:19 Odpovědět Citovat Ja su čistokrevné Hanák. :-) Keďže som sa narodil v minulom stáročí, cítim a žijem československy.
	jancikfilip Profil	#19 · Zasláno: 31. 3. 2010, 00:58:26 Odpovědět Citovat sysel: Tak a som tu ZNOVA ! :D prerobil som to na piano.jelaspitkova.com mozete si to prezrieť. A však je tu jedna ´´chyba´´ na ktorú ma upozornila ´´majitelka´´ stránky. Ten nedostatok spocina v tom, že ak spustim skladbu 1 a kliknem na skladbu 2, tak sa prehravač skladby 1 síce skryje, ale prehrávač hrá delej. dá sa to nejak vyriešiť? pri tej uple prvej verzii sak pri kliknuti prehravac zatvoril a prestala hrat skladba. Dakujem za radu, uz mi je to blbe takto otravovať ale sám to nevyriešim. Filip
	jancikfilip Profil	#20 · Zasláno: 1. 4. 2010, 18:01:33 Odpovědět Citovat OPRAVA zistil som ze to robi problem len v Internet Explorer. V mozile to ide.. moze sa to nejak vyriešiť abya to fungovao takto i IE?? ďakujem
		Časová prodleva: 3 dny
	sysel Profil	#21 · Zasláno: 5. 4. 2010, 03:39:04 Odpovědět Citovat Snažil jsem se nad tím popřemýšlet, ale je to mimo dosah mých znalostí. Přehrávač vesele pokračuje v přehrávání skrytého elementu i když je spuštěn několikrát, a to i ve FF a Safari. Nedokážu odhadnout, zda lze <iframe>y přepsat tak, aby využívaly pouze jeden přehrávač pro celou stránku, anebo, zda lze spuštěnému přehrávači poslat JavaScriptem nějaký příkaz (stop, reset ...) aby zmlknul. Zatím mne napadla pouze jediná spolehlivá cesta, a totiž ta, že by se namísto skrývání a zobrazování <iframe>y do <div>ů vlkádaly a mazaly (třeba by stačilo je jen přepsat pomocí innerHTML). Ovšem pak by musely být vzory těch vkládaných tagů načteny hned zpočátku strany do nějakého Array. Nemohu to zkoušet, protože nemám k disposici player a popravdě mi není jasná ani konstrukce jeho volání.
	jancikfilip Profil	#22 · Zasláno: 7. 4. 2010, 00:31:04 Odpovědět Citovat V tom prvon pripade ktorý vždy nechal otvprene tie prehrávače ktore som sim pootváral, to fungovalo tak, že pri ´´ručnom´´ zatvorení sa pesnicka prestala prehrávať. Ako keby sa proste ten Iframe odpojil alebo co :D pri znovuotvorení sa cely prehravac nacitaval odznova.. proste ak bola pesnicka na 1:30 s tak pri znovuotvoreni sa prehravac nacital znova, a pesnicka zacinala znova od prvej sekundy... Vie mi s tym niekto prosim poradiť? pristupim aj na iné rešenia. Velmi pekne ďakujem....
	pavuk Profil	#23 · Zasláno: 7. 4. 2010, 06:13:26 Odpovědět Citovat Nevím jestli to bude řešení pro tebe, ale já to na svý stránce vyřešil tímhle přehrávačem: <p id="player2"><a href="http://www.macromedia.com... the Flash Player"</a> to see this player.</p> <script type="text/javascript"> var FU = { movie:"mp3player.swf",width:"570",height:"552",majorversion:"7",build:"0",bgcolor:"#cccccc", flashvars:"file=playlist.xml&repeat= false&showdigits=true&light color=0x515151&autoscroll=true& amp;showeq=true" }; UFO.create( FU, "player2") </script> Soubor playlist.xml ve stejným adresáři se skladbama vypadá takhle: <playlist version="1" xmlns="http://xspf.org/ns/0/"> <trackList> <track> <title>Vera - Song bez jediny vady</title> <creator>Pink Floyd</creator> <location>Vera.mp3</location> </track> ... ... ... </trackList> </playlist> Dá se i poměrně dobře nastylovat a běží i v IE
	jancikfilip Profil	#24 · Zasláno: 7. 4. 2010, 11:08:25 Odpovědět Citovat pavuk: ďakujem, ale to mi asi nepomôže... na stranke ma byť popis a vedla toho prehrávač pozri sa ako to mam na stranke teraz
		Časová prodleva: 9 dní
	Fred Profil	#25 · Zasláno: 16. 4. 2010, 12:01:28 Odpovědět Citovat Asi bych zkusil nějaký scriptovatelný flash player, třeba http://www.varal.org/media/niftyplayer/
		Časová prodleva: 3 dny
	jancikfilip Profil	#26 · Zasláno: 19. 4. 2010, 19:02:44 Odpovědět Citovat Fred: to bych to musel cele predelavat :D:D:..
		Časová prodleva: 14 let

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje