Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] sliding panel zmiana kierunku dzialania
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Bding
Witam serdecznie!

Poszukuje pomocy w zmianie ustwienia kierunku otwierania panelu. Niestety jestem zielony jezeli chodzi o grubsze sprawy zwiazane z java.

Chodzi mi konkretnie o ostatni przykład na tej stronie:
http://www.switchonthecode.com/tutorials/j...neric-animation

Musze zmienic kierunek otwierania na z prawej do lewej. Bede wdzieczny za pomoc lub jakakolwiek wskazowke...

Pozdrawiam,
Piotr

1. plik

  1. //This code was created by the fine folks at Switch On The Code - <a href="http://blog.paranoidferret.com" target="_blank">http://blog.paranoidferret.com</a>
  2. //This code can be used for any purpose
  3.  
  4. function animate(elementID, newLeft, newTop, newWidth,
  5. newHeight, time, callback)
  6. {
  7. var el = document.getElementById(elementID);
  8. if(el == null)
  9. return;
  10.  
  11. var cLeft = parseInt(el.style.left);
  12. var cTop = parseInt(el.style.top);
  13. var cWidth = parseInt(el.style.width);
  14. var cHeight = parseInt(el.style.height);
  15.  
  16. var totalFrames = 1;
  17. if(time> 0)
  18. totalFrames = time/40;
  19.  
  20. var fLeft = newLeft - cLeft;
  21. if(fLeft != 0)
  22. fLeft /= totalFrames;
  23.  
  24. var fTop = newTop - cTop;
  25. if(fTop != 0)
  26. fTop /= totalFrames;
  27.  
  28. var fWidth = newWidth - cWidth;
  29. if(fWidth != 0)
  30. fWidth /= totalFrames;
  31.  
  32. var fHeight = newHeight - cHeight;
  33. if(fHeight != 0)
  34. fHeight /= totalFrames;
  35.  
  36. doFrame(elementID, cLeft, newLeft, fLeft,
  37. cTop, newTop, fTop, cWidth, newWidth, fWidth,
  38. cHeight, newHeight, fHeight, callback);
  39. }
  40.  
  41. function doFrame(eID, cLeft, nLeft, fLeft,
  42. cTop, nTop, fTop, cWidth, nWidth, fWidth,
  43. cHeight, nHeight, fHeight, callback)
  44. {
  45. var el = document.getElementById(eID);
  46. if(el == null)
  47. return;
  48.  
  49. cLeft = moveSingleVal(cLeft, nLeft, fLeft);
  50. cTop = moveSingleVal(cTop, nTop, fTop);
  51. cWidth = moveSingleVal(cWidth, nWidth, fWidth);
  52. cHeight = moveSingleVal(cHeight, nHeight, fHeight);
  53.  
  54. el.style.left = Math.round(cLeft) + 'px';
  55. el.style.top = Math.round(cTop) + 'px';
  56. el.style.width = Math.round(cWidth) + 'px';
  57. el.style.height = Math.round(cHeight) + 'px';
  58.  
  59. if(cLeft == nLeft && cTop == nTop && cHeight == nHeight
  60. && cWidth == nWidth)
  61. {
  62. if(callback != null)
  63. callback();
  64. return;
  65. }
  66.  
  67. setTimeout( 'doFrame("'+eID+'",'+cLeft+','+nLeft+','+fLeft+','
  68. +cTop+','+nTop+','+fTop+','+cWidth+','+nWidth+','+fWidth+','
  69. +cHeight+','+nHeight+','+fHeight+','+callback+')', 40);
  70. }
  71.  
  72. function moveSingleVal(currentVal, finalVal, frameAmt)
  73. {
  74. if(frameAmt == 0 || currentVal == finalVal)
  75. return finalVal;
  76.  
  77. currentVal += frameAmt;
  78. if((frameAmt> 0 && currentVal>= finalVal)
  79. || (frameAmt <0 && currentVal <= finalVal))
  80. {
  81. return finalVal;
  82. }
  83. return currentVal;
  84. }


2. plik

  1. var slideElement = null;
  2. function slideExample4(elementId, headerElement)
  3. {
  4.  
  5. slideElement = document.getElementById(elementId);
  6. if(slideElement.up == false || slideElement.down)
  7. {
  8. slideUpStep1();
  9. slideElement.up = true;
  10. slideElement.down = false;
  11. headerElement.innerHTML = '+';
  12. }
  13. else
  14. {
  15. slideDownStep1();
  16. slideElement.down = true;
  17. slideElement.up = false;
  18. headerElement.innerHTML = '-';
  19. }
  20. }
  21.  
  22. function slideUpStep1()
  23. {
  24. animate(slideElement.id, 0, 0, 20, 150, 250, slideUpStep2);
  25. }
  26.  
  27. function slideUpStep2()
  28. {
  29. animate(slideElement.id, 0, 0, 20, 20, 250, null);
  30. }
  31.  
  32. function slideDownStep1()
  33. {
  34. animate(slideElement.id, 0, 0, 20, 150, 250, slideDownStep2);
  35. }
  36.  
  37. function slideDownStep2()
  38. {
  39. animate(slideElement.id, 0, 0, 700, 150, 250, null);
  40. }
  41.  


Może chociaż mógłby ktoś podpowiedzieć jak się do tego zabrać i na co zwrócić uwagę przy zmianie animacji...?
mortus
W tym konkretnym przykładzie zmieniamy koniecznie
  1. <div onclick="slideExample4('examplePanel4', this);" style="z-index: 1; position: absolute; width: 20px; height: 20px; top: 0px; background: none repeat scroll 0% 0% rgb(59, 88, 122); text-align: center; color: rgb(255, 255, 255); left: 130px;" id="exampleHeader4">-</div>

ustawiając left: 130px; oraz funkcje slideUpStep1() i slideUpStep2():
[JAVASCRIPT] pobierz, plaintext
  1. function slideUpStep1()
  2. {
  3. animate(slideElement.id, 130, 0, 20, 150, 250, slideUpStep2);
  4. }
  5.  
  6. function slideUpStep2()
  7. {
  8. animate(slideElement.id, 130, 0, 20, 20, 250, null);
  9. }
[JAVASCRIPT] pobierz, plaintext

Chyba powinno działać.

EDIT
To nie Java, a JavaScript.

Jeszcze funkcję slideDownStep1() trzeba zmienić:
[JAVASCRIPT] pobierz, plaintext
  1. function slideDownStep1()
  2. {
  3. animate(slideElement.id, 130, 0, 20, 150, 250, slideDownStep2);
  4. }
[JAVASCRIPT] pobierz, plaintext


Swoją drogą, aby to ogarnąć wystarczy odrobina logicznego myślenia i powierzchowna znajomość angielskiego.
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.