JS Anfänger: Header verkleinern/vergrößern

Vmax.

Hallo Leute,

ich bin JS-Dummy und aufgeschlossen, aber zu sehr Land unter gerade...

Ich erstelle derzeit eine Website, deren Homepage einen vergrößerten Header aufweist als die übrigen Seiten. Realisiert habe ich dies durch eine CSS- .Klasse, die nur auf der Homepage verwendet wird. Der einzige Unterschied dieser Klasse ist 'height'.
Hintergrund: Auf der HP sollen Flash-Animationen ablaufen, auf den anderen Seiten nicht.

Das Ergebnis funktioniert, sieht aber "nicht gekonnt" aus.

1 - Gibt es eine Möglichkeit, den Header mittels JS zu schrumpeln und (bei Home-Aufruf) wieder zu vergrößern?
2 - Kann man dies durch die Abfrage der CSS-Werte erreichen, um evtl. Änderungen ausschließlich im CSS vorzunehmen und die .js-Datei ganz in Ruhe zu lassen?
3 - Und jetzt die ketzerischste aller Fragen (für ein JS-Forum): Ginge das prinzipiell auch ohne JS?

Viele Grüße und danke vorab!

SabineP

Hallo Vmax,

warum machst Du das nicht einfach mit CSS?

Beispiel:

HTML:

CSS:
.headerhome {height:deine Wunschhöhe hier eintragen}

Vmax.

Hallo Sabine,

sorry, Missverständnis.

Das hier habe ich:
Homepage:

; #headerhome {height: 124px;}
Rest:

; #header {height: 54px;}

Und genau das ist unschön - der sprunghafte Übergang zwischen Homepage-Kopfbereich und schmalem Kopfbereich, das sieht m.E. zu sehr nach Fehler aus. Darum meine Idee, per JS einen verschmusten Übergangseffekt zu realisieren (oder per HTML5??).
Home: Rolladen runter <--> != Home: Rolladen hoch...

...und diesen ggf. über eine Werteabfrage im Stylesheet zu realisieren, damit ich gar nicht mehr in die .js-Datei reinschauen muss.

Geht das?

Grüße!

SabineP

Befindet sich im Head nicht diese Flashdatei?
Da müßtest Du ja die Höhe der Flashdatei auch noch dynamisch ändern.

>> Hintergrund: Auf der HP sollen Flash-Animationen ablaufen

Vmax.

Hallo Sabine,

das Flash soll *nur* auf der Homepage ablaufen (und möglicherweise auch nur beim Erstaufruf), der Headerbereich für alle anderen Seiten bleibt statisch - keine Animation.

Anders herum formuliert: Eigens für die Anfangsanimation auf der Homepage (und nur dort) wird der Header der Homepage aufgebohrt.

Die Animation würde beim Aufruf einer anderen Seite gestoppt* und entladen werden.

(*: Um das sinnvoll hinzubekommen, würde man hier vermutlich ebenfalls überblenden: Der sichtbare, gestoppte Frame der Animation wird zunehmend überdeckt vom Standard-Hintergrund o.ä., ist aber vermutlich ein eigener Thread...)

SabineP

Hier ist ein Beispiel mit CSS3 und Javascript
zum vergrößern der Höhe eines DIVs innerhalb von 5 Sekunden.
Funktioniert in Firefox 4, Opera 10 und Safari und vielleicht auch später im IE 9.


  

  

  

CSS Transition Demo  

  











  

  

Headerbox

Ich habe dazu das Beispiel von der Firefox-Webseite etwas angepasst:
https://developer.mozilla.org/en/CSS/CSS_transitions#Using_a_linear_transition_timing_function

Vmax.

Hallo Sabine,

das ist ziemlich genial! Vielen Dank!

Ich habe allerdings jetzt mehrere Verständnisprobleme:
1.) CSS3:
Laut Mozilla-Website sind die Animationen bereits in CSS3 enthalten, sprich, sie werden vom CSS-Interpreter des Browsers ausgeführt, und nicht von dessen JS-Interpreter.
Insofern ist das JS-Skript, das Du mitgeliefert hast, lediglich für die jetzigen Browser wichtig, die mit CSS3 noch nicht umgehen können... ist das richtig so?

2.) Im Quelltext wird auf eine transition.css verwiesen. Die gibt's aber in Wirklichkeit nicht, oder? Man soll sich die Deklarationen aus dem Header lediglich da hineindenken...

3.) Ich habe versucht, das Skript umzumodeln auf IDs. Aber entweder kommt der querySelector nicht mit der Angabe ("div#header") klar, oder den Ausdruck "idName" (statt "className") gibt's nicht – oder beides.
Wie muss es richtig heißen? Oder funktioniert das Ganze mit IDs nicht?

So weit mal, ich geh' jetzt ein bisschen spielen mit JS... ;-)

Grüße!

SabineP

zu 1.
Das Javascript dient lediglich dazu, daß die CSS3-Animation beim Javascript-Ereignis onload gestartet wird.
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload
Die Animation funktioniert nur in Browser, die die CSS3 Eigenschaft transition unterstützen.

zu 2.
diese Zeile kannst Du streichen:

Der Inhalt dieser CSS-Datei befindet sich schon innerhalb von

Das war nur ein Copieren-Einfügen-Fehler von mir.

zu 3.
Dieses Javascript funktioniert nicht mit IDs.
Du kannst aber dem div trotzdem zusätzlich eine ID geben, falls Du dort eine ID brauchst.

Headerbox

Vmax.

Sabine,

*noch* eine letzte Frage:

in dem Skript gibt es ein "className". Worum handelt es sich hierbei? Attribut? Variable?
Wenn ich damit rummache, entsteht nur Murks...

...und falls Du eine gute JS-Referenz kennst (Buch oder online) - gerne hier rein ;-)

Danke und viele Grüße,

Vmax

SabineP

>> "className". Worum handelt es sich hierbei?
http://de.selfhtml.org/javascript/objekte/all.htm#class_name
http://developer.mozilla.org/en/DOM/element.className

>> ..und falls Du eine gute JS-Referenz kennst
http://developer.mozilla.org/en/JavaScript/Reference

Vmax.

Danke für die Infos!

Also, etwas weiter bin ich dank dieser Quellen schon mal:

function headertransition() {   

	var el = updateTransition();   

	 

	el.addEventListener("transitionend",  updateTransition, true);   

}   

 

function updateTransition() { 

	var el = document.querySelector("div#header"); 

	 

	if (el) { 

		el.id = "homeheader"; 

	} else { 

		el = document.querySelector("div#homeheader"); 

		el.id= "header"; 

	} 

	 

	return el; 

}

Mit dieser Schreibweise geht's auch mit IDs.

Was mir an dieser Lösung nicht gefällt ist das redundante CSS. Ich muss für beide IDs #header und #homeheader fast die gleichen Werte eintragen, dabei gibt es nur einen Unterschied bei height.

Eleganter fände ich eine Lösung, die abfragt, ob #header in der Homepage steht, dafür würde ich eigens eine Klasse oder eine ID vergeben: .home bzw. #home.
Für ".home #header {}" bräuchte ich dann nur den anderen height-Wert eintragen, alles andere würde sich der Browser aus der Definition für #header holen.

Tja, nur...
wie notiert man die Kombination aus zwei Werten/Attributen/IDs/Klassen in Javascript?
Habe Verschiedenes auf Verdacht ausprobiert, leider ohne Erfolg.

Ich hoffe, ich nerve nicht zu sehr...

Viele Grüße in die virtuelle Runde!

oesi50

ja, dann machs doch einfach ohne Redundanzen:


   

   

   

CSS Transition Demo   

   

 

 





   

   

Headerbox

Vmax.

Jaaaa.... schon...

Ich könnte auch
#header, #headerhome {...;}
für die gemeinsamen Werte und height separat für jede ID notieren, da ich aber mit einer WordPress-Installation arbeite, bin ich auf die Möglichkeit gestoßen, dynamisch Klassen zu vergeben.
Und da bot sich die .home-Klasse für die Homepage in Verbindung mit der #header-ID an.

So ähnlich wie

el.className.id =""; --> nö
el.className = "home" el.id = "header"; --> nö
el.className = "" + el.id = ""; --> nö

... und darf man "querySelector ("div.home#header")" schreiben?

oesi50

Probieren geht über Studieren. [;)]

Vmax.

Es ist ja nicht so, dass ich es nicht ausprobiert hätte.
Das Skript funktioniert aber nicht.

Und jetzt weiß ich nicht, ob es an der "querySelector"-Schreibweise liegt oder an der Art, dieses "el"-(Element?)-Teil der Klassen-ID-Kombination zuzuordnen - oder beides.

Vmax.

Hm, ich hoffe, das Thema hat sich nicht totgelaufen.
Ist nämlich immer noch nicht gelöst...

Vmax.

Falls es noch jemanden interessiert:

Ich bin immerhin so weit, dass ich weiß, dass der querySelector so wie oben geschrieben abgefragt werden muss.

Mir ist jetzt nur noch nicht klar, wie die Zeile unterhalb von
el = document.querySelector("header");
beschaffen sein muss.

Hier müsste [#cc0000]el.id = "header" & oder && oder und oder + oder and (oder was eigentlich?) verknüpft werden mit el.className = "home". [/#cc0000]Boole'sche Operation.

Oder verstehe ich was miss?

Wird klar, was ich will?
...

easywebscript

EeasyWebScript vereinigt die Möglichkeiten von Server Scripts «PHP, Pyton, Perl» sowie Ajax, Javascript, HTML und CSS in einer einzigartigen Programmiersprache.
Einen Einblick in die neue Skriptsprache erhalten Sie bereits während unserer Entwicklungsphase

http://www.youtube.com/user/easywebscript