Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: .resize() a scrollbar
Forum PHP.pl > Forum > Po stronie przeglądarki
di@blo
Witam

Mam skrypt który animuje divy w przeglądarce i dopasowuje do przeglądarki. Dla przykładu
  1. var szer = 'width': (window.innerHeight||document.body.clientHeight)-40;
  2. var wys = (window.innerWidth||document.body.clienWidth)-40,
  3. $('#div').animate({'margin-top': '20px', 'margin-left': '20px', 'width': szer, 'height': wys}, 1000);


Problem pojiawia się, gdy w trakcie animacji znika scrollbar, bo w chwili zniknięcia zmieniają sie wymiary okna przeglądarki i odpala kod:

  1. $(window).bind('resize', function(){ jakas_funckja(); });


Czy można zmusić funkcję .resize() do ignorowania pojawiania/znikania scrolbarów? Ewentualnie jak inaczej można rozwiązać problem?
Louner
Możesz blokować swoją funkcję podczas resizeowania okna w ten sposób (przypisujesz do jakiejś zmiennej 'true', gdy strona jest animowana i 'false', gdy animacja się kończy, żeby sprawdzić, czy można wywołać funkcję ze zdarzenia 'resize'):

  1. (function () {
  2. var $document = $(document),
  3. isAnimating = true,
  4. documentHeight = $document.height(),
  5. documentWidth = $document.width();
  6.  
  7. $('#div')
  8. .animate({
  9. twoje_parametry: "animacji",
  10. height: (documentHeight - 40),
  11. width: (documentWidth - 40)
  12. },
  13. 1000,
  14. function () {
  15. // animacja zakonczona, tutaj mozesz cos
  16. isAnimating = false;
  17. }
  18. );
  19.  
  20. $(window)
  21. .resize(
  22. function (evt) {
  23. // pierwszy sposob, rozpoznawanie wg zmiennej
  24. if (isAnimating) {
  25. return;
  26. }
  27. if ($("#div").is(":animating")) {
  28. return;
  29. }
  30. jakas_funckja();
  31. };
  32. );
  33. }());


drugi sposób:

  1. (function () {
  2. var $document = $(document),
  3. documentHeight = $document.height(),
  4. documentWidth = $document.width();
  5.  
  6. $('#div')
  7. .animate({
  8. twoje_parametry: "animacji",
  9. height: (documentHeight - 40),
  10. width: (documentWidth - 40)
  11. },
  12. 1000
  13. );
  14.  
  15. $(window)
  16. .resize(
  17. function (evt) {
  18. if ($("#div").is(":animating")) {
  19. return;
  20. }
  21. jakas_funckja();
  22. };
  23. );
  24. }());
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.