ugrás a tartalomhoz

div nyitás (mindig egy) javascipt-tel

jordapeti · 2009. Már. 26. (Cs), 00.06
Üdv mindenkinek!

Egy olyan progit szeretnék írni, ahol gombokkal tudok diveket nyitni, de ha már nyitva van egy divem a következő nyitásakor, akkor előbb a nyitva lévőt zárja be, majd nyitja a kívánt divet.

Többféleképpen is próbálkoztam már
- a divek állapotát lekérdeztem, majd a nyitottat zártam, de ez buggos volt. (csak azt nem csinálta amit kellett volna)
- most a nyitott divet tároltam változóban, és a következő nyitásnál ezt zártam. Ez egyes firefox verziókon már működik, másokon buggos, de ie-n halott.

forrás:
  1. <html>  
  2. <head>  
  1. <style type="text/css">  
  2.   
  3. #sz_1, #sz_2, #sz_3 {  
  4.     position:relative;  
  5.     left:100px;  
  6.     top:10px;  
  7.     width:200px;  
  8.     height:1px;  
  9.     border: 1px solid white;  
  10.     overflow:hidden;  
  11.     visibility:hidden;  
  12.     background: red;  
  13. }  
  14.   
  15. </style>  
  1. <script type="text/javascript">  
  2. var i=1;  
  3. var timed;  
  4. var ne;  
  5. var nyitott;  
  6. var fel;  
  7. var speed;  
  8.   
  9. function roll(nev)  
  10. {  
  11.     ne=nev;  
  12.       
  13.     if (nyitott!=undefined)  
  14.     {  
  15.         speed="20";  
  16.         up(nyitott);  
  17.     }  
  18.     else  
  19.     {speed="4";}  
  20.       
  21.     nyitott=nev;  
  22.       
  23.     down();  
  24. }  
  25.   
  26. function down()  
  27. {  
  28.     document.getElementById(ne).style.visibility="visible";  
  29.       
  30.     if (i<250)  
  31.     {  
  32.         document.getElementById(ne).style.height=i;  
  33.         i=i+1;  
  34.     }  
  35.     else  
  36.     {  
  37.         clearTimeout(timed);  
  38.     }  
  39.       
  40.     timed=setTimeout("down()",speed);  
  41. }  
  42.   
  43. function up(fel)  
  44. {  
  45.     while (i>1)  
  46.     {  
  47.         i=i-10;  
  48.         document.getElementById(fel).style.height=i;          
  49.     }  
  50.       
  51.     document.getElementById(fel).style.visibility="hidden";  
  52. }  
  53.   
  54.   
  55.   
  56. </script>  
  1. </head>  
  2. <body style="padding:0px; margin:0px;">  
  3. <img name="arrow" src="max.png" border="0" onClick="roll('sz_1')" />  
  4. <img name="arrow" src="max.png" border="0" onClick="roll('sz_2')" />  
  5. <img name="arrow" src="max.png" border="0" onClick="roll('sz_3')" />  
  6.            
  7. <div id="sz_1" align="center">szoveg1</div>  
  8. <div id="sz_2" align="center">szoveg2</div>  
  9. <div id="sz_3" align="center">szoveg3</div>  
  10.   
  11. </body>  
  12. </html>  
jorda.selfip.net/tmp/teszt/poz.htm

ebben a kódban nem értem hogy az első és a többi nyitás késleltetése között mért kellett különbséget tennem, hogy ugyan olyan legyen a tempó.

Ja és a zárás is jó lenne ha késleltetett lenne, de nekem abba mindig megakadt.

Előre is köszi mindenkinek a segítséget.

Üdv: Jordanoff Péter
‹ Segítsetek elküldeni az Űrlapot UTF-8 kódolás Dreamweaverben ›
 ■
1

segítség?

ironwill · 2009. Már. 26. (Cs), 00.37
Szia!

Először is én a helyedben egységesíteném a nyitó/záró függvény hívását.
(Mindenkettőt paraméterezve hívd, ne trüközz)

Amikor a "roll" függvény hívod, akkor az elejére beteszel egy ciklussal végig mész a div-eken és mindre meghívod a bezáró fggv-t. A nyitást meg már beletetted.

var divs = document.getElementsByTagName("div");
for (var i = 0; i<divs.length; i++) {
    if (divs[i].id.indexOf("sz_")) {
        up(divs[i]);
    }
}


Remélem tudtam segíteni.

üdv, Gábor
3

köszönöm

jordapeti · 2009. Már. 26. (Cs), 22.16
köszönöm szépen a segítséget, lehet hogy még ez lesz belőle!
2

Nekem is volt mar szuksegem

Blintux · 2009. Már. 26. (Cs), 09.41
Nekem is volt mar szuksegem ilyesmire, en a Mootools hasznalataval oldottam meg. Egyszeruen beillesztheto es meg latvanyos is.
Ime egy pelda arra ami neked kell:
http://demos.mootools.net/Accordion
4

köszönöm

jordapeti · 2009. Már. 26. (Cs), 22.20
Köszönöm szépen a linket, tetszik nekem is a megoldás!
De kérdésem lenne, hogy ha te is foglalkoztál vele, nincs-e meg a js file kibogozva?

Annyit nem értek még, hogy a divet amit nyitok, annak a magasságát hogy tudnám beállítani, és hogy overflow:hidden; legyen. A css-sel sokat nem értem el nála. Szerintem a js valahol definiálja, de sajna abban a dzsungelban nem találtam meg semmit.
5

Accordion

Poetro · 2009. Már. 27. (P), 01.01
Még egy Accordion megvalósítás, csak ez jQuery
6

ajánlom neked ezt az oldalt:

Tanul0 · 2009. Már. 27. (P), 11.36
ajánlom neked ezt az oldalt: http://dynamicdrive.com. Itt vannak hasonló scriptek ahhoz amit te szeretnél csinálni.