Element mit setInterval vergrößern!

[noch1rookie]

Hallo Zusammen,

versuche seit einiger Zeit ein Textelement meiner Webseite mit Hilfe von Javascript und der Funktion setInterval zu vergrößern (für den User sichtbar). Leider funktionier es nicht wie es soll. Auch dieses Forum und einige weitere haben mich bisher über die Suchfunktion nicht weiter gebracht.

Der Javascript-Code sieht im Moment folgendermaßen aus:

var steuerung = setInterval("mehr", 100);
function mehr(){
var heightVar = document.getElementById("sidebartext").style.height;
var heightVarFloat = parseFloat(heightVar);
var heightVarFloatPlus = heightVarFloat + 5;
var heightVarNew = heightVarFloatPlus + "px";
document.getElementById("sidebartext").style.height = heightVarNew;

if (document.getElementById("sidebartext").style.height = "300px"){  
		clearInterval(steuerung);  
}  

}

Das Attribut der Höhe soll sich also THEORETISCH pro zehntel Sekunde um 5px vergrößern, bis der Maximalwert von 300px erreicht ist. Ausgangsgröße des Elements ist dabei 150px. Die Funktion "mehr" kann dabei durch den User per Klick und href ausgeführt werden.

Im Moment vergrößert sich das Element allerdings ohne Verzögerung auf den Endwert(300px).
Wenn ich das "=" in der Bedingung durch ein ">" oder "==" ersetze, vergrößert sich das Element einmalig um 5px. Bei erneutem Klicken auf den Link um weitere 5px. Das Limit von 300px wird dabei allerdings ignoriert, sprich das Element wird immer größer. Warum? Wird die Bedingung nicht erkannt und die Funktion immer wieder abgebrochen?

Komme leider im Moment nicht weiter und wäre für etwas Hilfe sehr dankbar!!!

Gruß

[jobo]

Hallo,

if (document.getElementById("sidebartext").style.height = "300px"){

==

Gruß

jobo

[noch1rookie]

Hallo,

if (document.getElementById("sidebartext").style.height = "300px"){  

==

Gruß

jobo

Hallo jobo,

:-) was soll das jetzt im Klartext heißen?

[noch1rookie]

Hallo,

if (document.getElementById("sidebartext").style.height = "300px"){  

==

Gruß

jobo

Wenn das bedeuten soll in der if-Bedingung das "=" durch ein "==" zu ersetzen, dann ist das Ergebnis wie oben beschrieben.

Gruß

[Felix Riesterer]

Liebe(r) noch1rookie,

um die gegenwärtige Höhe zu ermitteln halte ich es für geschickter, wenn Du die offsetHeight-Eigenschaft benutzt, denn die ist schon numerisch und muss nicht erst geparst werden.

Außerdem fände ich es hier geschickter, kein Intervall zu setzen, sondern mit setTimeout zu arbeiten, denn dann brauchst Du keine Referenz auf das Intervall zu speichern, um es später umständlich wieder zu entfernen.

Folgender Code ist ungetestet:

function vergroessere (elm) {  
    var h = elm.offsetHeight;  
  
    if (h < 300) {  
        h += 5;  
        elm.style.height = h + "px";  
        setTimeout(function () { vergroessere(elm); }, 100);  
    }  
}

Liebe Grüße,

Felix Riesterer.

[molily]

var steuerung = setInterval("mehr", 100);

Das tut nicht das gewünschte. Es ruft die Funktion nicht auf, sondern wertet nur die Expression »mehr« aus. Die Funktion wird über ihren Namen angesprochen, aber nicht aufgerufen.

Entweder du schreibst

setInterval(mehr, 100);
(Übergabe einer Funktion)

oder

setInterval("mehr()", 100);
(Übergabe eines Strings mit JavaScript-Code, Aufruf der Funktion)

Erste Variante ist zu bevorzugen.

function mehr(){
var heightVar = document.getElementById("sidebartext").style.height;

Wenn noch kein entsprechender Inline-Style gesetzt wurde, ist diese Eigenschaft leer (ein leerer String).

Siehe http://molily.de/js/css.html#werte-auslesen - mit dem style-Objekt kannst du nur Inline-Style-Werte auslesen, die du zuvor gesetzt hast. Das besagte offsetHeight ist da schon passender. Bzw. eigentlich wäre clientHeight das, was der CSS-height-Eigenschaft entspricht.

var heightVarFloat = parseFloat(heightVar);

Ergibt in dem Fall NaN (non a number)

var heightVarFloatPlus = heightVarFloat + 5;

Ergibt NaN

var heightVarNew = heightVarFloatPlus + "px";

Ergibt "NaNpx"

document.getElementById("sidebartext").style.height = heightVarNew;

Browser ignoriert die Zuweisung, "NaNpx" ist kein gültiger Wert.

if (document.getElementById("sidebartext").style.height = "300px"){

Ist dir der Unterschied zwischen Wertzuweisung mit dem »=«-Operator und Wertvergleich mit dem »==«-Operator bekannt?

Hier willst du wohl einfach prüfen

if (heightVarFloatPlus >= 300) clearInterval(steuerung);

Mathias