Hintergrundbild dem Scrollstatus entsprechend positionieren

[Yadgar]

High!

Ich bastele mal wieder an einer fixed-positionierten Navigationsleiste (kommt jetzt bitte nicht mit dem Argument, Javascript für Navigationselemente sei vom Teufel... ich wüßte nicht, wie ich das Folgende allein mit CSS bewerkstelligt bekäme!), in der sich das Hintergrundbild des Textbereiches der Seite, nicht aber der Text selbst fortsetzt.

Dazu müsste ich ja für den mit div definierten Navigationsbereich dasselbe Hintergrundbild wie für den Textbereich wählen und dann entsprechend Fenstergröße, Bildschirmauflösung und Scrollstatus (YPageOffset) dieses Hintergrundbild positionieren (background-position).

Aber kann man in Javascript überhaupt Variablen an style-Elemente übergeben? Das hier:

[code=css]
  var offset=window.innerHeight-48;
  getElementsByTagName("div")[0].style.background-position:offset;
[/code]

funktioniert jedenfalls nicht...

Bis bald im Khyberspace!

Yadgar

[rfb]

Moin

eher

var offset=window.innerHeight-48;
  getElementsByTagName("div")[0].style.backgroundPosition=offset+"px";

  
- durch Großbuchstaben ersetzen (- hat in JavaScript andere Bedeutung), Zuweisung per =, Einheit nicht vergessen!  
  
Gruß  
rfb

-- 
Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.  
(Galileo Galilei)

[Yadgar]

High!

• durch Großbuchstaben ersetzen (- hat in JavaScript andere Bedeutung), Zuweisung per =, Einheit nicht vergessen!

• durch Großbuchstaben ersetzen? Wie soll ich denn das verstehen?

Bis bald im Khyberspace!

Yadgar

[rfb]

Moin

lies den von mir geänderten Code bitte etwas genauer - ich hatte bereits diese Änderungen vorgenommen

Gruß
rfb

[Yadgar]

Moin

lies den von mir geänderten Code bitte etwas genauer - ich hatte bereits diese Änderungen vorgenommen

Ja, jetzt sehe ich es... aber dann gibt es da ja noch das Problem, dass backgroundColor zwei Parameter braucht - wie sieht da die korrekte Syntax aus? Der x-Parameter bleibt ja unverändert...

Bis bald im Khyberspace!

Yadgar

[Yadgar]

Ja, jetzt sehe ich es... aber dann gibt es da ja noch das Problem, dass backgroundColor

Unsinn, backgroundImage natürlich... sorry!

Bis bald im Khyberspace!

Yadgar

[rfb]

Moin

backgroundColor ???

ich dachte du meinst Position
und dann musst du dir eben einen String zusammenbasteln:
... backgroundPosition="50px "+offset+"px";

Gruß
rfb

[Yadgar]

High!

und dann musst du dir eben einen String zusammenbasteln:
... backgroundPosition="50px "+offset+"px";

Das habe ich gemacht:

  
getElementsByTagName("div")[0].style.backgroundPosition="0px "+offset+"px";  

...aber es klappt immer noch nicht! Die Hintergrundgrafik wird nicht verschoben, egal, welchen Wert ich da reinschreibe!

Zur Erklärung: es handelt sich um eine als fixed-Element definierte, 48 Pixel hohe Navigationsleiste am unteren Rand des Fensters. Folglich muss die linke obere Ecke des Hintergrundbildes für diese Navigationsleiste, wenn es sauber an das (identische) Hintergrundbild des Textbereiches anschließen soll, die Position 0px -(window.innerHeight+48) haben...

Bis bald im Khyberspace!

Yadgar

[wahsaga]

hi,

...aber es klappt immer noch nicht!

Oh man ... hast du nicht noch letztens hier verlauten lassen, dass du dich irgendwo zum Webentwickler oder sowas weiterbilden lassen (oder war's sogar als solcher Bewerben?) wolltest?

Dann gewöhne dir jetzt doch bitte endlich mal diese "funzt nicht"-Sch**sse ab.

getElementsByTagName("div")[0].style.backgroundPosition="0px "+offset+"px";

>   
> Die Hintergrundgrafik wird nicht verschoben, egal, welchen Wert ich da reinschreibe!  
  
Hast du vielleicht erst mal \_kontrolliert\_, \_welchen\_ Wert du da wirklich reinschreibst, sprich eine Kontrollausgabe des Wertes gemacht?  
  
gruß,  
wahsaga  
  

-- 
/voodoo.css:  
#GeorgeWBush { position:absolute; bottom:-6ft; }

[Yadgar]

High!

Hast du vielleicht erst mal _kontrolliert_, _welchen_ Wert du da wirklich reinschreibst, sprich eine Kontrollausgabe des Wertes gemacht?

Das habe ich gemacht, hier ist der überarbeitete Code:

  
var offset=window.innerHeight-48;  
  offset="0px "+offset+"px";  
  alert(offset);  
  getElementsByTagName("div")[0].style.backgroundPosition="0px "+-offset+"px";  

Bei maximiertem Browserfenster in Mozilla in 1280 x 1024 steht folgendes in offset: 0px 777px - in diesem Fall stimmt die Grafik zufällig, weil das Original-Hintergrundbild nur 1024 x 768 groß ist und entsprechend gekachelt wird. Dass die Grafik in dem Navigationsleisten-Feld aber in Wirklichkeit nicht verschoben wird, sehe ich, wenn ich das Fenster verkleinere...

Bis bald im Khyberspace!

Yadgar

[Der Martin]

Hallo,

var offset=window.innerHeight-48;
  offset="0px "+offset+"px";
  alert(offset);

Bei maximiertem Browserfenster in Mozilla in 1280 x 1024 steht folgendes in offset: 0px 777px

damit ist offset also ein String mit dem Inhalt "0px 777px". Und demzufolge ergibt folgende Anweisung

getElementsByTagName("div")[0].style.backgroundPosition="0px "+-offset+"px";

einfach nur Kauderwelsch. Selbst wenn ich das Minuszeichen mal für einen Tippfehler halte (denn für Strings ist es als Operator nicht definiert) und es mir wegdenke, ergäbe sich für style.backgroundPosition der Wert "0px 0px 777pxpx", was völliger Quatsch ist. Es reicht, wenn du den String _einmal_ zusammenbaust!

So long,
 Martin

[Yadgar]

High!

einfach nur Kauderwelsch. Selbst wenn ich das Minuszeichen mal für einen Tippfehler halte (denn für Strings ist es als Operator nicht definiert) und es mir wegdenke, ergäbe sich für style.backgroundPosition der Wert "0px 0px 777pxpx", was völliger Quatsch ist. Es reicht, wenn du den String _einmal_ zusammenbaust!

Den Fehler habe ich zwischenzeitlich auch bemerkt und korrigiert - aber am Anzeigeergebnis ändert sich nichts!

Bis bald im Khyberspace!

Yadgar

Now playing: Fishing Junks At Sunset, live Shanghai 1982 (Jean-Michel Jarre)

[Der Martin]

Hallo,

Den Fehler habe ich zwischenzeitlich auch bemerkt und korrigiert - aber am Anzeigeergebnis ändert sich nichts!

sorry, dann bin ich momentan auch ratlos. :-(

Now playing: Fishing Junks At Sunset, live Shanghai 1982 (Jean-Michel Jarre)

Hey, genial! Originaltitel: Jonques des pêcheurs au crépuscule. Hab ich auch irgendwo in der Sammlung. :-)
Ich war schon in den 80er Jahren ein Fan von Jarre und seiner eigenwilligen Musik, bin erstmals auf Equinoxe aufmerksam geworden, habe dann gemerkt, dass das ältere Werk Oxygene (von dem allgemein nur ein kurzer Ausschnitt bekannt ist) ja auch von ihm ist. Les champs magnétiques hat mich dann nicht gar so sehr überzeugt, auch spätere Veröffentlichungen wie etwa Les concerts en Chine kenne ich nur teilweise. Aber hey, die Musik hat was!

So long,
 Martin

[Yadgar]

High!

Hey, genial! Originaltitel: Jonques des pêcheurs au crépuscule. Hab ich auch irgendwo in der Sammlung. :-)
Ich war schon in den 80er Jahren ein Fan von Jarre und seiner eigenwilligen Musik, bin erstmals auf Equinoxe aufmerksam geworden, habe dann gemerkt, dass das ältere Werk Oxygene (von dem allgemein nur ein kurzer Ausschnitt bekannt ist) ja auch von ihm ist. Les champs magnétiques hat mich dann nicht gar so sehr überzeugt, auch spätere Veröffentlichungen wie etwa Les concerts en Chine kenne ich nur teilweise. Aber hey, die Musik hat was!

Bei mir fing es 1978 an, im zarten Alter von neun Jahren - mit "Equinoxe V" auf einem Pop-Sampler! Aber als ich dann 1984 dank Winfrid Trenklers "Schwingungen" Vangelis für mich entdeckte, war Jean-Michel Jarre nur noch zweite Wahl... und dann kam auch noch Larry "Synergy" Fast ( http://synergy-emusic.com/ ) - seither halte ich JMJ als Komponist eher für einen Dünnbrettbohrer, zumal ich mit dem technoiden Dance-Zeugs seit "Chronologique" eh nichts anfangen kann!

Mehr über meinen Musikgeschmack gibt es demächst auf meinem Website!

Bis bald im Khyberspace!

Yadgar

[Detlef G.]

Hallo Yadgar

... in der sich das Hintergrundbild des Textbereiches der Seite,

Also muss das Element, dass den Textbereich enthält, bis hinter die Navigation rechen, und diese keinen Hintergrund enthalten, damit das Hintergrundbild des Textbereichs auch dort zu sehen ist.

... nicht aber der Text selbst fortsetzt.

Also musst du den Text mittels padding auf Abstand halten.

Dazu müsste ich ja für den mit div definierten Navigationsbereich dasselbe Hintergrundbild wie für den Textbereich wählen ...

Ich denke nicht, dass das nötig ist.

Auf Wiederlesen
Detlef