Software Guide

Die besten Tipps, Anleitungen und Downloads

Ihre Werbung auf Software Guide

Sie möchten in dieser Box oder an anderer Stelle dieser Webseiten eine Werbung schalten? Sehen Sie sich dazu am besten einfach mal die verschiedenen Möglichkeiten an.


Blog-Beiträge getaggt mit «ajax»

Registerkarten (Tabs) für Webseiten per Ajax und JavaScript

5. Juni 2006 von Michael | Webmaster/CMS/Blog

Robert hat auf Ajax Tabs Content script aufmerksam gemacht: Ein Script das es einfach ermöglicht, ein Menü bzw. einen Bereich mit Tabs (Registerkarten) einzurichten, dessen Inhalt asynchron, also erst bei Aufruf, im Hintergrund geladen wird:
Tab

Funktioniert ganz gut. Einsatzgebiet wäre z.B. ein Weblog-Archiv, wo man dem Besucher mehrere Kategorien bzw. Filter anbieten kann. Allerdings sehe ich einen gravierenden Nachteil: Bei dem Script wurde scheinbar nicht an ein Fallback gedacht, also an eine Alternativanzeige, wenn Besucher JavaScript deaktiviert haben.

Angeregt von der Idee und mit dem Hintergedanken, dass Ajax hier eigentlich oftmals gar nicht nötig ist, habe ich mich auf die Suche nach einer reinen JavaScript-Umsetzung gemacht. Mit JavaScript Tabifier habe ich eine elegante Lösung gefunden. Es bietet ebenfalls ein Menü mit Tabs, wobei der komplette Seiteninhalt bei Aufruf geladen und danach per JavaScript über CSS verborgen wird. Dies hat den Vorteil sehr sehr performanten Bedienung, sobald die Seite geladen ist.

Der Einbau in eine Webseite ist Schritt für Schritt beschrieben, JavaScript-Kenntnisse sind nicht erforderlich, man kommt mit keiner Zeile JS in Berührung. Lediglich muss man die JS-Datei in die Seite einbinden.

Das Script unterstützt auch bestehende Überschriften der Seite. Wenn also via <h2> oder <h3> Überschriften definiert wurden, verwendet JS Tabifier diese als Tabs, ansonsten kann man auch separat Tab-Überschriften vergeben.

Die Umsetzung könnt Ihr Euch auf meiner Archiv-Seite ansehen:
Tab 2 - Software Guide Archiv

Dank der guten Beschreibung war das Tab-Menü innerhalb weniger Minuten eingebaut. Hat der Besucher JavaScript deaktiviert, dann werden die Tab-Inhalte untereinander dargestellt, damit also eine barrierefreie Lösung.


Bilder mit Lightbox JS auf Webseiten darstellen

31. Mai 2006 von Michael | Webmaster/CMS/Blog

LightboxWenn ich größere Bilder wie etwa Screenshots auf Software Guide einbinde und der Besucher auf den Link klickt, wird (bei aktiviertem JavaScript) ein Fortschrittsanzeige gezeigt bis das Bild geladen ist und dann das Bild in einem eigenen ‚Fenster‘ angezeigt. Immer wieder erhalte ich Anfragen per Mail / Kontaktformular, wie das funktioniert.

  • Test-Link (aktiviertes JavaScript erforderlich)

Ich verwende dazu Lightbox JS 1.0, dort kann das ganze auch getestet werden.

Die Integration in eigene Webseiten ist sehr einfach: einfach im head-Bereich das JavaScript einbinden, Details hierzu siehe auf der Lightbox-Webseite. Im Link selbst verwendet man dann rel="lightbox", damit das JavaScript den Code beim Anklicken anwendet.

Ich empfehle allerdings nicht die neue Version Lightbox JS 2.0 zu verwenden. Diese kommt zwar noch schicker als die erste Version rüber, aber benötigt mit 150 KB fast das 10-fache an Speicherplatz, davon alleine 100 KB JavaScript-Code welcher von den Besuchern immer geladen wird, selbst wenn sie nie ein solches Bild öffnen. Mit einer ISDN-Verbindung dauert es also um die 20 Sekunden (!), bis der JavaScript – Schnick-Schnack geladen ist; damit ist das m.E. absolut inakzeptabel für Besucher. Der JavaScript-Code von Lightbox 1 ist dagegen nur 12 KB groß.


Ajax: Notiz

25. Februar 2006 von Michael | Webmaster/CMS/Blog

Interessant ist ja, dass JavaScript die letzten Jahre z.T. sehr vermieden bis vertäufelt wurde („Sicherheitsrisiko“, „Blödsinn“, „nimm CSS“, „du sperrst Besucher damit aus“, etc.), aber nachdem Ajax neu entdeckt wurde, ist JavaScript wieder voll im Trend. Trotzdem sollte man JS nur mit Bedacht einsetzen, da Besucher JavaScript nicht immer aktiviert haben. Zumindest sollte immer eine Fallback-Lösung eingesetzt werden.

3 interessante Artikel, die ich die letzten Tage gesehen habe:

Blog-Kategorien

Volltextsuche

Neueste Artikel

Neueste Kommentare

Neueste Trackbacks/Pingbacks

Andere Projekte

Blogparade

dient als zentrale Anlaufstelle für Blog-Paraden bzw. Blog-Karnevals und andere von BloggerInnen veranstaltete Aktionen.

Mediadaten

Feed-Statistik:
Feedburner

Software Guide gibt es seit Dezember 2005 und es werden durchschnittlich 2 Blog- Beiträge/Monat veröffentlicht. Die Themenschwerpunkte sind in der Tagcloud ersichtlich. Mehr Infos...

Links

 

Nach oben

Wordpress

© 2005-2024 Software Guide | ISSN 1864-9599