Alle Artikel in: JavaScript

JavaScript toLocaleString Format fix um gleiche Ergebnisse in jedem Browser zu bekommen

Die toLocaleString() JavaScript Funktion soll eigentlich diverse Zahlen, Daten und Variablenformate in die jeweilige Anpassung der Landes für den Client übernehmen. Dies geschieht jedoch im Browser, so dass der Browser die Hoheit darüber übernimmt, wie der formatierte String später aussehe. Negativ Beispiel An einem Beispiel soll deutlich werden wie unterschiedlich toLocaleString() in den jeweiligen Browsern ausgibt. Dazu soll eine float Zahl in eine deutsche Währungsdarstellung umformatiert werden. So sieht dann das Ergebnis in den jeweiligen Browsern aus: Browser Darstellung Firefox: 2.282,00 € Chrome: 2.282 € IE 8+: 2.282,00 € Safari: 2282 € Das ist natürlich sehr unschön, besonders wenn die übrige Website sich an einer festen Konvention der Darstellung von Preisen hält. Lösung für die unterschiedliche toLocaleString Formatierung Die Lösung für die unterschiedliche toLocaleString Formatierung liegt leider in einem externen Funktionsmodul. Ich habe für mich in accounting.js die perfekte Lösung gefunden. * jQuery vorausgesetzt Browser Darstellung Firefox: 2.282,00 EUR Chrome: 2.282,00 EUR IE 8+: 2.282,00 EUR Safari: 2.282,00 EUR

Flyout Navigation Android Touch kompatibel machen

Die meisten Flyout Navigation Menüs im Web, die per reinem CSS und mit Hilfe von Mouseover (:hover) aufgebaut sind, funktionieren nicht auf Touch-Devices (ausgenommen jüngere Apple iOS Devices). Touch Geräte haben ja kein Hover und können damit die Flyouts nicht öffnen. Ein Tap auf das Hauptelement öffnet sofort die dahinter liegende URL, statt das Flyout aufzumachen. Damit sind solche Menüs auf Touchgeräten nicht funktional. Das musste ich gestern leidvoll erkennen. Meine Navigation im Aqua Comfort Shop war bestimmt seit 3 Jahren für Android Gerät quasi nicht nutzbar. Um diesem Fehler zu begegnen, versuchen zahlreiche Anleitungen im Netz das unmögliche möglich zu machen. Ich habe bei meiner Recherche für eine Lösung viele „gefruckelten“ Overlays gesehen, die nach 0.3s eines Hovers verschwinden um den Klick auf Desktops freizugeben… usw. Kurzum, alle Anleitungen, die ich mir angesehen habe arbeiten mit Tricks die nicht HTML oder W3C konform sind. Das wollte ich nicht und habe nach einer sauberen Lösung gesucht, die meinem SEO nicht (noch weiter) schadet (als das Flyout Menü es schon eh tut). Deswegen habe ich mich …

jQuery Animation: Objekte dauerhaft rotieren lassen

CSS Transitions und CSS Animations sind ja schön und gut, haben aber einen entscheidenden Nachteil: Sie funktionieren nur in modernen Browsern! Wer da noch in Analytics eine nicht zu vernachlässigende Anzahl Zugriffe von Browsern hat, die CSS Transitions nicht unterstützen muss eben zusehen wie er Animationen auf eine Art umgesetzt bekommt, die auch in solchen älteren Browsern funktionieren. jQuery Rotation ist da eine Möglichkeit um Rotationen und Drehungen von HTML-Elementen umzusetzen.

CSS asynchron laden ganz ohne Blockierung des Renderings

UPDATE 11.04.2015: Es gibt eine ganz interessante Art CSS asynchron und völlig ohne jegliche Blockierung des Renderung zu laden (wichtig für Google Pagespeed)! Es basiert auf einem PHP CSS Minifier Skript, dass beliebige CSS Dateien ausließt, minifiziert, zu einem CSS kombiniert und dann in den Bereich inline einbindet. Ja genau! Inline! Das bedeutet, dass die gesamten minifizierten CSS Informationen im Quellcode on-the-fly eingetragen werden. Google Pagespeed honoriert dieses Vorgehen auf jeden Fall! So werden die CSS Dateien nicht nur asynchron geladen, nein sie werden gar nicht mehr geladen! Das Skript puffert die Minifizierung bspw. im Memcache und kann damit sehr schnell die CSS Informationen inline in den head schreiben. Diese Vorgangsweise habe ich für die mobile Darstellung bei aqua-comfort.net umgesetzt. Dort werden 6 CSS Dateien damit asynchron geladen und im head inline ausgegeben. Derzeit über eine Cache Datei, die von der HDD gelesen wird. In Zukunft werde ich die Daten dann noch in dem Memcache schreiben und von dort direkt aus dem Speicher auslesen. Derzeit arbeite ich an einer Lösung für WordPress, die alle CSS …