nicht angemeldet
Hallo Struppi,
erst mal danke fürs beharrliche Nachfassen und für die Zeit!
Mein Anliegen:
Die Homepage einer entstehenden Website soll einen höheren Header bekommen als die anderen Seiten (damit Flash-Filmchen o.ä. darin ablaufen können). Damit es nicht zu unschönen Sprüngen kommt, soll der Übergang animiert werden. Meinem Wissensstand zufolge ist das nur mit CSS3-Attributen möglich.
Ist der User auf der Homepage und klickt eine andere Seite an: JS-Animation schrumpelt den Header auf Normalformat; klickt der Besucher auf Home: Header wird wieder verbreitert.
Das zuvor gepostete Skript funktioniert mit zwei separaten HTML-Dateien schon ganz gut: Wenn ich zwischen den beiden hin- und hernavigiere, kann ich in Safari und Opera (nicht aber in Firefox) die Animation bewundern.
Hier das CSS zum Skript:
*********
#header, #homeheader{
position: absolute;
-moz-transition-property: height;
-moz-transition-duration: 1s;
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-o-transition-property: height;
-o-transition-duration: 1s;
width: 750px;
background:#eee url("header_bg.png");
}
#header {
height: 154px;
}
#homeheader {
height: 224px;
}
************
Da ich die Website mit WordPress erstellen möchte und WP die Klassen dynamisch erzeugt, suche ich nach einer Lösung, wie ich um die Schreibweise #header vs. #homeheader herumkomme zugunsten von #header vs. .home #header. Im CSS natürlich kein Problem.
Ich habe aber das JS-Skriptchen nicht wirklich geistig durchdrungen und dachte, ich bin fein raus, wenn ich überall, wo jetzt #homeheader steht, sinngemäß .body #header notiere.
In der 2. Zeile des Skripts (bei <==== )hast Du für ("div#homeheader") bereits die Schreibweise ("body.home div#header) angeregt, aber in der 8. Zeile? Statt el.id = "homeheader"; -> el.className = "home" &/plus/+ el.id = "header". Was auch immer ich hier probiert habe, es funzte nicht. Ich müsste el.className und el.id doch irgendwie boole-mäßig verknüpfen, oder?
Oder liegt hier ein grundsätzlicher Verständnisfehler?
Nochmal der letzte Teil:
**********
1 function updateTransition() {
2 var el = document.querySelector("div#homeheader"); <====
3
4 if (el) {
5 el.id = "header";
6 } else {
7 el = document.querySelector("div#header");
8 el.id = "homeheader"; <====
9 }
10
11 return el;
12 }
**********
Tja, ich denke, das müsste alles sein. Bin gespannt.
Gruß,
Danny
Struppi