[jquery] sliding panel zmiana kierunku dzialania Opcje

[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

[XML] pobierz, plaintext 
//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>
//This code can be used for any purpose
 
function animate(elementID, newLeft, newTop, newWidth,
      newHeight, time, callback)
{
  var el = document.getElementById(elementID);
  if(el == null)
    return;
 
  var cLeft = parseInt(el.style.left);
  var cTop = parseInt(el.style.top);
  var cWidth = parseInt(el.style.width);
  var cHeight = parseInt(el.style.height);
 
  var totalFrames = 1;
  if(time> 0)
    totalFrames = time/40;
 
  var fLeft = newLeft - cLeft;
  if(fLeft != 0)
    fLeft /= totalFrames;
 
  var fTop = newTop - cTop;
  if(fTop != 0)
    fTop /= totalFrames;
 
  var fWidth = newWidth - cWidth;
  if(fWidth != 0)
    fWidth /= totalFrames;
 
  var fHeight = newHeight - cHeight;
  if(fHeight != 0)
    fHeight /= totalFrames;
 
  doFrame(elementID, cLeft, newLeft, fLeft,
      cTop, newTop, fTop, cWidth, newWidth, fWidth,
      cHeight, newHeight, fHeight, callback);
}
 
function doFrame(eID, cLeft, nLeft, fLeft,
      cTop, nTop, fTop, cWidth, nWidth, fWidth,
      cHeight, nHeight, fHeight, callback)
{
   var el = document.getElementById(eID);
   if(el == null)
     return;
 
  cLeft = moveSingleVal(cLeft, nLeft, fLeft);
  cTop = moveSingleVal(cTop, nTop, fTop);
  cWidth = moveSingleVal(cWidth, nWidth, fWidth);
  cHeight = moveSingleVal(cHeight, nHeight, fHeight);
 
  el.style.left = Math.round(cLeft) + 'px';
  el.style.top = Math.round(cTop) + 'px';
  el.style.width = Math.round(cWidth) + 'px';
  el.style.height = Math.round(cHeight) + 'px';
 
  if(cLeft == nLeft && cTop == nTop && cHeight == nHeight
    && cWidth == nWidth)
  {
    if(callback != null)
      callback();
    return;
  }
 
  setTimeout( 'doFrame("'+eID+'",'+cLeft+','+nLeft+','+fLeft+','
    +cTop+','+nTop+','+fTop+','+cWidth+','+nWidth+','+fWidth+','
    +cHeight+','+nHeight+','+fHeight+','+callback+')', 40);
}
 
function moveSingleVal(currentVal, finalVal, frameAmt)
{
  if(frameAmt == 0 || currentVal == finalVal)
    return finalVal;
 
  currentVal += frameAmt;
  if((frameAmt> 0 && currentVal>= finalVal)
    || (frameAmt <0 && currentVal <= finalVal))
  {
    return finalVal;
  }
  return currentVal;
}
[XML] pobierz, plaintext 

2. plik

[XML] pobierz, plaintext 
var slideElement = null;
function slideExample4(elementId, headerElement)
{
 
   slideElement = document.getElementById(elementId);
   if(slideElement.up == false || slideElement.down)
   {
      slideUpStep1();
      slideElement.up = true;
      slideElement.down = false;
      headerElement.innerHTML = '+';
   }
   else
   {
      slideDownStep1();
      slideElement.down = true;
      slideElement.up = false;
      headerElement.innerHTML = '-';
   }
}
 
function slideUpStep1()
{
   animate(slideElement.id, 0, 0, 20, 150, 250, slideUpStep2);
}
 
function slideUpStep2()
{
   animate(slideElement.id, 0, 0, 20, 20, 250, null);
}
 
function slideDownStep1()
{
   animate(slideElement.id, 0, 0, 20, 150, 250, slideDownStep2);
}
 
function slideDownStep2()
{
   animate(slideElement.id, 0, 0, 700, 150, 250, null);
}
 
[XML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<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>
[HTML] pobierz, plaintext 

ustawiając left: 130px; oraz funkcje slideUpStep1() i slideUpStep2():

[JAVASCRIPT] pobierz, plaintext 
function slideUpStep1()
{
   animate(slideElement.id, 130, 0, 20, 150, 250, slideUpStep2);
}
 
function slideUpStep2()
{
   animate(slideElement.id, 130, 0, 20, 20, 250, null);
}
[JAVASCRIPT] pobierz, plaintext 

Chyba powinno działać.

EDIT
To nie Java, a JavaScript.

Jeszcze funkcję slideDownStep1() trzeba zmienić:

[JAVASCRIPT] pobierz, plaintext 
function slideDownStep1()
{
   animate(slideElement.id, 130, 0, 20, 150, 250, slideDownStep2);
}
[JAVASCRIPT] pobierz, plaintext 

Swoją drogą, aby to ogarnąć wystarczy odrobina logicznego myślenia i powierzchowna znajomość angielskiego.

Ten post edytował mortus 2.06.2011, 12:34:19