Stránka: 1 z 1
| [ Príspevkov: 21 ] | |
| Autor | Správa |
|---|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Zdravým!
Môže sa mi na toto niekto pozrieť?
Chcem spraviť otváracie menu, ale tak aby sa otváralo postupne. Teda mám div/menu s výškou 0px. Po kliknutí na odkaz, by sa mala spustiť funkcia open(), ktorá každú desatinu sekundy pridá k height 1px. No mne to samozrejme nefunguje. 
Kód: <a href="#" onclick="open()">menu</a> <div id="menu" style="height:0px; width:800px"> </div> <script type="text/javascript"> var i=1; function open() { while(i<=150) { setInterval("grow()",100); } function grow() { document.getElementById('menu').style.height="i+px"; i++; } } </script> <style>
|
|
Registrovaný: 31.05.09
Prihlásený: 02.06.17
Príspevky: 562
Témy: 37 | 37
Bydlisko: BegyBen |
Skus nejak takto
Kód: <script type="text/javascript"> var height = 0; var maximumHeight = 50; function odroluj() { document.getElementById('menu').style.height = height + "px"; var casovac = setTimeout("odroluj()", 20); if(height >= maximumHeight) return; height++; } </script> <a href="#" onclick="odroluj()">menu</a> <div id="menu" style="height:0px; width:800px; background: black;"></div>
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Funguje to!!! 
Nedá sa nejak jednou vetou vysvetliť, v čom som robil chybu?
Dík moc! 
|
|
Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81 | 81 | |
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Skúšal som to riešenie pripodobniť tomu svojmu a dostal som funkčné toto: Kód: <script type="text/javascript"> var i = 0; function odroluj() { document.getElementById('menu').style.height = i + "px"; setTimeout("odroluj()", 10); if(i >= 150) return; i++; } </script> </head> <body> <a href="#" onclick="odroluj()">menu</a> <div id="menu" style="height:0px; width:800px; background: black;"></div> </body> Všetko chápem, len to return nie. Keď ho vymažem prestane script fungovať. ak to správne chápem tak sa to vracia k onClick???
|
|
Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81 | 81 |
to je predsa samozrejme, skus si predstavit co by sa stalo keby si funkciu neprerusil returnom po splneni podmienky
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Glama:
No myslel som na to, že by mala fungovať expanzia premennej. Teraz je mi jasné, že nefunguje. To si ešte preštudujem, ale to neni ten hlavný kameň úrazu.
|
|
Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81 | 81 |
dalsia vec je ze ak si nechal podmienku a zmazal return tak i++ nastane az po splneni podmienky cize nikdy kedze i=0ô ale ziadna expanzia nenastane kedze pravdepodobne taky script prehliadac automaticky vipne
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Glama:no nastal by nekonečný cyklus, či nenastal, ale ako píšeš nikdy by k i++ nedošlo???:shock:
Preto som ja použil v prvom prípade while(i<=50)
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Nejak neviem pochopiť túto časť kódu: Kód: function odroluj() {
document.getElementById('menu').style.height = i + "px";
setTimeout("odroluj()", 10);
if(i >= 150)
return;
i++;
Každých 0.01s sa vykoná fc odroluj. Nechápem, prečo je podmienka až po setTimeout(). Skúšal som to prehodiť za podmienku, ale 
Stále by som čakal, že setTimeout() by mala byť na konci.
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Presne takto som to myslel: Kód:
var i=1
function odroluj()
{
document.getElementById('menu').style.height = i + "px";
i++;
if(i >= 150)
return;
setTimeout("odroluj()", 10);
}
|
|
Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81 | 81 |
lebo volas rekurzivne funkciu na jej konci? a kod ktory prebehne je :
}
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Ďakujem moc všetkým!!!
Teraz idem na zatváranie toho menu. Snáď .......
Ešte raz dík!
|
|
Registrovaný: 21.10.08
Prihlásený: 18.12.19
Príspevky: 198
Témy: 74 | 74
Bydlisko: Nitra |
Vie niekto vyriesit aj spatne namotanie toho divu?
|
|
Registrovaný: 31.05.09
Prihlásený: 02.06.17
Príspevky: 562
Témy: 37 | 37
Bydlisko: BegyBen |
A to je nejaky problem? Par veci staci pozmenit...
Kód: <script type="text/javascript"> var i = 0; // Pocitatocna "height" div-u var rychlost = 10; // rychlost vysuvnia a zasuvania div-u function odroluj() { document.getElementById('menu').style.height = ++i + "px"; if(i >= 150) return; setTimeout("odroluj()", rychlost); } function zaroluj() { document.getElementById('menu').style.height = --i + "px"; if(i <= 0) return; setTimeout("zaroluj()", rychlost); } </script> <a href="#" onclick="if(document.getElementById('menu').style.height == '0px') odroluj(); else zaroluj();">menu</a> <div id="menu" style="height:0px; width:800px; background: black;"></div>
|
|
Registrovaný: 21.10.08
Prihlásený: 18.12.19
Príspevky: 198
Témy: 74 | 74
Bydlisko: Nitra |
takimto stylom som to robil aj ja,. a mi to nechcelo fachat,
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Tak sem daj svoj kód, nech sa na to dá pozrieť. Netvrdím, že ti pomôžem, ale chcel by som to vidieť (lebo aj na cudzích chybách sa dá poučiť) prípadne sa ku tomu vyjadrí niekto JS znalý.
|
|
Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34 | 34
Bydlisko: Brno |
Dobre, davam sem svoj kod. Testovany vo Firefoxe 3.5 a IE8. Vie to box zvacsovat aj zmensovat. Odporucane pouzitie - v CSSku nastavte pre dany box vyslednu vysku, ta sa hned javascriptom prepise za zaciatocnu vysku, ale zabezpecite aj, ze uzivatelia bez JS budu vidiet hned vyslednu podobu boxu.
Kód: window.onload = function()
{
//zmente na svoje hodnoty
var box = document.getElementById('box')
var zac_vyska = 0
var vysl_vyska = 200
//koniec, dalej nic nemente
box.style.height = zac_vyska + 'px'
var zmena_vysky = setInterval(function()
{
var akt_vyska = parseInt(box.style.height)
if (akt_vyska > vysl_vyska)
{
box.style.height = (akt_vyska - 1) + 'px'
}
else if (akt_vyska < vysl_vyska)
{
box.style.height = (akt_vyska + 1) + 'px'
}
else
{
clearInterval(zmena_vysky)
return
}
}, 10)
}
Prepiste prvy riadok napr. za function odroluj(), ak chcete spustat fciu pri nejakom evente, napr. kliknuti tlacitka.
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Ďuri:
Ja mám blbú skúsenosť s height:0px v IE. Je treba tam niečo vložiť(napr. div) aby to zobrazil.
No a nejak som nepochopil, či ty si Kviki, alebo ako?
Lebo je mi jasné, že u teba to všetko funguje.
|
|
Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34 | 34
Bydlisko: Brno |
camo
To je jedno, ake hodnoty tam das. Co sa tyka nulovej vysky - skus font-size: 0; line-height: 0, pripadne mozno overflow: hidden. Ten kod som sem dal, aby ho mohol pouzit ten, kto chce, napr. aj kviki, ked mu nieco nejde.
|
|
Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ... |
Ďuri:
Height:0px som už zvládol, to by nebol problém, ja som chcel vidieť tú jeho chybu, aby som sa z toho niečo naučil. Lebo začiatočníci majú chyby väčšinou podobné, tak by som sa tam určite našiel.
|
|
Stránka: 1 z 1
| [ Príspevkov: 21 ] | |
Podobné témy | | Témy | Odpovede | Zobrazenia | Posledný príspevok |
|---|
 | [  Choď na stránku: 1, 2 ] v JavaScript, VBScript, Ajax | 31 | 1589 | 18.12.2008 14:16 chrono |  | v PHP, ASP | 5 | 963 | 13.10.2007 11:57 Bananslovak | | v PHP, ASP | 8 | 853 | 11.02.2007 15:21 SonnY | | v Operačné systémy Microsoft | 0 | 551 | 17.09.2006 16:39 quatermain | | v Technológia .NET | 1 | 1740 | 11.07.2008 13:31 ProJee | | v HTML, XHTML, XML, CSS | 13 | 672 | 07.04.2012 17:51 iop | | v HTML, XHTML, XML, CSS | 4 | 413 | 18.01.2011 19:59 Antuanet | | v HTML, XHTML, XML, CSS | 2 | 550 | 11.02.2012 11:33 PanLolec | | v Assembler, C, C++, Pascal, Java | 0 | 308 | 21.03.2014 15:07 xxx9955 | | v HTML, XHTML, XML, CSS | 4 | 475 | 21.09.2010 20:17 AReYco | | v HTML, XHTML, XML, CSS | 2 | 634 | 08.06.2007 14:16 ambrel | | v HTML, XHTML, XML, CSS | 2 | 426 | 15.07.2010 13:48 frosticek2 | | v HTML, XHTML, XML, CSS | 8 | 781 | 26.01.2009 8:51 don jebot | | v HTML, XHTML, XML, CSS | 2 | 314 | 30.07.2014 23:20 ziadnemena | | v Webdesign | 2 | 406 | 09.03.2014 23:01 majky358 | | v PHP, ASP | 4 | 361 | 15.04.2014 14:12 TheMark147 |
|
