Pfiffige Lösungen bei Platznot

Javascript und Code-Snippets

Werden Ihre Webseiten auch immer voller? Wir zeigen Ihnen Techniken, mit denen Sie die Inhalte kompakt und übersichtlich unterbringen.

  1. Javascript und Code-Snippets
  2. Teil 2: Javascript und Code-Snippets
Webdesign: Javascript und Code-Snippets

© Archiv

Yahoos UI Tab View: Bieten Sie Inhalte kompakt über eine eingebettete Registernavigation an.

Werden Ihre Webseiten auch immer voller? Wir zeigen Ihnen Techniken, mit denen Sie die Inhalte kompakt und übersichtlich unterbringen.

Ihre Webseiten platzen aus allen Nähten und der Überblick geht langsam verloren. Dennoch sind manche Themen so wichtig, dass sie auf Seite 1 müssen. Die Besucher scannen vor allem den oberen Bereich einer Seite nach interessanten Wörtern und Bildobjekten. Alles Wichtige sollte also bereits beim Aufruf im Blick sein, ohne dass die Seite zu überladen erscheint.

Seitenbereich mit Tab-Steuerung

Auf vielen Websites finden Sie kleinere, abgegrenzte Bereiche mit einer eigenen Registernavigation. Mit dieser Technik lässt sich der zur Verfügung stehende Platz effizienter nutzen. Wählen Sie jedoch die Bezeichnung der Reiter so, dass die Nutzer auf einen Blick erkennen, was Sie beim Mausklick erwartet. In Yahoos UI Library finden Sie das Modul TabView, mit dem sich die gewünschte Navigation sehr einfach umsetzen lässt. Entpacken Sie die gesamte Skript-Bibliothek und übernehmen Sie die Dateien build tabview/assets/skins/sam/tabview.css, build/yahoo-dom-event/yahoo-dom-event.js, build/element/element-beta-min.js und build tabview/tabview-min.js in ein neues Verzeichnis mit dem Namen tabview. Verknüpfen Sie sie mit den folgenden Befehlen im - Bereich der Webseite:

Webdesign: Javascript und Code-Snippets

© Archiv

Yahoo UI Resize: Mit dem Resize-Tool lassen sich Seitenbereiche definieren, die von den Nutzern aufgezogen werden können.

Bei der Tab-View-Funktion haben Sie die Wahl, die Struktur des Registers entweder selbst mit HTML-Befehlen in die Seite zu schreiben, oder dies dynamisch durch Javascript erledigen zu lassen. Wir zeigen Ihnen die Lösung für die erste Variante. Erstellen Sie das Gerüst nach dem Muster:

<link rel="stylesheet" type="text/
css" href="tabview/tabview.css"><script type="text/javascript" src=
"tabview/yahoo-dom-event.js"></script><script type="text/javascript" src=
"tabview/element-beta-min.js"></script><script type="text/javascript" src=
"tabview/tabview-min.js"></script>

Der Codebaustein besteht aus einer Liste mit Links, die auf die nachfolgenden Abschnitte tab1 bis tab2 verweisen. Das gewünschte Layout verpassen Sie dem Register mit einer Erweiterung des - Befehls:

<div id="demo" class="yui-navset"><ul class="yui-nav"><li class="selected"><a href=
"#tab1"><em>Tab 1</em></a></li><li><a href="#tab2"><em>Tab 2</em></a></li><li><a href="#tab3"><em>Tab 3</em></a></li></ul><div class="yui-content"><div id="tab1">Inhalt von Tab 1</div><div id="tab2">Inhalt von Tab 2</div></div></div>

Sie schalten das Modul scharf, indem Sie am Ende der Seite einfügen:

<body class="yui-skin-sam">

Das Register lässt sich flexibel an die Gestaltung Ihrer Website anpassen. Ändern Sie dazu die Styles in der Datei tabview.css. So ist auch die Breite fest einstellbar. Ergänzen Sie dafür beispielsweise das Format .yui-navset {width:300px;} am Ende der Datei.

<script type="text/javascript">
  var tabView = new YAHOO.widget.
TabView(,demo');</script>

Aufziehbare Seitenbereiche

Ein weiteres Feature von Yahoo UI: Ermöglichen Sie den Besuchern, einen Seitenbereich per Maus größer zu ziehen. Dieser Bereich kann sowohl Text, als auch HTML-Objekte enthalten. Voraussetzung ist, dass Ihre Seite als HTML Strict deklariert ist.

Kopieren Sie die Dateien build/yahoo-dom-event/yahoo-dom-event.js, build/dragdrop/dragdrop-min.js, build/element/element-beta-min.js, build/resize/resize-beta-min.js und build/assets/skins/sam/resize.css aus dem ZIP-Archiv in den Ordner Ihrer Webseite. Verknüpfen Sie die Seite im -Bereich mit den Skripts und CSS:

Die Größe der Ziehfläche legen Sie im Kopfbereich der Seite fest:

<script type="text/javascript" src=
"yahoo-dom-event.js"></script><script type="text/javascript" src=
"dragdrop-min.js"></script><script type="text/javascript" src=
"element-beta-min.js"></script><script type="text/javascript" src=
"resize-beta-min.js"></script><link rel="stylesheet" type=
"text/css" href="resize.css">

Noch wird das Feld von einem dünnen schwarzen Rahmen umgeben. Die Möglichkeit des Ziehens wird für die User erst deutlich, wenn am rechten und unteren Rand Balken mit kleinen Anfassern eingeblendet sind. Kopieren Sie dazu die Datei build/resize/assets/skins/sam/layout_sprite.png ins Verzeichnis und erweitern Sie das -Tag:

<style type="text/css">
#resize {border: 1px solid black;
height: 200px; width: 300px; background-color: #FFF;}
#resize div.data {overflow: hidden;
height: 100%; width: 100%;}</style>

Fügen Sie den Bereich selbst als verschachtelte Abschnitte in den -Bereich ein. Verwenden Sie die folgenden Zeilen:

<body class="yui-skin-sam">

Der innere Abschnitt dient als Container für die Inhalte. Mit dem folgenden Skriptblock hinter den beiden Abschnitten erstellen Sie die benötigte Instanz des Resize-Objekts:

<div id="resize"><div class="data">
... </div></div>
<script>
var resize = new YAHOO.util.Resize
(,resize');</script>

Abschnitte ausblenden lassen

Geben Sie den Besuchern die Möglichkeit, selbst Seiteninhalte per Mausklick aus- und wieder einzublenden. So behalten die User auch bei vollen Seiten den Überblick. Das folgende Skript im -Bereich schaltet zwischen sichtbar und unsichtbar um:

Webdesign: Javascript und Code-Snippets

© Archiv

Formular: Lassen Sie zuerst klein formatiert

Definieren Sie die betreffenden Abschnitte nach dem folgenden Muster:

<script type="text/javascript">
function toggle(abschnitt) {
if (document.getElementById
(abschnitt).style.display == 'block') {
document.getElementById(abschnitt).
style.display = 'none';
} else {
document.getElementById(abschnitt).
style.display = 'block';
}
}</script>

Vergeben Sie über den Parameter id jeweils einen eindeutigen Namen. Fügen Sie oberhalb eines Abschnitts folgenden Link ein:

<div id="ab1" style="display:block;
">Inhalt des Abschnitts</div>

Sie rufen durch Anklicken des Links die Funktion toggle() auf und übergeben dieser den Namen des gewünschten Abschnitts. Die Funktion Fx.Slide der Moo-Tools-Bibliothek) bietet die gleiche Funktionalität, jedoch gleitet der Abschnitt sanft in den jeweiligen Anzeigezustand. Binden Sie die Dateien demo.css, mootools.js und demo.js in die Seite ein:

Webdesign: Javascript und Code-Snippets

© Archiv

Fx.Slide: Geben Sie den Besuchern die Möglichkeit, einzelne Abschnitte per Mausklick aus- und wieder einzublenden.
<a href="#" onclick="toggle(,ab1')">[+/-]</a>

Die Links für die Surfer definieren Sie oberhalb des Abschnitts mit

<link rel="stylesheet" href=
"demo.css" type="text/css" /><script type="text/javascript" src=
"mootools.js"></script><script type="text/javascript" src=
"demo.js"></script>

und den Abschnitt selbst mit

<div class="marginbottom"><a id="v_slideout" href="#">aus</a>
| <a id="v_slidein" href="#">ein</a></div>
<div id="vertical_slide">Inhalt</div>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".