Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] zmniejszanie diva
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Balon
Napisalem taki skrypt sobie... wiem ze jest cos w nim zle ale jestem poczatkujacy w js winksmiley.jpg

  1. <div id="slide" style="background-color: red;" height="30px">kaka<br/></div>
  2.  
  3. <script type="text/javascript">
  4. function $( id )
  5. {
  6. return document.getElementById( id );
  7. }
  8.  
  9. function slideStart()
  10. {
  11. interval = setInterval( 'slide()', 250 );
  12. }
  13.  
  14. function slide()
  15. {
  16. id = $( 'slide' );
  17. if( id.style.height > 0 )
  18. {
  19. id.style.height -= 1;
  20. }
  21. else
  22. {
  23. clearInterval( interval );
  24. }
  25. }
  26.  
  27. onload = slideStart();


w jaki sposob to przeksztalcic zeby dzialalo ?

prosze o pomoc winksmiley.jpg
siemakuba
po pierwsze:
Kod
interval = setInterval( 'slide', 250 );
// zamiast
interval = setInterval( 'slide()', 250 );
po drugie, wysokość przed porownaniem musisz sprowadzic do liczby:
Kod
var eHeight = parseInt(id.style.height, 10);
if( eHeight > 0 )
po trzecie, przpisując wartość stylu pamiętaj o jednostkach:
Kod
id.style.height = (eHeight - 1)+'px';
po czwarte, czy zmniejszanie o 1 pixel to na pewno dobry pomysł? tu musisz potestować jak będzie wyglądać najlepiej.
Po piąte, dlaczego np. nie użyć wbudowanej w FireFoxa konsoli JavaScript i nie sprawdzić co nam powie kiedy skrypt nie działa? Wiekszość wskazanych przeze mnie błędów z pewnością byś tam zauważył.

pozdr.
Balon
ok porpawilem jak trzeba i to dziala... teraz chcialem jednak przerobic to tak zeby w zaleznosci od podanego czasu div zmniejszal sie o odpowiednia ilosc px... jednak nie potrafie tego dograc :/

  1. <script type="text/javascript">
  2. var slideTime = 250;
  3.  
  4. function $( id )
  5. {
  6. return document.getElementById( id );
  7. }
  8.  
  9. function slideStart()
  10. {
  11. interval = setInterval( 'slide()', 15 );
  12. }
  13.  
  14. function slide()
  15. {
  16.  
  17. var id = $( 'slider' );
  18. var px = slideTime / 50;
  19. var eHeight = parseInt( id.style.height, 10 );
  20. if( eHeight > 0 )
  21. {
  22. id.style.height = (eHeight - px)+'px';
  23. }
  24. else
  25. {
  26. clearInterval( interval );
  27. }
  28. }
  29. <body onload="slideStart()">
  30. <div id="slider" style="background-color: red; height: 50px;">kaka<br/></div>
  31. </body>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.