Welches Ajax + Javascript Problem: HTML/CSS Element langsam vergrößern/ verkleinern

**Maisaffe** · 12.03.2007 21:13

Code:

<script language="javascript">
<!--
function resizedown(){
 for (var i = 512; i >= 320; i--){
  document.getElementById("header").style.height=i+'px';
 }
}
-->
</script>

Der Code steht im <head>.

Ich habe ein <div> das ich durch den Code verkleinern möchte wenn ich mit dem Mauszeiger aus dem <div> fahre. Bis jetzt klappt es nur so: Es ist sofort auf der Endgröße. Ich möchte aber das es schrittweiße geschieht. Wie müsste der Code aussehen? Ein document.WindowDealy() (so oder ähnlich hieß die Funktion) hilft mir da ja nicht sonderlich weiter. :-(

Desweiteren: Ich habe gesehen das Dojo Ajax von IBM und Google gesponsort werden - ist dieses Framework brauchbar oder sollte ich mir eher Prototype (von Yahoo?) anschauen. Welches empfiehlt ihr?

Bis dann! ;-)

FF · 12.03.2007 21:36

für mich fehlt da ein irgendwie gearteter wait befehl oder so.
ich hab von js keine ahnung, aber da das fenster ja stetig verkleinert werden soll, muss da auf jedenfall sowas wie n wait rein, sonst wird das script bis zur endstufe druchlaufen und dann einmal ausgegeben.

**mitaki** · 12.03.2007 22:30

Dein Code enthält Fehler. Das language-Attribut ist missbilligt. Pflicht ist im script-Element nur das type-Attribut mit dem Wert „text/javascript“.
Und ja, das kann Auswirkungen haben!

Ansonnsten gebe ich dir einfach mal den Verweis zu setInterval().

**Lucleonhart** · 13.03.2007 07:45

Direktlösung:

HTML-Code:

<script type="text/javascript">
var resizeinterval;

function startresize()
{
resizeinterval = window.setInterval("resizedown();",10);
}

function resizedown()
{
    var tmp = document.getElementById("header").style.height;
    tmp = parseInt(tmp.substr(0,tmp.length-2)) - 1;
    document.getElementById("header").style.height = tmp + "px";
    if(tmp > 500)
      clearInterval(resizeinterval);
}

</script>

**Maisaffe** · 13.03.2007 18:03

Zitat von Freierfall

[...]

Hey, Du hast doch etwa nicht meinen Text unter dem Code nicht gelesen oder?

Zitat von mitaki

[...]

Auf Vaildativität (sofern das Wort so valide ist

) habe ich nicht geachtet, ich wollte nur erstmal zu einen Ergebnis kommen.

Danke für den Link! ;-)

Zitat von Lucleonhart

[...]

Danke für den Code. :-)
Was mich allerdings wundert: man benötigt doch eigentlich bei der CSS Angabe height auch den Anhang px... Ob das Skript dann läuft? Egal, das werde ich erstmal ausprobieren müssen. ;-)

**mitaki** · 13.03.2007 18:08

Zitat

Was mich allerdings wundert: man benötigt doch eigentlich bei der CSS Angabe height auch den Anhang px... Ob das Skript dann läuft? Egal, das werde ich erstmal ausprobieren müssen. ;-)

Ja, Einheiten wie px sind notwendig. Nur bei 0 sind sie überflüssig, weil es ja keine Rolle spielt ob es sich um 0 Pixel oder 0 Blechdosen handelt.

Das px wirds du wohl noch ergänzen müssen. Einerseits weil die Browser sonst eventuell gar nichts machen, andererseits weil es einfach sauberer Code ist.

**Maisaffe** · 13.03.2007 19:54

Zitat von mitaki

Ja, Einheiten wie px sind notwendig. Nur bei 0 sind sie überflüssig, weil es ja keine Rolle spielt ob es sich um 0 Pixel oder 0 Blechdosen handelt.

Das px wirds du wohl noch ergänzen müssen. Einerseits weil die Browser sonst eventuell gar nichts machen, andererseits weil es einfach sauberer Code ist.

Ja - ist mir bewusst.

Es ging mir um das JS von Luc - aber das hat scheinbar schon die Funktion dafür eingebaut[FONT=monospace]:[/FONT]parseInt(tmp.substr(0,tmp.length-2)) - 1;
zum auslesen. px müsste ich bei der "Ausgabe" aber wieder anhängen wie es ausschaut. Sollte kein Problem sein, allerdings noch ungetestet. Sorry Luc.

Welches Ajax empfiehlst Du?

**mitaki** · 13.03.2007 20:06

Zitat

Es ging mir um das JS von Luc - aber das hat scheinbar schon die Funktion dafür eingebaut

Dann hast du es andersherum gemeint als ich^^ Ja, parseInt entfernt bei Zahlen Zeichenketten, wenn diese am Ende stehen (d.h 123abc wird zu 123).

Zitat

Welches Ajax empfiehlst Du?

AJAX selbst ist ja nur ein Objekt (bzw. je nach IE Version ein ActiveX-Element), welches du innerhalb von JavaScript nutzen kannst. Das müsste an sich leicht selbst machbar sein (was dann auch funktioniert). Man sollte halt wie immer bei JavaScript darauf achten, dass man die Informationen auch mit deaktiviertem JavaScript erreichen kann (wie hier im Forum z.B.).
Mit den Frameworks habe ich mich noch nicht beschäftigt. Aber diese sind eigentlich nichts anderes als die Basis AJAX- bzw. XMLHttpRequest-Funktionen um verschiedene Funktionen erweitert, die man bei Seiten mit AJAX eben so benötigt.

**Lucleonhart** · 14.03.2007 06:22

Zitat von mitaki

Dann hast du es andersherum gemeint als ich^^ Ja, parseInt entfernt bei Zahlen Zeichenketten, wenn diese am Ende stehen (d.h 123abc wird zu 123).

O________O WATT? ^^ Echt? Ohaohaoha.. und ich hangel mich seit jahrhunderten mit meiner

Code:

tmp.substr(0,tmp.length-2)

letzten beiden zeichen abschneiden funktion rum....
Hab das px noch angehängt.

FF · 14.03.2007 13:35

Zitat

Hey, Du hast doch etwa nicht meinen Text unter dem Code nicht gelesen oder?

Doch, aber die funktion sagte mir nichts, da ich wie gesagt, nicht den leisesten schimmer von JS habe.

aber das hier

Code:

resizeinterval = window.setTimeout("resizedown();",10);

aus lucs code ist das was ich vermisst habe, glaub ich.
ne zeitabstufung oder so.

**Maisaffe** · 14.03.2007 16:31

Das Script verkleinert die <div> nur einmal und nicht fortwährend... Das wird doch wohl nicht an XHTML1.0 Strict liegen (welches laut meinen W3C Freund valide ist) oder? :/

**mitaki** · 14.03.2007 17:40

Nein, XHTML hat nur auf erzeugende Funktionen Einfluss [z.B. kein document.write(), weil man Inhalt übers DOM erzeugen soll].

Ich denke, es liegt daran, dass Luc setTimeout() statt setInterval() verwendet hat.

Wenn ich aber davon abgesehen einmal Fragen darf: Wieso möchtest du eine schrittweise Vergrößerung bzw. Verkleinerung? Hier im Forum gibts das ja auch, aber es erweckt für mich eher einen lahmen Eindruck^^

**Maisaffe** · 14.03.2007 19:19

Zitat von mitaki

Nein, XHTML hat nur auf erzeugende Funktionen Einfluss [z.B. kein document.write(), weil man Inhalt übers DOM erzeugen soll].

Ich denke, es liegt daran, dass Luc setTimeout() statt setInterval() verwendet hat.

Wenn ich aber davon abgesehen einmal Fragen darf: Wieso möchtest du eine schrittweise Vergrößerung bzw. Verkleinerung? Hier im Forum gibts das ja auch, aber es erweckt für mich eher einen lahmen Eindruck^^

Stimmt, daran könnte es liegen.

Warum ich das will? Hab das mal bei einer Preview Seite eines Portals gesehen (leider ist das Portal jetzt Geschichte...) und fand das ganze recht interessant. Einen tieferen Nutzen hat das ganze nicht. Auf der Portalseite wurden dadurch Benutzerinformationen ein und ausgeblendet - das war es auch schon.

**Lucleonhart** · 14.03.2007 21:35

Zitat von mitaki

Ich denke, es liegt daran, dass Luc setTimeout() statt setInterval() verwendet hat.

Jau, ein Fehler... behoben.

**mitaki** · 14.03.2007 22:07

Ich glaube aber, du musst noch einen zusätzlichen Befehlsblock einbauen. Wie man im Beispiel sieht, geht setInterval() ja immer weiter und hört nur bei clearInterval() auf.

**Lucleonhart** · 15.03.2007 12:13

O_O Hab ich echt nicht eingebaut.. ?! Meine güte, ich bin echt voll auf Fehlermeldungen angewisen um meine eigene Miste zu sehen..

Oder auf Mitakis.. ^^

Updated! ^^

**Maisaffe** · 15.03.2007 18:08

Ach stimmt, wollte ich auch erwähnen.

Nunja, mal schauen ob der Code rennt. ;-)

Edit: Ja, er rennt. ;-) Dankö!

Allerdings verstehe ich das nicht:
resizeinterval = window.setInterval("resizedown();",1);
das Ding verkleinert sich lahm - Pixel habe ich schon auf 10px gestellt. :/
Schnell genug, aber es geht mir um das Prinzip. ;-)

**Lucleonhart** · 15.03.2007 22:06

Hab auch schon bemerkt das einstellungen zwischen 1 und 30 millisekunden keine veränderung bringen.
Wahrscheinlich (ich weiß es net) kommen die browser nicht schneller hinterher ^^

**mitaki** · 15.03.2007 22:14

Zitat

Wahrscheinlich (ich weiß es net) kommen die browser nicht schneller hinterher ^^

Wahrscheinlich erkennt ihr den Unterschied gar nicht^^

Nebenbei: der zweite Parameter von setInterval() bestimmt ja, wie lange es dauert, bevor die Funktion erneut aufgerufen wird. Entsprechend müsste das ganze ja länger dauern, wenn man 30 statt einer Millisekunde angibt.

**Lucleonhart** · 15.03.2007 23:15

Ok, sagen wir es anders:
Wert = 100 -> Langsam
Wert = 50 -> recht flott
Wert = 1 -> gleiche Geschwindigkeit.

Das sieht man schon.

Thema: Welches Ajax + Javascript Problem: HTML/CSS Element langsam vergrößern/ verkleinern

Themen-Optionen

Anzeige

Welches Ajax + Javascript Problem: HTML/CSS Element langsam vergrößern/ verkleinern

Berechtigungen