SCROLLBARE CONTAINER MIT BORDMITTELN ERSTELLEN!

WICHTIGER HINWEIS:
Diese Technik ist für iOS Geräte leider nicht zu gebrauchen. Wer einen Scrollcontainer auch auf Geräten wie iPod, iPhone und iPad nutzen möchte, der sollte sich diese… Anleitung zu Gemüte führen.

Das was ich vorher mühsam per CSS und HTML-Baustein in WebAcappella realisiert habe, geht eigentlich recht einfach mit den Bordmitteln in WebAcappella. Die Technik die dahinter steckt ist nichts anderes als eine Unterseite in einem Iframe einzubinden. Löst man dieses händisch über eine Codezeile in einem HTML-Baustein, dann hat man das Problem, dass die Seite auf mobilen Geräten nicht richtig angezeigt wird und die Unterseite im Iframe komplett angezeigt wird und nicht im Fenster scrollbar ist. Mit diversen CSS Einstellungen lässt sich dieses unterdrücken, doch warum umständlich, wenn’s auch einfach geht!

Durch einen Tipp im WebAcappella Forum bin ich auf die einfachere Lösung aufmerksam geworden.

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.11

Schritt 2:

Diese Unterseite bindet man dann ganz einfach in einem Frame in der Hauptseite ein. Hierzu wählt man aus dem Hauptmenü das Frameelement, setzt dieses an die gewünschte Position und passt es an die Höhe der Unterseite und die gewünschte Breite in der Hauptseite an.

Bildschirmfoto 2014-03-02 um 11.07.29

Schritt 3:

Nun muss dem Frameelement nur noch gesagt werden, was eingebunden werden soll. In unserem Fall ist es unsere Unterseite, welch man dem Frame über Link zu einer Seite der Webseite zuordnet.

Bildschirmfoto 2014-03-02 um 11.13.37

Fertig!

Nach dem Veröffentlichen wird die Unterseite im Frame auf der Hauptseite angezeigt und das auf allen Plattformen gleich!

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