everflux

In älteren Versionen von jQuery konnte man einen Selektor für den hash Wert von Links schreiben. (Der Hash Wert ist der Teil hinter „#“ in einem Link element, man kann damit verschiedene Bereiche in einer Seite anspringen.)

Das sah mit jQuery 1.2.6 z.B. so aus:

$("a[hash='#sprungMarke']");

Bei neueren jQuery Versionen ist das nicht mehr so explizit möglich. Dafuer gibt es jedoch Selektoren mit denen man auf Inhalte und partielle Inhalte von Attributen matchen kann. Hiermit ist es dann wieder möglich auf den Hash Wert zu matchen, denn es handelt sich dabei gerade um das Ende des „href“ Attributes eines Links.

Mittels „$“ kann man das Suffix-Matching für den Wert eines Attributes machen.

Damit sieht das dann so aus:

$("a[href$='#sprungMarke']");


Die neuen, flexibleren, Selektoren von jQuery können also Arbeit sparen, wenn man sich ihrer Mächtigkeit bewusst ist.

Seit Netbeans 7.1 ist JSLint als Plugin verfügbar. Mit JSLint wird JavaScript auf (mögliche) Fehler untersucht und diese als Warnungen im Editor angezeigt. (Aufruf mit Rechtsklick innerhalb einer JavaScript Datei und dann „JSLint“ klicken)

Jedoch gibt es dabei auch falsche Warnmeldungen wenn JsLint nicht richtig konfiguriert ist. So warnt mich Netbeans 7.1 dann bei einer JavaScript Datei, als externe Ressource zusammen mit jQuery in eine Webseite eingebunden ist:

„$ was used before it was defined“

Dies lässt sich beheben, indem man die JSLint Konfiguration (Tools->Options->Misc->JSLint) aufruft und dort unter „predefined“ das „$“ deklariert. Leider wurde diese Einstellung bei mir  nicht korrekt gespeichert und hatte auch keine Auswirkungen auf das Verhalten von JSLint. Ich nehme an, dass der Fehler mit einem Update des Plugins behoben wird.

Ich hatte bereits vor einiger Zeit über meine Probleme auf den Webseiten von SpringSource berichtet. Offenbar handelt es sich bei dem Problem um ein Muster: Auch bei FedEx war es mir nicht möglich, die Seiten korrekt zu nutzen, weil ich das eingesetzte Tracking-Script (Omniture) geblockt habe. Weiterlesen »

Das habe ich bisher noch nie gesehen. Die gesamte Webseite an Google geopfert! Aber von vorne: SpringSource, der Hersteller des Spring Framework, bietet auf seiner Webseite Downloads und andere interaktive Elemente an.
Auf der Webseite kommt Google Analytics zum Einsatz, und natürlich auch JavaScript. Das frappierende: Ist JavaScript deaktiviert, oder Google Analytics geblockt, funktioniert die Webseite nicht mehr richtig. In der Tat hat damit SpringSource, die Firma die stets „loose coupling“ und „keine Abhängigkeiten“ als Verkaufsargumente nutzte eine Abhängigkeit zu Google eingeführt.

Weiterlesen »

Es kam die Frage auf, wie man bei einer Web Anwendung, bei der die Ausgabe vorgegeben ist, die Präsentation anpassen kann. Ohne eben die Web Anwendung ändern zu müssen.
Wenn man auf die Ausgabe gewissen Einfluss hat (z.B. über Templates), so kann man mit JavaScript und jQuery sehr einfach Anpassungen vornehmen – sogar aufgrund des HTML Inhalts. (In diesem Fall ging es um die optische Anpassung von Tabellen Zeilen, wenn es sich um premium Kunden handelt.) Weiterlesen »

Canoo Webtest bietet seit einiger Zeit auch (begrenzte) Unterstützung für JavaScript. Das ist gerade zum Testen von Web 2.0 Anwendungen interessant, kann jedoch auch zu sehr merkwürdigen Fehlern führen.

In meinem Fall quittierte Webtest die Arbeit mit der hilfreichen Meldung
com.gargoylesoftware.htmlunit.ScriptException: Wrapped java.lang.NullPointerException
Weiterlesen »

Der Google Admanager ( http://www.google.com/admanager/ ) ist ein kostenloses Google Produkt, um Werbebuchungen zu verwalten.

Der Google Admanger arbeitet dabei mit JavaScript um Werbemittel in die Webseite zu integrieren – z.B. auch Google Adsene. Viele Surfer benutzen inzwischen einen Werbeblocker, wie z.B. den Firefox Adblock plus – hier kommt es nun zu JavaScript Fehlermeldungen, die man vielleicht als Webmaster vermeiden möchte. Weiterlesen »

Der IE 6 ist sicherlich schon betagt, was aber noch lange nicht bedeutet, dass er nicht noch reichlich Verwendung finden würde. Besonders wenn für eine Kundensoftware Internet Explorer 6 zwingend unterstützt werden muss, kann man sich auf viele Überraschungen gefaßt machen.

Eine davon ist der Umgang mit CSS (background) Bildern und dem Cache des Internet Explorer. Normalerweise sollte ein Webbrowser Elemente (wie z.B. Grafiken) nur einmal laden, und dann im internen Cache bereithalten, um ggf. wiederverwendet zu werden. Da häufig Elemente auf Webseiten – besonders Hintergrundgrafiken und Style Elemente – wiederkehrend sind, kann man damit Bandbreite und natürlich auch Zeit sparen. Weiterlesen »

Nichts hilft weniger als synthetische Benchmarks, wenn es darum geht, Produkte zu vergleichen. Das fängt bei Akkulaufzeit von Handys an, und hört noch lange nicht beim Spritverbrauch von Autos auf.

In der letzten Zeit sind Browser-Benchmarks total angesagt, vor allem JavaScript Benchmarks die mehr oder minder zeigen sollen, wer den längeren schnelleren Browser hat. Doch wie aussagekräftig ist das nun wirklich? Bei der Entwicklung einer browser basierten Anwendung, die stark auf Ajax (JQuery, DWR) zurückgreift, während auf dem Server eine JEE Anwendung mit Drools werkelt.

Hier hatte ich nun die Chance, ein paar „echte“ Daten zu sammeln – und mir Gedanken zu machen. Weiterlesen »

Gerade wenn es um sogenannten user generated content geht, ist es immer schön, wenn man eine Vorschaufunktion anbieten kann. Ein Knopf „Vorschau“ ist ziemlich 1990 – es lebe das Web 2.0 mit Ajax, jQuery und vielen Hacks.

Ich hatte bereits darüber gebloggt wie man mittels jQuery und etwas Tricksen einen „Ajax Fileupload“ realisert. Noch schöner ist es natürlich, wenn der User sofort Feedback bekommt, wie sein ausgewähltes Bild wohl aussehen würde. Dazu lädt man das Bild schon direkt nachdem der User eine Datei ausgewählt hat, und zeigt diese an. An Browser-Caches muss man vielleicht noch denken, aber auch hier kann JavaScript bzw. jQuery helfen.

Das Vorgehen:

1. Man hängt einen Listener an die Change Methode des Input Felds
2. Wie in meinem letzten Beitrag beschrieben wird der Upload über ein Iframe realisiert
3. Nun biegt man noch die Bild URL um und zeigt somit das Resultat an

Hier der Quellcode: (das Formular heißt „logoUploadForm“, das input Feld für das Image File „logo“.
Ajax Fileupload handling – und Bild URL umbiegen nach dem Upload.

//handle file upload with hidden iframe
jQuery("#logoUploadForm").submit( function(data)
{
var submittingForm = jQuery( this );
var frameName = ("upload"+(new Date()).getTime());
var uploadFrame = jQuery("<iframe name=\""+frameName+"\" />");
uploadFrame.css("display", "none");
uploadFrame.load(function(data){
//submit is complete here
setTimeout(function(){
//update image
var imageDiv = jQuery("#print_logoImage");
var logoUrl = imageDiv.attr("src").split("?")[0];
imageDiv.attr("src", logoUrl+"?"+ (new Date()).getTime());
//remove hidden upload frame
uploadFrame.remove();},1000);
});
jQuery("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});

Hier noch der Code zum „sofort upload“:

jQuery("input[name=logo]").change(function (){
jQuery("#logoUploadForm").submit();
});

Das wars – ausprobieren!