Div aus/einrollen

[David]

Hallo,

ich versuche im Moment, mit Javascript einen Div-Container "auszufahren". Leider weiß ich absolut nicht, wie ich das machen soll. Alles, was ich versucht habe, funktioniert leider nicht. Könnt ihr mir vielleicht einen Tipp geben?

Hier mein Ansatz:

HTML-Abschnitt:
--------------------------------------------
<div id="LearnMore" style="padding-left:5px; font-size:10px;">

<img alt="arrow_closed.gif" src="/main/css/legal/privacy/images/arrow_closed.gif" id="changingArrow" />&nbsp;<a href="/WebObjects/legal/privacy/cookies" target="_blank" id="CookieLink" onclick="showInlineSpecs('SpecBox', 'changingArrow', '/main/css/legal/privacy/images/arrow_closed.gif', '/main/css/legal/privacy/images/arrow_open.gif', true); return false;">Weitere Infos</a>

</div>

<div id="SpecBox" class="InfoBox" style="padding:8px; font-size:10px;">

<img src="/legal/privacy/images/cookie.png" style="float:left; width:30px; height:30px;" /><img src="/main/css/legal/privacy/images/spacer.gif" style="float:left; width:10px; height:30px;" />Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.
Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.Die Nachricht in der Info Box.</div>

js-Datei:
-------------------------------------
function showInlineSpecs(strElem, strImgElem, strFirstImg, strSecondImg, boolean)

{
 var objElem = document.getElementById(strElem);
 if (strImgElem != '' && strFirstImg != '' && strSecondImg != '')
  strImgChange = true;
 else
  strImgChange = false;

if (boolean)
 {
  if (objElem.style.height != '0px')
   window.setTimeout('wipeIn()', 10);
  else
  {
   objElem.style.height = '0px';
   objElem.style.borderWidth = '0px';
   objElem.style.overflow = 'hidden';
   objElem.style.display = 'none';
   init = window.setInterval('wipeOut('+objElem.childNodes[1].offsetHeight+')', 1);
  }
 }
 else
 {

if (objElem.style.display != 'block')
  {
   if (strImgChange)
   objElem.src = strSecondImg;
   objElem.style.display = 'block';
  }
  else
  {
   if (strImgChange)
   objElem.src = strFirstImg;
   objElem.style.display = 'none';
  }

}
}

function wipeOut (strMaxWidth)
{
 objElem = document.getElementById('SpecCookies');
 objElem.style.display = 'block';
 window.clearInterval(init);
}

function wipeIn ()
{

}

Das mit den Imagedateien, die gewechselt werden, ist unrelevant für euch. Das ist einfach ein Pfeil, der anzeigt ob geöffnet oder geschlossen.

Wisst ihr, wie ich nun die SpecBox ausrollen, bzw. einrollen lassen könnte?

Gruß, David

[David]

Die Fallunterscheidung mit boolean hat folgenden Zweck:
wenn true: der Modus mit dem aus/einfahren ist aktiviert
wenn false: div wird einfach mit display = 'none' und display = 'block' angezeigt (falls ich das mit dem einund ausfahren nich schaffe wird nämlcih dieser Modus benutzt *gg*)

[Joachim]

Hi,

ich versuche im Moment, mit Javascript einen Div-Container "auszufahren". Leider weiß ich absolut nicht, wie ich das machen soll.

warum verwendest Du nicht prototype und eines der effekt-frameworks?
Ansonsten brauchst Du zwei verschachtelte Elemente: das äussere wird in der Grösse manipuliert, das innere entsprechend dagegen positioniert. So erreichst Du den "Ausfahreffekt". Alternativ zur Grössenveränderung kannst Du auch ein Element absolut positionieren, clippen und ebenfalls entsprechend positionieren.

Gruesse, Joachim