verkleinern

Druckbare Version

12.03.2007, 20:13
Maisaffe

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

Code:

<script language="javascript">  </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! ;-)
12.03.2007, 20:36
FF

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.
12.03.2007, 21:30
mitaki

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().
13.03.2007, 06:45
Lucleonhart

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>
13.03.2007, 17:03
Maisaffe

Zitat:

Zitat von Freierfall

[...]

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

Zitat:

Zitat von mitaki

[...]

Auf Vaildativität (sofern das Wort so valide ist :D) habe ich nicht geachtet, ich wollte nur erstmal zu einen Ergebnis kommen. :)
Danke für den Link! ;-)

Zitat:

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. ;-)
13.03.2007, 17:08
mitaki

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.
13.03.2007, 18:54
Maisaffe

Zitat:

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. :D

Welches Ajax empfiehlst Du?
13.03.2007, 19:06
mitaki

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.
14.03.2007, 05:22
Lucleonhart

Zitat:

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.
14.03.2007, 12:35
FF

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.
14.03.2007, 15:31
Maisaffe

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? :/
14.03.2007, 16:40
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^^
14.03.2007, 18:19
Maisaffe

Zitat:

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. ;)
14.03.2007, 20:35
Lucleonhart

Zitat:

Zitat von mitaki

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

Jau, ein Fehler... behoben.
14.03.2007, 21:07
mitaki

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.
15.03.2007, 11:13
Lucleonhart

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

Updated! ^^
15.03.2007, 17:08
Maisaffe

Ach stimmt, wollte ich auch erwähnen. :D
Nunja, mal schauen ob der Code rennt. ;-)

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

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. ;-)
15.03.2007, 21:06
Lucleonhart

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 ^^
15.03.2007, 21:14
mitaki

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.
15.03.2007, 22:15
Lucleonhart

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

Das sieht man schon.
16.03.2007, 20:12
mitaki

Ich sehe den Utnerschied bei den drei Veraianten schon (auch mit einem bzw. 10 Pixeln).
Das ganze ist vermutlich auch Hardwareabhängig. Ich würde mir darüber allerdings nicht all zu viele Gedanken machen.

Alle Zeitangaben in WEZ +1. Es ist jetzt 14:04 Uhr.