Obsah fóra
PravidláRegistrovaťPrihlásenie




Odpovedať na tému [ Príspevkov: 21 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok NapísalOffline : 28.10.2009 0:33

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. :loony:

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>



Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 31.05.09
Prihlásený: 02.06.17
Príspevky: 562
Témy: 37
Bydlisko: BegyBen
Príspevok NapísalOffline : 28.10.2009 1:55

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> 


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 9:05

Funguje to!!! :shock:
Nedá sa nejak jednou vetou vysvetliť, v čom som robil chybu?
Dík moc! :)


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81
Príspevok NapísalOffline : 28.10.2009 9:07

minimalne tu "i+px";


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 9:21

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???


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81
Príspevok NapísalOffline : 28.10.2009 9:23

to je predsa samozrejme, skus si predstavit co by sa stalo keby si funkciu neprerusil returnom po splneni podmienky


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 9:23

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. :loony:


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81
Príspevok NapísalOffline : 28.10.2009 9:24

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


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 9:28

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)


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 9:45

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 :sick:
Stále by som čakal, že setTimeout() by mala byť na konci.


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 9:49

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);

}


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 30.04.09
Prihlásený: 11.02.10
Príspevky: 723
Témy: 81
Príspevok NapísalOffline : 28.10.2009 10:15

lebo volas rekurzivne funkciu na jej konci? a kod ktory prebehne je :
}


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 28.10.2009 10:45

Ďakujem moc všetkým!!!
Teraz idem na zatváranie toho menu. Snáď .......
Ešte raz dík!


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 21.10.08
Prihlásený: 18.12.19
Príspevky: 198
Témy: 74
Bydlisko: Nitra
Príspevok NapísalOffline : 15.11.2009 14:30

Vie niekto vyriesit aj spatne namotanie toho divu?


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 31.05.09
Prihlásený: 02.06.17
Príspevky: 562
Témy: 37
Bydlisko: BegyBen
Príspevok NapísalOffline : 15.11.2009 17:17

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>


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 21.10.08
Prihlásený: 18.12.19
Príspevky: 198
Témy: 74
Bydlisko: Nitra
Príspevok NapísalOffline : 15.11.2009 18:37

takimto stylom som to robil aj ja,. a mi to nechcelo fachat,


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 17.11.2009 11:22

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ý.


Offline

Čestný člen
Čestný člen
Postupna zmena height cez JS

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34
Bydlisko: Brno
Príspevok NapísalOffline : 17.11.2009 12:48

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.


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 17.11.2009 16:30

Ď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.


Offline

Čestný člen
Čestný člen
Postupna zmena height cez JS

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34
Bydlisko: Brno
Príspevok NapísalOffline : 17.11.2009 19:16

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.


Offline

Užívateľ
Užívateľ
Postupna zmena height cez JS

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127
Bydlisko: Lehota pod ...
Príspevok Napísal autor témyOffline : 17.11.2009 21:27

Ď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.


Odpovedať na tému [ Príspevkov: 21 ] 


Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy. Postupná zmena

[ Choď na stránku:Choď na stránku: 1, 2 ]

v JavaScript, VBScript, Ajax

31

1489

18.12.2008 14:16

chrono Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. zmena pozadia cez fwrite

v PHP, ASP

5

925

13.10.2007 11:57

Bananslovak Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Form - zmena url cez radio

v PHP, ASP

8

824

11.02.2007 15:21

SonnY Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Zmena temy cez prikazovy riadok

v Operačné systémy Microsoft

0

512

17.09.2006 16:39

quatermain Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Zmena mime typu cez HTTP s ASP.net

v Technológia .NET

1

1697

11.07.2008 13:31

ProJee Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. height:auto

v HTML, XHTML, XML, CSS

13

628

07.04.2012 17:51

iop Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Div height auto

v HTML, XHTML, XML, CSS

2

515

11.02.2012 11:33

PanLolec Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. iReport - band height

v Assembler, C, C++, Pascal, Java

0

275

21.03.2014 15:07

xxx9955 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. auto height divu

v HTML, XHTML, XML, CSS

4

376

18.01.2011 19:59

Antuanet Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. CSS: problem s height

v HTML, XHTML, XML, CSS

2

383

15.07.2010 13:48

frosticek2 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. firefox - DIV height: 100%;

v HTML, XHTML, XML, CSS

2

604

08.06.2007 14:16

ambrel Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. <div> height ?

v HTML, XHTML, XML, CSS

8

748

26.01.2009 8:51

don jebot Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Auto height nefunguje dobre

v HTML, XHTML, XML, CSS

4

443

21.09.2010 20:17

AReYco Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. nastavenie Height v odkaze, css

v HTML, XHTML, XML, CSS

3

604

22.10.2009 13:36

Krtko Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Image width and height BBcode

v Redakčné systémy

0

640

14.10.2006 15:05

JanoF Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. line-height IE vs FF

v HTML, XHTML, XML, CSS

11

632

23.11.2007 11:10

mokus Zobrazenie posledných príspevkov


Nemôžete zakladať nové témy v tomto fóre
Nemôžete odpovedať na témy v tomto fóre
Nemôžete upravovať svoje príspevky v tomto fóre
Nemôžete mazať svoje príspevky v tomto fóre

Skočiť na:  

Powered by phpBB Jarvis © 2005 - 2024 PCforum, webhosting by WebSupport, secured by GeoTrust, edited by JanoF
Ako väčšina webových stránok aj my používame cookies. Zotrvaním na webovej stránke súhlasíte, že ich môžeme používať.
Všeobecné podmienky, spracovanie osobných údajov a pravidlá fóra