Zur Navigation

Umleitung auf mobile Seite nach Zeit

1 krieger98

<script type="text/javascript">
if (screen.width<600)
window.location = "http://mobile-seiten.fahrrad-workshop-sprockhoevel.de/Scheibenbremse-einstellen-video.htm";
</script>

Ich möchte auf die Mobile-Seite weiterleiten nach 5 Sekunden und es soll der Hinweis kommen "Sie werden auf die Mobile-Webseite weiter geleitet". Wie müsste dann der JavaScript aussehen?

19.10.2014 18:18

2 Jörg

Einen verzögerten Funktionsaufruf kann man in JavaScript mit setTimeout bewerkstelligen:

http://wiki.selfhtml.org/wiki/JavaScript/Objekte/window/setTimeout

Die Weiterleitung kannst du in eine Funktion packen, die du mit setTimeout() aufrufst:

<script type="text/javascript">
function goto_mobile() {
  window.location = "http://mobile-seiten.fahrrad-workshop-sprockhoevel.de/Scheibenbremse-einstellen-video.htm";
}

if (screen.width < 600) {
  document.getElementById('notice').innerHTML = 'Sie werden auf die Mobile-Webseite weiter geleitet';
  setTimeout("goto_mobile()", 6000);
}
</script>

... und die Stelle, wo der Hinweis erscheinen soll, muss die obengenannte ID aufweisen:

<div id="notice"></div>

19.10.2014 19:23

3 krieger98

Ich habe den Code zum Versuch auf diese Seite eingefügt:
http://www.fahrrad-workshop-sprockhoevel.de/Shimano-Schaltung-Einstellen-Video.htm
Die Umleitung findet statt aber der "Hinweis und die Verzögerung" findet nicht statt.
Wo liegt der Fehler?
<script type="text/javascript">
function goto_mobile() {
window.location = "http://mobile-seiten.fahrrad-workshop-sprockhoevel.de/";}
if (screen.width < 600) {
document.getElementById('notice').innerHTML = 'Sie werden auf die Mobile-Webseite weiter geleitet';
setTimeout("goto_mobile()", 6000);
}
</script>
------------------------------------------------------------------
Den <di> habe ich in Zeile 155 eingefügt:
<div id="notice" style="position: absolute; width: 362px; height: 20px; z-index: 1; left: 201px; top: 4px"> <p>&nbsp;</p> </div>

20.10.2014 18:34

4 Jörg

Ja, das Script kennt div#notice noch nicht, weil es erst weiter unten im Quelltext erscheint. Verschieb das Script mal unterhalb von div#notice:

        <div id="notice" style="position: absolute; width: 362px; height: 20px; z-index: 1; left: 201px; top: 4px">
        <p>&nbsp;</p> </div>
        <script type="text/javascript">
        function goto_mobile() {
          window.location = "http://mobile-seiten.fahrrad-workshop-sprockhoevel.de/";}
        if (screen.width < 600) {
          document.getElementById('notice').innerHTML = 'Sie werden auf die Mobile-Webseite weiter geleitet';
          setTimeout("goto_mobile()", 6000);
        }
        </script>

20.10.2014 20:36

5 krieger98

Der Hinweis für die Umleitung wird jetzt dargestellt nur kann man diesen kaum erkennen.Ich habe versucht eine größere Schriftgröße im <div> zu platzieren. Leider klappt das nicht. Ferner möchte bei der Ausgabe des Hinweises einen anderen Hintergrund hinterlegen der nur sichtbar ist wenn die Umleitung stattfindet. Wie müsste das aussehen?

22.10.2014 16:21

6 Jörg

Zunächst würde ich das CSS von div#notice in den Style-Abschnitt oben auslagern, das macht das ganze übersichtlicher.

Für den Hintergrundfarbe ist background-color zuständig, mit padding sorgst du für einen schönen inneren Abstand des Layers

Für die Schriftgröße ist font-size zuständig

Eine gute Übersicht über CSS-Eigenschaften:

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften

Mit display:none blendest du diesen Layer standardmäßig aus:

div#notice {
    display: none;
    position: absolute;
    width: 362px;
    height: 20px;
    z-index: 1;
    left: 201px;
    top: 4px;
    background-color: #fff;
    padding: 20px;
    font-size: 20px;
}

Das JavaScript blendet den Layer dann wieder ein, wenn screen < 600:

        if (screen.width < 600) {
          document.getElementById('notice').style.display = 'block';
          document.getElementById('notice').innerHTML = 'Sie werden auf die Mobile-Webseite weiter geleitet';
          setTimeout("goto_mobile()", 6000);
        }

22.10.2014 20:25 | geändert: 22.10.2014 20:27

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)





[BBCode-Hilfe]