ugrás a tartalomhoz

Divek közti kapcsolgatás

Anonymous · 2006. Okt. 20. (P), 17.11
Szeretnék tanácsot, linket, tutoriált kérni divek közti kapcsolgatáshoz.
Ez azt jelentené esetemben, hogy van mondjuk három div, ebből kettő display: none;, a harmadik látható. Valahogy újratöltés nélkül szeretném megoldani a dolgot.
‹ Miért jobb az XHTML, mi a DOM, miért kell a DOCTYPE ...? Group panel elem weben hogy használható? ›
 ■
1

re

Anonymous · 2006. Okt. 20. (P), 17.31
parancsolj, lásd forrása

http://toxin.hu/tutorial/jsoop/2/index.html#

üdv t
2

én

toxin · 2006. Okt. 20. (P), 17.32
voltam, bocsánat
3

Köszi

Anonymous · 2006. Okt. 20. (P), 17.43
Ez már majdnem jó, csak kikapcsolt js esetén nem műxik. Meg igazából az effekthez sem ragaszkodom, egyszerűen csak váltogatnom kéne a div-eket.
4

re

toxin · 2006. Okt. 20. (P), 17.52
kiindulásnak jó, js meg jobb mint a css, már crossbrowser kategóriában (thx IE7)

üdv t
5

Allitsad at a display-t

Jano · 2006. Okt. 20. (P), 17.58
Egyszeru: allitsad at a display tulajdonsagaikat. Amelyiket megakarod jeleniteni annak block-ra, tobbinek none-ra.
  1. document.getElementById('elemIdje').style.display = "block;"  
JS-nelkul CSS-ben a :target -tel lehetne megoldani, dehat IE6 azt nem tudja. IE7-et nem tudom, de ezekutan lenyegtelen.
7

Igen, de ezt hogyan...

Anonymous · 2006. Okt. 20. (P), 19.11
...tudnám a legszebben, diszkrét js-t használva megvalósítani?
Ha valakinél ki van kapcsolva a js, akkor ő nem fogja látni a tartalmat... jól tévedek?
8

ha diszkrét

rudo · 2006. Okt. 20. (P), 19.49
akkor legyen a css-ben mind block, és az oldal betöltődéskor állítsa a megfelelőket a js none-ra.
6

próbáld így

rudo · 2006. Okt. 20. (P), 19.09
nem tudom, hogy pontosan mire kell, de nézd meg ezt:

http://codeworkerz.com/cssgalery

régebben csináltam és nincs kedvem kiszedni belőle a lényeget (nem olyan bonyolult úgyse)

csak css, megy IE6 és FF alatt, végső soron pedig divek jelennek meg, tűnnek el.
9

Biztos nem olyan bonyolult a dolog

Anonymous · 2006. Okt. 20. (P), 22.17
... de én most már teljesen elakadtam... :(
Szóval adott a css-ben a három div:
  1. #first, #second, #third, {   
  2. display: block;   
  3. width: 565px;   
  4. border:1px solid #f1f1f1;   
  5. padding: 5px;   
  6. margin-top: 3px; }  
Adott a html:
  1. <ul id="navigation">  
  2. <li><a href="#" onclick="divSwitcher('first')">elso divp</a></li>  
  3. <li><a href="#" onclick="divSwitcher('second)">masodik div</a></li>  
  4. <li><a href="#" onclick="divSwitcher('third')">harmadik div</a></li>  
  5. </ul>  
  6.   
  7. <div id="first">  
  8. <p>elso div tartalma</p>  
  9. </div>  
  10.   
  11. <div id="second">  
  12. <p>masodik div tartalma</p>  
  13. </div>  
  14.   
  15. <div id="third">  
  16. <h2>harmadik div tartalma</h2>  
  17. <p></p>  
  18. </div>  
Es itt megall a tudomanyom, pedig most jonne a js:
  1. /* ide jonne a js fuggveny, ami megcsinalja azt amit kell... */  
  2. function divSwitcher(name) {  
  3. ...  
  4. }  
Valaki meg tudna adni azt a lökést, ami elmozdítana erről a holtpontról?
Köszönöm szépen előre is.
10

hol jelenik meg?

rudo · 2006. Okt. 20. (P), 22.44
csak annyit árulj el, hogy a három div ugyan arra a helyre van-e pozicionálva?
tehát olyasmit akarsz csinálni, mintha mindig egy iframbe töltenél valamit, csak iframe nélkü? vagy olyasmit, mint az itt a piros, hol a pirosnál, tehát pl. egymás mellett vannak, de mindig csak a jobb, bal, vagy középső lászik csak egyszerre?
11

Ugyanott

Anonymous · 2006. Okt. 20. (P), 22.49
Ugyanazon a helyen jelennének meg, az information nevu div-en belül. Mindig csak az egyik látszana, amit kiválasztanak a fölötte lévő menü segítségével.
12

magasság

rudo · 2006. Okt. 20. (P), 23.00
és a magasságuk? változik a tartalmuk? tehát egyforma magasak, van scrollbarjuk, vagy nyúlnak?
13

re

Anonymous · 2006. Okt. 20. (P), 23.09
  • A magasság változó, de ezt a css megoldja, mivel az information nevű div nyúlik a tartalommal együtt.
  • A tartalom mysql adatbazis egy tablajanak egyetlen soranak mezoibol kerül ki, ez kerül elosztásra a div-ek között. Menet közben már nem változik egy adott div tartalma, ha erre vagy kiváncsi.
  • Nincs scrollbar.


Köszi előre is!
14

van egy gond

rudo · 2006. Okt. 20. (P), 23.17
mi van, ha nincs js? ha egymás főlé pozícionálom öket, akkor valóban gond lesz js nélkül -tehát az a kérdés, hogy akkor mi legyen?
legyenek egymás alatt, vagy mi?
15

Ha nincs js

Anonymous · 2006. Okt. 20. (P), 23.18
... akkor tökéletes, ha egymás alatt jelennek meg a divek.
16

Találtam egy ilyet...

Anonymous · 2006. Okt. 20. (P), 23.21
... ez tökéletes is lenne, csak külön kéne szedni a js-t a html-től és asszem nekem ez meg is felelne. :)
Ja, a link:
Show/hide contest
25

Másik változat?

toth_a · 2006. Okt. 22. (V), 02.18
Tehát mondjuk van 9 db DIV (mind más tartalommal), a kezdőpontjuk (elhelyezkedésük) uo. van, s attól függően, hogy mit választanak ki (link, nyomógomb), csak az jelenjen meg. Esetleg nem kell listába rakni (UL, LI), mint a másik megoldásnál?

Nem igazán ehhez a témához, de: XHTML 1.0 Strict-ben, hogyan lehet elrejteni - szabványos megoldással (!) - egy adott kép keretét?
A -->border="0"<-- nem jó!
26

hmmm.

rudo · 2006. Okt. 22. (V), 08.02
másik változat? mire gondolsz?

pont ez történik, azzal a különbséggel, hogy nem ugyanott van a kezdőpontjuk. ha ugyanoda volna pozicionálva, akkor kitakarnák egymást és elérhetetlenné válna a tartalom, ha nincs js, ráadásul az abszolút pozíció miatt nem nyúlna a content!

hol van listában, micsoda?

kerethez használd: style="border:0px;", vagy add meg stíluslapon.
31

Pontosítok!

toth_a · 2006. Okt. 22. (V), 12.16
Itt megnézhető egy minta (képernyőmentés részlete):
itt
Tehát nyomogatja a látogató a linket (vagy a nyomógombokat), s csak az a DIV "kerül elő" (látszódik), amit kiválasztott.
A képen szándékosan eltoltam 40px egységgel a jobbra eső DIV-et.

Senki?
Nem türelmetlenkedem, csak nem jövök rá sehogy, erre a fránya DIV cuccokra!

A másik probléma: hova rakjam a "border: 0px" értéket?
Próbáltam, de nem ment!
Az Opera 9 jól jeleníti meg, alapból:
itt

A FF 2.0 RC2 és az IE6 meg így:
itt

Elnézést kérek, de nekem nem triviális a megoldás!
Egyébként külső CSS file-t használok.
17

itt a megoldás

rudo · 2006. Okt. 20. (P), 23.55
  1. window.onload=function()  
  2. {  
  3.     var obj=document.getElementById('navigation').getElementsByTagName('A');  
  4.     for(i=0;i<obj.length;i++){  
  5.         obj[i].href_=obj[i].href;  
  6.         obj[i].href='javascript:void(0)';  
  7.         obj[i].onclick=function(){  
  8.             for(j=0;j<obj.length;j++){  
  9.                 document.getElementById(obj[j].href_.split('#')[1]).style.display='none';  
  10.             }  
  11.             document.getElementById(this.href_.split('#')[1]).style.display='block';  
  12.         }  
  13.     }  
  14. }  
  1. <ul id="navigation">  
  2.     <li><a href="#first">elso div</a></li>  
  3.     <li><a href="#second">masodik div</a></li>  
  4.     <li><a href="#third">harmadik div</a></li>  
  5. </ul>  
  6.   
  7. <div id="information">  
  8.       
  9.     <div id="first">  
  10.         <p>elso div tartalma</p>  
  11.     </div>  
  12.   
  13.     <div id="second">  
  14.         <p>masodik div tartalma</p>  
  15.     </div>  
  16.   
  17.     <div id="third">  
  18.         <p>harmadik div tartalma</p>  
  19.     </div>  
  20.   
  21. </div>  
18

Na, kezd tökéletes lenni

Anonymous · 2006. Okt. 21. (Szo), 00.06
Már csak egyetlen egy problémám van, hogy egy másik lapról érkezem erre az oldalra és valahogy úgy kéne indulnia, hogy alapban csak a first div van display: block; -on, a többi display: none;-ra állítva. Jelenleg ha megérkezem az oldalra, akkor látszik mindegyik, viszont a kapcsolgatás tökéletes.
Erre van valami ötleted?

Amúgy tényleg nagyon hálás vagyok a segítségért! :)
32

Nekem nem működik FF 2.0 RC2 alatt!

toth_a · 2006. Okt. 23. (H), 14.24
Próbáltam trükközni, de sehogy nem jön össze.
IE 6 és Opera 9.0 alatt megy, de a FF-ban nincs érdemi változás (eltűnés/megjelenés).
Mi lehet a baj?
  1. <div id="navigation">  
  2. <a href="#first"> elso </a>  
  3. <a href="#second"> masodik </a>  
  4. <a href="#third"> harmadik </a>  
  5. </div>  
  6.   
  7. <div id="first">elso div tartalma</div>  
  8. <div id="second">masodik div tartalma</div>  
  9. <div id="third">harmadik div tartalma</div>  
illetve a CSS kód:
  1. div#navigation {  
  2. display: inline;  
  3. width: 200px;  
  4. height: 40px;  
  5. border: 1px;  
  6. border-style: dashed;  
  7. text-align: center;  
  8. }  
  9.   
  10. div#first {  
  11. display: block;  
  12. background-color: blue;  
  13. width: 300px;  
  14. height: 75px;  
  15. border: 1px;  
  16. border-style: solid dotted;  
  17. }  
  18.   
  19. div#second {  
  20. display: block;  
  21. background-color: red;  
  22. width: 400px;  
  23. height: 75px;  
  24. border: 1px;  
  25. border-style: dotted;  
  26. }  
  27.   
  28. div#third {  
  29. display: block;  
  30. background-color: yellow;  
  31. width: 500px;  
  32. height: 75px;  
  33. border: 1px;  
  34. border-style: dotted;  
  35. }  
A korábban megadott JS szövegén semmit nem változtattam.
Valaki segítsen!
19

ezt még add hozzá,

rudo · 2006. Okt. 21. (Szo), 00.06
hogy beállítsd a kezdőlapot
  1. var firstpage='first';  
  2.       
  3.     for(i=0;i<obj.length;i++){  
  4.         var contentdiv=document.getElementById(obj[i].href_.split('#')[1]);  
  5.         if(contentdiv.id!=firstpage)contentdiv.style.display='none';  
  6.     }  
20

Egészen pontosan hová

Anonymous · 2006. Okt. 21. (Szo), 00.14
Bocs, de js-ben nagyon kezdő vagyok... :(
21

így néz ki egyben

rudo · 2006. Okt. 21. (Szo), 00.18
mehet a doksin belülre, vagy külső .js fájlba, mindegy.
  1. window.onload=function()  
  2. {  
  3.     var obj=document.getElementById('navigation').getElementsByTagName('A');  
  4.     for(i=0;i<obj.length;i++){  
  5.         obj[i].href_=obj[i].href;  
  6.         obj[i].href='javascript:void(0)';  
  7.         obj[i].onclick=function(){  
  8.             for(j=0;j<obj.length;j++){  
  9.                 document.getElementById(obj[j].href_.split('#')[1]).style.display='none';  
  10.             }  
  11.             document.getElementById(this.href_.split('#')[1]).style.display='block';  
  12.         }  
  13.     }  
  14.       
  15.     var firstpage='first';  
  16.       
  17.     for(i=0;i<obj.length;i++){  
  18.         var contentdiv=document.getElementById(obj[i].href_.split('#')[1]);  
  19.         if(contentdiv.id!=firstpage)contentdiv.style.display='none';  
  20.     }  
  21. }  
és az a szép benne, hogy simán tudod bővíteni a dolgot további menüpontokkal, anélkül, hogy a js-hez kéne nyúlnod.
22

Köszönöm mégegyszer

Anonymous · 2006. Okt. 21. (Szo), 00.21
Király, tökéletesen müködik! :)
23

szivesen

rudo · 2006. Okt. 21. (Szo), 00.23
:)
24

Ez nagyon jó. Picike és zseniális

Anonymous · 2006. Okt. 21. (Szo), 10.44
Kéne vezetni egy gyülytő mappát az elkészült megfejtéseknek a Wl-en.
27

Változik a tartalom

Anonymous · 2006. Okt. 22. (V), 09.07
Huuuuu... Egyet elfelejtettem.
A divek közti kapcsolgatás tökéletes, azonban előforulhat, hogy időközben megváltozik az SQL tábla valamelyik mezőjének tartalma, amit mindenképpen le kéne tudnom követni.
Magyarul:
ha mondjuk a negyedik div-et nézem és visszakapcsolok az elsőre, akkor nemcsak a display-t kéne változtatnom, hanem az sql lekérést is újra lefuttatni. Erre van valami ötlet?
28

Ha lehet...

Anonymous · 2006. Okt. 22. (V), 09.08
... akkor a teljes tartalom újratöltése nélkül szintén. Bár lehet, hogy ezt nem is lehet megvalósítani?
29

húha...

rudo · 2006. Okt. 22. (V), 09.21
ne igen, ez már fogós kérdés!

az ilyen tartalomkezelésnél sok probléma merülhet fel. létezik megoldás,
őt hívják úgy, hogy AJAX, két gond van vele:
1. bár léteznek kidolgozott megoldások, nem árt kicsit gyokorlottabbnak lenni pl. js-ben.
2. mivel AJAX-al teljesen a js-re hagyatkozol, ott már tényleg gond, ha nem áll rendelkezésre illetve fel kell rá készülni, de ez bizony megbonyolítja a dolgot!

ha mindenkép ilyesmit akarsz csinálni nézz bele kicsit az AJAX-ba. ezen az oldalon rengeteg cucc van róla.
a másik lehetőség, hogy fércelsz valamit iframe-el... de ilyen töltögetős dolgot tényleg csak akkor érdemes használni, ha indokolt!
30

re

Anonymous · 2006. Okt. 22. (V), 11.42
Hm... akkor valahogy másképp kell megoldanom a dolgot asszem.
Azért körülnézek, hátha találok valami kapaszkodót... :)