Archive for the ‘JavaScript’ Category
Ein einfacher Cross-Browser Tooltip mit Javascript und CSS
Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.
Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.
Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.
XBT - Der Cross-Browser Tooltip
Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.
Hier könnt ihr den Code sehen:
Hier weiterlesen...
Ist display=”none” jetzt irrelevant?
Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.
Wofür steht irrelevant?
Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.
Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.
Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Hier weiterlesen...
Die Sprache eines Links kennzeichnen
Ein bislang fast nie benutztes Attribut des <a> Tags ist das Attribut hreflang, welches beschreibt in welcher Sprache die Seite geschrieben ist, zu der ein Link führt. Dieses Attribut darf nur gesetzt werden, wenn auch das href Attribut angegeben wurde.
Doch scheint das hreflang Attribut keinen wirklichen Nutzen zu haben, da es ja in keiner Weise auf der angezeigten HTML Seite dargestellt wird. In den nächsten Abschnitten möchte ich zwei Wege zeigen, wie man das Attribut doch sichtbar machen kann.
Die CSS Methode
Moderne Browser wie Firefox erlauben es per CSS auf Elemente der Seite mit bestimmten Attributen zuzugreifen und diesen dann einen Style zuzuweisen. Dies geschieht, indem man den Attribut Namen in eckigen Klammern hinter den Tag Namen schreibt:
a[hreflang] { ...Styles... }
Das Problem mit scrip.aculo.us Effect.scroll()
Oliver Schwarz beschreibt in seinem Blog wie man "Unaufdringliches Scrollen in großen Webseiten" mit Hilfe von JavaScript umsetzen kann. Gemeint ist damit das Springen von einer Stelle einer bestimmten Seite zu einer anderen Stelle auf der selben Seite. Nur eben, dass der Browser nicht wirklich zur neuen Position springt, sondern weich dort hinscrollt.
Dies gelingt ihm unter Einsatz des JavaScript Frameworks prototype und der Effekt Bibliothek script.aculo.us. Letztere bietet eine Funktion Effect.scroll() an, um zu jeder beliebigen Position innerhalb einer Seite scrollen zu können.
Auch wenn es sich bei Olivers Lösung, welche auf der mediastyles Seite zu bewundern ist, um einen ansehnlichen Effekt handelt, sind in den Kommentaren zu seinem Blog-Eintrag einige wichtige Bemerkungen gemacht worden.
In einem Kommentar beschreibt Christine Kühnel das Problem des nicht mehr funktionierenden Back-Buttons.
"Der Scroll-Effekt ist ganz schön, hat aber einen Nachteil: Der Back-Button funktioniert nicht mehr wie gewohnt. Ich denke, viele Leute benutzen den ganz gern, um wieder nach oben zu springen."
"Es gibt zwar andere Möglichkeiten, wieder auf Anfang zu springen (Tasten z.B.), aber ich denke, ein wenig bedenklich ist es immer, wenn Browser-Standard-Verhalten beeinflusst wird..."
Damit spricht sie natürlich ein großes Problem bei vielen Webseiten/Webanwendungen an, welches sich auch besonders in AJAX Anwendungen wiederfinden lässt. In einem späteren Kommentar bietet sie aber auch gleich eine mögliche Lösung an. Durch ein Aufrufen des angesprungenen Ankers nach dem erfolgten Scrollen wird die URL im Browser geändert, was eine Verwendung des Back-Buttons wieder möglich macht. Allerdings sind dazu noch ein paar Tricks notwendig, welche dazu führen, das die Seite nach dem Scrollen kurz flackert, was den Effekt natürlich etwas unschön erscheinen lässt. Das Resultat ist auf dieser Testseite zu betrachten.
Hier muss meines Erachtens nach noch eine bessere Lösung gefunden werden. Auch wenn der Effekt schön anzusehen ist, sollte man es sich momentan besser zweimal überlegen, ob solch ein Scrolleffekt eine Seite wirklich besser benutzbar macht.
FireBug 0.4 – Der ultimative Web Debugger
Webseiten von heute bestehen meistens nicht nur aus HTML und CSS, sondern häufig auch viel JavaScript. Es sind häufig gar keine Webseiten mehr, sondern schon richtige Webanwendungen. Und wir alle wissen, dass Anwendungen häufig auch Fehler enthalten können. Auch Webanwendungen sind davon nicht ausgeschlossen.
Bisher war es meistens schwierig solche Fehler im JavaScript Code oder im HTML zu finden. Es fehlen die richtigen Tools, wie man sie z.B. bei der Programmierung mit Java ode C++ gewohnt ist, um diese Fehler aufzuspüren und zu beheben. Da HTML, CSS und JavaScript im Browser ausgeführt und angezeigt werden, braucht man auch Tools, um sie genau da - während sie ausgeführt werden - zu debuggen. Der Browser Firefox bietet hierfür einige gute Tools an. Ein guter Debugger ist z.B. Venkman. Und mit dem DOM Inspector kann man sich bequem den DOM Tree der Seiten anschauen.
Doch in Zeiten von web 2.0 und Ajax braucht man noch bessere und spezialisiertere Tools. Und eins dieser "Übertools" ist FireBug, welches jetzt in der Version 0.4 erschienen ist.
Hier ein kurzer Überblick über die neuenFeatures:
JavaScript Debugger
FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.
Stack Traces bei JavaScript Fehlern
Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.
JavaScript Fehler debuggen
Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.
Logging Funktionalitäten
Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.
Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.
Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.