Webseite bei einer bestimmten Position laden

Mobile Ansicht der Webseite - (HTML, Webseite, CSS)

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

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

4

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
4
@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
22
@Dory1

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

0
22
@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
22
@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.

4

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

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zur Frage

Unterschied: Prozeduren & Funktionen?

Hallo, was ist denn der Unterschied zu Prozeduren und Funktionen?

Ist.. Prozedur = Aufruf einer zu weiterbearbeitende Stelle im Code ohne Rückgabewert? ..und.. Funktion = Direktes aufrufen einer bestimmten Funktion?

Oder bin ich völlig falsch?

...zur Frage

Wenn Javascript nicht aktiviert ist soll eine Nachricht kommen?

Wie kann ich anzeigen das Javascript nicht aktiviert ist?

    <script type="text/javascript">
    <!--
        window.onload=alert("Ein Javascript!")
    // -->
    </script>

Dieses Script habe ich bisher. Bei meiner Webseite sieht die URL so aus: index.php?section=name

wo Name steht gehört die Seite die man aufrufen will hin. Ich habe dies in den header geschrieben (index.php). Nun ist das Problem das immer wenn ich eine Seite aufrufe kommt dieses Fenster. Ich möchte aber nur beim ersten Aufrufen der Seite das dies angezeigt wird. Das heißt wenn man die Seite schließt und wieder öffnet soll dieses kommen wenn Javascript nicht aktiviert ist. Wie mache ich dies?

...zur Frage

Schöne HTML/PHP Seiten machen?

Hey, ich bin in html/php ziemlich gut. Das Problem ist, ich schaffe es nicht professionelle Seiten hinzukriegen, die mit einem schlichten schönen „luxuriösen“ Style mithalten können. Irgendwelche CSS Tipps?

...zur Frage

Header Effekt wie bei der Seite?

Hallo, wie bekomme ich einen Header Effekt wie bei dieser Seite hin?

Also das der Schwarze Hintergrund erst ab einer bestimmten Position kommt und das der Header quasi immer nur wieder kommt wenn ich zurück nach oben scrolle, und sonst nicht sichtbar ist???

Die Seite ist gemeint:

http://weareadaptable.com

Brauche dringend Hilfe :(

LG

...zur Frage

Header bei Website fixieren?

Hallo zusammen

Ich möchte bei meiner Website den Header (Suchfunktion, Warenkorb usw) fixieren , so dass dieser beim scrollen immer oben ersichtlich ist.

So wie bei dieser Website: http://www.gartenhaus-shop.ch/

Ich nutze das Shopsystem von Gambio. Kann mir jemand ev mit dem Code weiterhelfen.

Besten Dank!

...zur Frage

Was möchtest Du wissen?