SCROLLCONTAINER AUCH FÜR MOBILE ENDGERÄTE!

Was wir benötigen ist die eigentliche Hauptseite in der die Unterseite scrollbar integriert werden soll, sowie die Unterseite, welche im Frame eingebunden wird. In meinem Beispiel möchte ich eine Unterseite in der Hauptseite so einbinden, dass diese seitlich scrollbar ist. Viele werden dieses aus dem iTunes Store kennen, wo viele Dinge auf kleinstem Raum angeboten werden. Wer dann noch den Hintergrund der Hauptseite nutzen möchte, der kann diese… Funktion zusätzlich einsetzen.

Schritt 1:

Man erstellt die Unterseite mit den gewünschten Massen. In meinem Beispiel eine Seite mit einer Breite von 3000 px und eine Höhe von 250 px. Diese wird dann anschliessend mit Inhalt befüllt.

Bildschirmfoto 2014-03-02 um 11.02.11Um die Unterseite später in einem Frame einbinde zu können, müssen wir dem Kind einen Namen geben.

Bildschirmfoto 2014-03-22 um 15.17.46Im Feld – Name der Seite im Browser – erstellt man den Seitennamen, der in unserem Beispiel scroll.html ergibt

Schritt 2:

Nun muss in der Seite ein HTML-Baustein eingefügt und an die Gegebenheiten angepasst werden. Da unsere Unterseite eine Höhe von 250 px hat, nimmt man für den HTML-Baustein die selbe Höhe. Die Breite passt man dann an die Seiteneigenschaften an, damit ein harmonisches Bild entsteht. In unserem Beispiel soll das Fenster eine Breite von 964px haben.

Bildschirmfoto 2014-03-22 um 15.25.29

Um die Unterseite im Baustein einzubinden kopiert man den unten stehende Code und fügt diesen im HTML-Bereich des Bausteins ein.

Bildschirmfoto 2014-03-22 um 15.27.11

CODE:

<div id="scrollcontainer" style="position:absolute; width:964px; height:250px; display:block; overflow: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch;">
<iframe frameborder="0" width="964px" height="250px" src="scroll.html" scrolling="auto"></iframe>
</div>

Schritt 3:

Den kopierten Code muss man nun noch an die eigenen Gegebenheiten anpassen. Hier sind die Parameter width und height, sowie der Seitenname scr=““ massgebend. Wie bereits bei den Einstellungen des HTML-Bausteins, geben wir die Höhe und die Breite einmal in den Syle-Angaben beim Scrollcontainer und bei den Vorgaben des Iframes an. Nach dem Veröffentlichen sollte die Unterseite im Frame angezeigt werden und scrollbar sein.

Tipp:

Wenn man nun aus dem Frame, also aus der Unterseite verlinken möchte, dann kann man dieses nur über den Javascriptbutton in den Linkoptionen von WebAcappella. Hierbei ist zu berücksichtigen, dass diese Funktion nur mit Button und Bilddateien funktioniert. Da wir aus einem einem Iframe heraus verlinken, muss dem Browser letztendlich gesagt werden wo die Seite geladen werden soll – im Hauptfenster oder in einem neuen Fenster. Würde man einfach zu einer anderen Seite verlinken, dann würde diese im Iframe geladen.

Die Codezeilen für die verschiedenen Optionen müssen in der JS-Button Funktion hinterlegt werden. Hierfür wählt man das zu verlinkende Element und geht zu den Linkoptionen.

Bildschirmfoto 2014-03-02 um 12.27.01

Hier klickt man nun auf den JS-Button und fügt die unten aufgeführten Codezeilen im geöffneten Fenster ein.

Bildschirmfoto 2014-03-02 um 12.28.49Link im Hauptfenster laden:

parent.location.href='seite.html' – Seite aus dem Projekt

parent.location.href='http://www.seite.de/seite.html' – Externe Seite aus dem Web

Link in neuem Fenster laden:

blank.location.href='seite.html' – Seite aus dem Projekt

blank.location.href='http://www.seite.de/seite.html' – Externe Seite aus dem Web

Be the first to comment.

Leave a Reply