JS sliding panel

limubai81 · 09.09.2009

hiho ich habe im inet ein script gefunden mit welchen eine divbox auf- und zugeslided wird. nur leider wird beim ersten betätigen des buttons die box von der falschen stelle und seite aufgezogen. Sie soll aber auch beim ersten betatigen genauso aufsliden wie bei den darauf folgenden klicks.
das script hab ich von hier

meine testdatei:

der quelltext:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
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;
}



function slideExample2(elementId, headerElement)
{
   var element = document.getElementById(elementId);
   if(element.up == false || element.down)
   {
      animate(elementId, 150, 0, 0, 150, 250, null);
      element.up = true;
      element.down = false;
      headerElement.innerHTML = '+';
   }
   else
   {
      animate(elementId, 0, 0, 150, 150, 250, null);
      element.down = true;
      element.up = false;
      headerElement.innerHTML = '-';
   }
}




</script>
</head>

<body>
<div>
<div style="position:relative;
           width:150px;
           height:170px;
           top:0px;
           left:0px;">
  <div id="exampleHeader2"
      style="position:absolute;
             width:20px;
             height:150px;
             top:0px;
             left:150px;
             background:#3b587a;
             text-align:center;
             color:#FFFFFF;"
      onclick="slideExample2('examplePanel2', this);">
    +
  </div>
  <div id="examplePanel2"
      style="position:absolute;
             width:0px;
             height:150px;
             top:0px;
             left:20px;
             background:#a6bbcd;
             overflow:hidden;">
    Content
  </div>
</div>
</div>

</body>
</html>

lg LiMu

limubai81 · 14.09.2009

AW: JS sliding panel

hat keiner ne ahnung was ich da verändern muss?
das es nach links aufslidet und am anfang zu ist hab ich ja schon ändern können. nur der fehler beim ersten draufklicken nervt halt, ich denk mal das liegt an einer falschen css angabe.

lg limu

Rakete · 14.09.2009

AW: JS sliding panel

limubai81 schrieb:
..., ich denk mal das liegt an einer falschen css angabe.

Richtig ...

Die Angabe für "left" bei den Startwerten von "examplePanel2" ist falsch. Hier steht 20 Pixel - eigentlich sollte hier aber 150 Pixel stehen.

limubai81 · 14.09.2009

AW: JS sliding panel

danke dir
hatte auch grad nochmal geschaut und kam zu der gleichen lösung

lg LiMu

ezekiel23 · 18.09.2009

AW: JS sliding panel

Hallo,

ich hab zu der gleichen Seite auch eine kleine Frage.

Ich nutze das Example4, welches unter den Link oben zu finden ist.

Hab einiges probiert, dass das drunterliegende DIV nicht geöffnet, sondern geschlossen ist beim laden der Seite.

Hat jemand dazu eine gute Idee? Wäre dankbar..

Hier auch nochmal das Skript dazu:

var slideElement = null;

function slideExample4(elementId, headerElement)
{

slideElement = document.getElementById(elementId);
if(slideElement.up == null || 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, 150, 150, 250, null);
}