Javascript und Position X

[IceGloo]

Hallo liebes Forum!

folgendes Javascript habe ich mal benutzt:

document.ready = function () {
var pos = window.pageYOffset;


if (pos < 2000){
document.getElementById('id').style."css-angabe" = 'wert';
$('id').css({
'-moz-transform':'rotate(15deg)',
'-webkit-transform':'rotate(15deg)',
'-o-transform':'rotate(15deg)',
'-ms-transform':'rotate(15deg)'});
}

nun möchte ich aber, genau dies für die X-position benutzen:
var pos = window.pageXOffset; funktioniert aber nicht.
wodran liegt das?

ich möchte also lediglich sagen:
wenn bei position X (größer,kleiner etc.), dann dieser Style (left und Rotation)

ich würde mich über Hilfe freuen :-)

 

[Cheffchen]

Hallo,

also window.pageXOffset; funktioniert schon. darfst halt nicht wieder pos nehmen da damit das alte überschreibst.

Die Frage die mich stellt ist das überhaupt das richtige da bei allen immer 0 raus kommt und damit nir über 2000 geht, wie auch. Das wir nach dem laden einmal ausgeführt und das ist ja normal oben links im browser also x und y 0.
Oder wolltest die Fenster große ermitteln?
So wie jetzt macht das ganz null sin, zumindest die if abfrage.

Das is mir auch unklar und schmeist ein fehler aus

document.getElementById('id').style."css-angabe" = 'wert';

Cheffchen

 

[IceGloo]

Erstmal vielen Dank für deine Antwort!

Das Pos kann er nicht überschreiben, da ich es nur mal in einem anderen Projekt hatte,
nun ist meine Seite nach rechts scrollbar, Anker zum springen, easing etc.

Mein konkretes Beispiel:
an den X-Positionen: 3000, 6000, 9000 etc. sind Unterseiten "Kapitel".
Nun soll bei der Ankunft, wie auch 1000 Pixel davor und dahinter bestimme Seiten-Elemente sichtbar werden bzw. hereinfahren.
Z.B. Eines dieser Elemente soll sich durch eine Rotation bemerktbar machen, andere Blenden ein/aus, Hintergründe ändern sich etc.

diese CSS- eigenschaften sollen also unter anderem zum tragen kommen:

document.ready = function () {
var pos = pageXOffset;


if (pos < 2000){
document.getElementById('text_start').style.left = '400px';
document.getElementById('text_start').css({
'-moz-transform':'rotate(15deg)',
'-webkit-transform':'rotate(15deg)',
'-o-transform':'rotate(15deg)',
'-ms-transform':'rotate(15deg)'});
}


Da sich diese Seite mit einem Werdegang beschäftigt, ist die horizontale Scroll-Richtung als Stilmittel bewusst gewählt.

Ich hoffe ich konnte es nun mal genau schildern und hoffe auf Hilfe :-)

 

[IceGloo]

Ich bin etwas vorran gekommen:

document.ready = function () {
var pos = pageXOffset;


if (pos < 2000){
document.getElementById('text_start').style.left = '400px';
document.getElementById('text_start').style.transform = 'rotate(15deg)';}
if (pos > 2000){
document.getElementById('text_start').style.left = '0px';
document.getElementById('text_start').style.transform = 'rotate(-10deg)';}


if (pos > 2000){
document.getElementById('text_auslese').style.left = '400px';
document.getElementById('text_auslese').style.transform = 'rotate(15deg)';}
if (pos > 4000){
document.getElementById('text_auslese').style.left = '0px';
document.getElementById('text_auslese').style.transform = 'rotate(-10deg)';}


}



Allerdings berechnet wird nur das erste if (if pos < 2000), danach nicht mehr?!

 

[Cheffchen]

HAllo,

ja das meint ich ja das nur beim Seite Laden pos berechnet wird.

Die ermittlung von pos muss ja fortlaufend passieren, vielleicht beim scroll

$(window).scroll(function() {
anstelle document.ready = function () {

Cheffchen

 

[Tronjer]

Nur so als Überlegung: Warum nimmst du anstatt der hohen Zahlen als Bezugspunkte nicht einfach die Anker?

foo = "#seiteZwei";

$('a[href*=#]').click(function(e) {
    e.preventDefault();
    target = $(this).attr('href');

    if (target == foo) {
        // tu was mit dem CSS
        ...................
    }
});

 

[IceGloo]

Das wars! Vielen lieben Dank!

Für zukünftige Hilfesuchenden:
habe nun, (da sich auch beim seitenaufruf direkt etwas ändern soll) es folgendermaßen gelöst:

document.ready = function () { *Seite wird geladen* *pos-angaben werden nur einmal verarbeitet*
var pos = pageXOffset;


if (pos < 2000){
document.getElementById('text_start').style.left = '400px';
document.getElementById('text_start').style.transform = 'rotate(15deg)';}


}








document.onscroll = function () { *Seite wird benutzt* *position wird bei jedem scroll neu verarbeitet*
var pos = pageXOffset;


if (pos < 2000){
document.getElementById('text_start').style.left = '400px';
document.getElementById('text_start').style.transform = 'rotate(15deg)';}
if (pos > 2000){
document.getElementById('text_start').style.left = '0px';
document.getElementById('text_start').style.transform = 'rotate(-10deg)';}
if (pos > 4000){
document.getElementById('text_start').style.left = '0px';
document.getElementById('text_start').style.transform = 'rotate(-10deg)';}

}