Ĺadny brzuch
Witam, jak w temacie mam problem z rozsuwanym menu - zamiast wypisywać elementy jeden po drugim w odstępie czasowym skrypt zamiera na pewien okres czasu i następnie pokazuje otwarte całe menu. Czy mógłby mi ktoś pomóc zrobić właściwą funkcję opóźniania? Jestem gotów nawet zapłacić...
Cały skrypt menu znajduje się na stronie http://www.iguana999...l/witek/demo/20
Pozdrawiam i czekam na posty.
<style type="text/css"> <!-- td.boxText ul{ list-style-type: none; padding:0; margin:0; margin-left:10px; } --> </style> <script language="Javascript"> var ids=new Array(); var szybko=true; var intervalID; function switchid(id){ hideallids(); showul(id-1,"block"); return false; } function hideallids(){ //loop through the array and hide each element by id for (var i=0;i<ids.length;i++) showul(i,"none"); } function showul(id,value) { //safe function to show an element with a specified id for (var j=0;j<ids2[id];j++) intervalID = setInterval("showul2(\""+(id+1)+'_'+j+"\",\"" +value+"\")", 10); return false; } function showul2(id,value) { if (document.getElementById) // DOM3 = IE5, NS6 document.getElementById(id).style.display = value; else if (document.all) document.all[id].style.display = value; } </script> <a class="cat" onclick="return switchid(1)" href="http://www.free-store-templates.com/demo/20/index.php?cPath=1">Hardware (6) »</a> <ul id="1"> <li id="1_0"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=17">CDROM Drives</a></li><li id="1_1"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=4">Graphics Cards (2)</a></li><li id="1_2"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=8">Keyboards (1)</a></li><li id="1_3"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=16">Memory</a>< /li><li id="1_4"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=9">Mice (2)< /a></li><li id="1_5"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=6">Monitors</a>< /li><li id="1_6"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=5">Printers (1)< /a></li><li id="1_7"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=7">Speakers</a>< /li></ul> <a class="cat" onclick="return switchid(2)" href="http://www.free-store-templates.com/demo/20/index.php?cPath=2">Software (4) »</a> <ul id="2"> <li id="2_0"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=19">Action (1)< /a></li><li id="2_1"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=18">Simulation (1)</a></li><li id="2_2"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=20">Strategy (2)</a></li></ul> <a class="cat" onclick="return switchid(3)" href="http://www.free-store-templates.com/demo/20/index.php?cPath=3">DVD Movies (17) »</a> <ul id="3"> <li id="3_0"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=10">Action (9)< /a></li><li id="3_1"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=13">Cartoons (1)</a></li><li id="3_2"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=12">Comedy (2)< /a></li><li id="3_3"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=15">Drama (3)< /a></li><li id="3_4"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=11">Science Fiction (1)</a></li><li id="3_5"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=14">Thriller (1)</a></li></ul>
Przeanalizuj swoją funkcję. Wszystkie wpisy wyświetlają się w 1 czasie. Rozsuwane menu wykonuje się inaczej, np. zmieniając wysokość nadrzędnego obiektu <div>, przy czym musi mieć styl overflow: hidden.
W twoim przypadku linki będą pojawiać się stopniowo. Gdzie leży problem? W błędnym przeświadczeniu, że funkcja setInterval() blokuje wykonywanie dalszej części kodu znajdującego się pod nią. Opóźniasz tylko to, co przekażesz do argumentu funkcji. Zatem musisz przy każdej iteracji pętli for zwiększać czas, po którym pojawi się kolejny element.
Skąd się bierze zmienna ids2 w funkcji showul()?
// Edytowano
Ach tak. Przyjrzałem się skryptowi na stronie, bo ten tutaj, który wkleiłeś nie jest w całości. Dlaczego menu wyświetla się po sekundzie? Bo tak ustawiłeśtimeoutID = window.setTimeout("showul2(\""+(id+1)+'_'+j+"\",\" "+value+"\")", 1000);
Użytkownik andrzej_aa edytował ten post 30 marzec 2010, 14:27
zanotowane.pl doc.pisz.pl pdf.pisz.pl zsf.htw.pl
Cały skrypt menu znajduje się na stronie http://www.iguana999...l/witek/demo/20
Pozdrawiam i czekam na posty.
<style type="text/css"> <!-- td.boxText ul{ list-style-type: none; padding:0; margin:0; margin-left:10px; } --> </style> <script language="Javascript"> var ids=new Array(); var szybko=true; var intervalID; function switchid(id){ hideallids(); showul(id-1,"block"); return false; } function hideallids(){ //loop through the array and hide each element by id for (var i=0;i<ids.length;i++) showul(i,"none"); } function showul(id,value) { //safe function to show an element with a specified id for (var j=0;j<ids2[id];j++) intervalID = setInterval("showul2(\""+(id+1)+'_'+j+"\",\"" +value+"\")", 10); return false; } function showul2(id,value) { if (document.getElementById) // DOM3 = IE5, NS6 document.getElementById(id).style.display = value; else if (document.all) document.all[id].style.display = value; } </script> <a class="cat" onclick="return switchid(1)" href="http://www.free-store-templates.com/demo/20/index.php?cPath=1">Hardware (6) »</a> <ul id="1"> <li id="1_0"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=17">CDROM Drives</a></li><li id="1_1"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=4">Graphics Cards (2)</a></li><li id="1_2"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=8">Keyboards (1)</a></li><li id="1_3"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=16">Memory</a>< /li><li id="1_4"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=9">Mice (2)< /a></li><li id="1_5"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=6">Monitors</a>< /li><li id="1_6"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=5">Printers (1)< /a></li><li id="1_7"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=7">Speakers</a>< /li></ul> <a class="cat" onclick="return switchid(2)" href="http://www.free-store-templates.com/demo/20/index.php?cPath=2">Software (4) »</a> <ul id="2"> <li id="2_0"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=19">Action (1)< /a></li><li id="2_1"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=18">Simulation (1)</a></li><li id="2_2"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=20">Strategy (2)</a></li></ul> <a class="cat" onclick="return switchid(3)" href="http://www.free-store-templates.com/demo/20/index.php?cPath=3">DVD Movies (17) »</a> <ul id="3"> <li id="3_0"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=10">Action (9)< /a></li><li id="3_1"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=13">Cartoons (1)</a></li><li id="3_2"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=12">Comedy (2)< /a></li><li id="3_3"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=15">Drama (3)< /a></li><li id="3_4"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=11">Science Fiction (1)</a></li><li id="3_5"><a class="cat" href="http://www.free-store-templates.com/demo/20/index.php?cPath=14">Thriller (1)</a></li></ul>
Przeanalizuj swoją funkcję. Wszystkie wpisy wyświetlają się w 1 czasie. Rozsuwane menu wykonuje się inaczej, np. zmieniając wysokość nadrzędnego obiektu <div>, przy czym musi mieć styl overflow: hidden.
W twoim przypadku linki będą pojawiać się stopniowo. Gdzie leży problem? W błędnym przeświadczeniu, że funkcja setInterval() blokuje wykonywanie dalszej części kodu znajdującego się pod nią. Opóźniasz tylko to, co przekażesz do argumentu funkcji. Zatem musisz przy każdej iteracji pętli for zwiększać czas, po którym pojawi się kolejny element.
Skąd się bierze zmienna ids2 w funkcji showul()?
// Edytowano
Ach tak. Przyjrzałem się skryptowi na stronie, bo ten tutaj, który wkleiłeś nie jest w całości. Dlaczego menu wyświetla się po sekundzie? Bo tak ustawiłeśtimeoutID = window.setTimeout("showul2(\""+(id+1)+'_'+j+"\",\" "+value+"\")", 1000);
Użytkownik andrzej_aa edytował ten post 30 marzec 2010, 14:27