Js. Style.height

[bofan]

Hallo.

Ich habe 2 <div> Layer in einer Tabelle.
Diese sind zum Anfang 0px Hoch.

Nun will ich wenn ich über ein bestimmtes Feld fahre diese hochfahren lassen.

Klappt auch.

Nur Klappt das mit dem OnMouseOut nicht. er macht es Trotzdem "Groß"

siehe Mecklenburger Goldschmiede © 2009

In der Mitte unten bei Flyer.

<td id='zeiger_stavenhagen' 
style='text-align:left;width:50%;' 
onmouseover='in_stavenhagen();' 
onmouseout='out_stavenhagen();'><small>Text</small></td>

[JS-TEIL]

function hoch_stavenhagen()
{
  var wert;
  wert = document.getElementById ('flyer_stavenhagen').style.height;
  wert = wert + 1;
  wert = wert.substring(0,wert.length-3);
  if(wert >= 0 && wert <= 398)
  {
    wert++;
    document.getElementById('flyer_stavenhagen').style.height = wert + "px";
  }
}

function in_stavenhagen()
{
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#95ffff";
  document.getElementById('flyer_stavenhagen').style.height = 0 + "px";
  window.setInterval("hoch_stavenhagen()", 50);
}

function out_stavenhagen()
{
  window.clearInterval();
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#FFFFFF";
  document.getElementById('flyer_waren').style.height = 0 + "px";
  document.getElementById('flyer_stavenhagen').style.height = 0 + "px";
}

Einer ne Idee

[AmicaNoctis]

Hallo,

auf den ersten Blick vermute ich mal, dass er sich an window.clearInterval() verschluckt und deshalb den Rest nicht mehr ausführt. Das erwartet einen Parameter, nämlich das Handle, das du von setInterval() zurückbekommst. Einfach in einer globalen Variablen speichern.

Gruß,

Amica

[Kropff]

function in_stavenhagen()
{
  bla = window.setInterval("hoch_stavenhagen()", 50);
}
function out_stavenhagen()
{
  window.clearInterval(bla);
} 

Peter

[bofan]

Also der

Code sieht nun so aus:

function hoch_stavenhagen()
{
  var wert;
  wert = document.getElementById ('flyer_stavenhagen').style.height;
  wert = wert.substring(0,wert.length-3);
  if(wert >= 0 && wert <= 398)
  {
    wert++;
    document.getElementById('flyer_stavenhagen').style.height = wert + "px";
  }
}

function in_stavenhagen()
{
  aktiv_s = window.setInterval("hoch_stavenhagen()", 50);
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#95ffff";
  document.getElementById('flyer_stavenhagen').style.height = 0 + "px";
}

function out_stavenhagen()
{
  window.clearInterval(aktiv_s);
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#FFFFFF";
  document.getElementById('flyer_waren').style.height = 0 + "px";
  document.getElementById('flyer_stavenhagen').style.height = 0 + "px";
}

Es kommt beim Firebug zwar keine Meldung, aber es geht nun nicht mehr größer das div...

Scheinbar führt er den SetInterval nicht aus...

siehe

Mecklenburger Goldschmiede © 2009

[AmicaNoctis]

Edit: probier mal, die setInterval-Zeile wieder ganz runter zu schieben.

[bofan]

Okay. Ein Designfehler.?

Bestimmt mit de Namen habe ich was vertauscht. vllt. einen winzigen Tipp.


@ AmicaNoctis

Du bist echt

[AmicaNoctis]

Ne sorry, hatte selbst einen Denkfehler

Hab den Beitrag schon editiert. Du könntest aber mal noch sagen, ob er es nun gar nicht mehr macht oder nur noch einmal und dann nicht mehr.

[bofan]

So?

function in_stavenhagen()
{
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#95ffff";
  document.getElementById('flyer_stavenhagen').style.height = 0 + "px";
  aktiv_s = window.setInterval("hoch_stavenhagen()", 50);
}

Bringt keine Änderung.

[AmicaNoctis]

Ich weiß, woran es liegt

wert = "1px"; // z. B.
wert = wert.substring(0,wert.length-3);
// wert ist jetzt ""
wert++;
// wert ist wieder 1

Darum kommt er über ein Pixel nicht hinaus. Besser, du arbeitest beim Abfragen (nicht beim Setzen!) gleich mit clientHeight statt style.height, da bekommst du keinen String sondern direkt einen Integer.

[Kropff]

wert = parseInt(document.getElementById ('flyer_stavenhagen').style.height); 

Z.B.

Peter

[bofan]

Okay. es geht nun.

der Code

function hoch_stavenhagen()
{
  var wert;
  wert = parseInt(document.getElementById ('flyer_stavenhagen').style.height);
  if(wert >= 0 && wert <= 398)
  {
    wert = wert + 2;
    document.getElementById('flyer_stavenhagen').style.height = wert + "px";
  }
}

function in_stavenhagen()
{
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#95ffff";
  document.getElementById('flyer_waren').style.height = 0 + "px";
  aktiv_s = window.setInterval("hoch_stavenhagen()", 10);
}

function out_stavenhagen()
{
  window.clearInterval(aktiv_s);
  document.getElementById('zeiger_stavenhagen').style.backgroundColor = "#FFFFFF";
  document.getElementById('flyer_waren').style.height = 0 + "px";
  document.getElementById('flyer_stavenhagen').style.height = 0 + "px";
}

DANKE EUCH ZWEI!!! SUPER!!!

[AmicaNoctis]

wert = parseInt(document.getElementById ('flyer_stavenhagen').style.height);

@Kropff: Bad-Style-Alert: Erstens ist das kein PHP-Code und zweitens sollte man trotzdem (client|offset|scroll)(Height|Width) benutzen, statt sich darauf zu verlassen, dass style.height existiert, was a priori nämlich nie der Fall ist, sondern nur, wenn man es per JS gesetzt hat.

[bofan]

@Kropff: Bad-Style-Alert: Erstens ist das kein PHP-Code und zweitens sollte man trotzdem (client|offset|scroll)(Height|Width) benutzen, statt sich darauf zu verlassen, dass style.height existiert, was a priori nämlich nie der Fall ist, sondern nur, wenn man es per JS gesetzt hat.

Also doch lieber

wert = parseInt(document.getElementById ('flyer_stavenhagen').clientheight);

?

[wahsaga]

Also doch lieber

wert = parseInt(document.getElementById ('flyer_stavenhagen').clientheight;

?

http://www.php-resource.de/forum/htm...tml#post631215
Lesen + verstehen = unnötige Rückfragen sparen.

[Kropff]

@Kropff: Bad-Style-Alert: Erstens ist das kein PHP-Code

Ja und, dafür sieht er schöner aus. Ich mach das schon seit Jahren so.

und zweitens sollte man trotzdem (client|offset|scroll)(Height|Width) benutzen, statt sich darauf zu verlassen, dass style.height existiert,

Agree.

was a priori nämlich nie der Fall ist, sondern nur, wenn man es per JS gesetzt hat.

Oder per style-Attribut! Und das hat er ja gemacht.

Peter

EDIT:

---

Sollte man den Button nicht besser PHP-JavaScript-HTML-Code nennen. Denn das klappt ja ganz gut, und nur in Schwarz sieht das auch nicht so prickelnd aus.

---