[ 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 | 127
Bydlisko: Lehota pod ...
NapísalOffline : 28.10.2009 0:33 | Postupna zmena height cez JS

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 | 37
Bydlisko: BegyBen
NapísalOffline : 28.10.2009 1:55 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 9:05 | Postupna zmena height cez JS

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

minimalne tu "i+px";


Offline

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

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 9:21 | Postupna zmena height cez JS

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

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 9:23 | Postupna zmena height cez JS

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


Offline

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

Registrovaný: 05.09.09
Príspevky: 1141
Témy: 127 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 9:28 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 9:45 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 9:49 | Postupna zmena height cez JS

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 | 81
NapísalOffline : 28.10.2009 10:15 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 28.10.2009 10:45 | Postupna zmena height cez JS

Ď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 | 74
Bydlisko: Nitra
NapísalOffline : 15.11.2009 14:30 | Postupna zmena height cez JS

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 | 37
Bydlisko: BegyBen
NapísalOffline : 15.11.2009 17:17 | Postupna zmena height cez JS

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 | 74
Bydlisko: Nitra
NapísalOffline : 15.11.2009 18:37 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 17.11.2009 11:22 | Postupna zmena height cez JS

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 | 34
Bydlisko: Brno
NapísalOffline : 17.11.2009 12:48 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 17.11.2009 16:30 | Postupna zmena height cez JS

Ď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 | 34
Bydlisko: Brno
NapísalOffline : 17.11.2009 19:16 | Postupna zmena height cez JS

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 | 127
Bydlisko: Lehota pod ...
Napísal autor témyOffline : 17.11.2009 21:27 | Postupna zmena height cez JS

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


 [ Príspevkov: 21 ] 


Postupna zmena height cez JS



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

1507

18.12.2008 14:16

chrono

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

zmena pozadia cez fwrite

v PHP, ASP

5

936

13.10.2007 11:57

Bananslovak

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

Form - zmena url cez radio

v PHP, ASP

8

832

11.02.2007 15:21

SonnY

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

Zmena temy cez prikazovy riadok

v Operačné systémy Microsoft

0

523

17.09.2006 16:39

quatermain

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

1703

11.07.2008 13:31

ProJee

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

height:auto

v HTML, XHTML, XML, CSS

13

637

07.04.2012 17:51

iop

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

iReport - band height

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

0

283

21.03.2014 15:07

xxx9955

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

auto height divu

v HTML, XHTML, XML, CSS

4

384

18.01.2011 19:59

Antuanet

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

Div height auto

v HTML, XHTML, XML, CSS

2

523

11.02.2012 11:33

PanLolec

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

CSS: problem s height

v HTML, XHTML, XML, CSS

2

391

15.07.2010 13:48

frosticek2

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

Auto height nefunguje dobre

v HTML, XHTML, XML, CSS

4

449

21.09.2010 20:17

AReYco

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

firefox - DIV height: 100%;

v HTML, XHTML, XML, CSS

2

611

08.06.2007 14:16

ambrel

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

<div> height ?

v HTML, XHTML, XML, CSS

8

753

26.01.2009 8:51

don jebot

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

nastavenie Height v odkaze, css

v HTML, XHTML, XML, CSS

3

613

22.10.2009 13:36

Krtko

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

iframe !!! height:auto nefunguje! prečo?

v HTML, XHTML, XML, CSS

2

295

30.07.2014 23:20

ziadnemena

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

Image width and height BBcode

v Redakčné systémy

0

648

14.10.2006 15:05

JanoF



© 2005 - 2024 PCforum, edited by JanoF