Webseite bei einer bestimmten Position laden

...komplette Frage anzeigen Mobile Ansicht der Webseite - (html, Webseite, CSS)

3 Antworten

Hallo,

ich baue mal auf die Antwort von Dory1 auf, der hat deine Frage eigentlich schon so gut wie beantwortet ;-)

Du willst diese zwei Codeschnipsel also nur ausführen lassen, wenn man einen kleineren Bildschirm als 480px-width hat? Das ist gar kein Problem, dafür musst du einfach nur eine if - Bedingung um den html anchor packen und schon wird das Scrollen nur dann angewendet, wenn du mit mobilen Geräten die Seite aufrufst. 

1. Wir müssen die Bildschirmbreite auslesen

Das geht ganz einfach mit der JavaScript Funktion "screen.width":

function ermitbreite() {

var breite = screen.width;

document.write(breite);

}

Damit das Script auch noch ausgeführt wird, packst du es in ein onload Attribut:

<body onload="ermitbreite()">

Jetzt gibt uns Javascript die Breite des Bildschirmes in px aus. Jetzt muss du nur noch die ermittelte px Breite mit deinem gewünschten Wert vergleichen, das machst du mit einer if-Bedingung.

2. html Anchor ggf. ausgeben

if (breite < 780) {

document.write("<a name="marke"></a>");

} else {}

Deine Seite musst du aber dennoch immer mit #marke aufrufen, ob nun aber gescrollt wird oder nicht, entscheidet JavaScript ;-)

Ich hoffe, ich konnte dir weiterhelfen!

Grüße,

Hummel

Vielen Dank für deine ausführliche Schritt-für-Schritt-Anleitung. Überlege momentan noch, ob ich da so umsetzen soll, da urls mit einer # drin, dann doch nicht mehr so schön ausschauen. Ist es vielleicht möglich deinen Java-Script soweit zu erweitern, dass nach einer Abfrage der Bildschirmbreite und nur bei einer Breite von 480px ein Redirect zu einer URL mit einer #marke aufzurühren?"

0
@Dory1

Kenne mich mit JAVA-Script so gar nicht aus, ist der nachfolgende Code in etwa richtig?

Kommen folgende Zeilen (falls diese richtig sind) bei Wordpress in die functions.php?

function ermitbreite() {
var breite = screen.width;
document.write(breite);
}

if (breite < 480) { 
window.scrollTo( 0, 150 );
} else {}

und diese hier in die header.php?

<body onload="NaviFenster()">

Oder lassen sich beide zu einem Code-Schnipsel kombinieren und in der header.php bzw. footer.php unterbringen?

0
@Dory1

@Dory Danke für den Hinweis - habe das Script entsprechend angepasst ;-)

0
@apfelheld

@apfelheld (zweiter Kommentar)

Mache für direkte Fragen zu Wordpress bitte eine eigene Frage auf. Wie du das Script anpassen musst, habe ich weiter oben kommentiert.

0
@apfelheld

@apfelheld (Kommentar 1)

Eine solche Umsetzung macht keinen Sinn. Du müsstest dann nochmal einen redirect durchführen, welcher an dieser Stelle absolut sinnlos wäre.

Dank Dory's Beitrag habe ich die Scroll-to Funktion mit eingebaut. Siehe:

function ermitbreite() {

var breite = screen.width;

}

if (breite < 780) {

window.scrollTo(0, 500); // 500 in px - wenn dein Header nur die height Angabe 100 hat, dann eben auf 100 anpassen ;-)

} else {}

<body onload="ermitbreite()">

Grüße,

Hummel

1

Ich denke das sollte sich mit Java Script bewerkstelligen lassen. Du musst im Prinzip die ganze Seite laden und dann an die Marke springen, wo der Anfang sein soll. Die ganze Seite wird natürlich komplett geladen. 

Javascript brauchst du dafür nicht. Du definierst ein Anchor-Tag, an der Position, zu der du scrollen willst:

<a name="marke"></a>

und verlinkst deine Seite dann einfach indem du die Marke in der URL mitgibst:

deineseite.html#marke

Der Browser scrollt dann automatisch bis zu dieser Position.

Der HTML-Ansatz ist schon mal gut. Gibt es vielleicht auch eine ähnliche Lösung auf CSS-Basis? Möchte nämlich nur bei einer Auflösung unter 480px-Breite die Seite so laden, dass der Header nicht im sichtbaren Bereich geladen wird.

0

Was möchtest Du wissen?