Kategorie: JavaScript
-
Javascript ersetzen aller css background-images durch Retina-Bilder
Wenn man vor dem Problem steht, dass dynamisch generierte CSS background-images verwendet werden, um Bilder auf einer Webseite darzustellen und diese dann auch für Retina Displays gut aussehen sollen, kann man folgendes Skript verwenden. Es überprüft zusätzlich mittels eines Ajax Requests, ob die Bilder vorhanden sind/existieren. Voraussetzung ist, dass eine Namenskonvention für nicht-Retina Bilder und…
-
Javascript überprüfen auf Retina-Display Funktion
Um zu überprüfen, ob ein Gerät mit Retina-Display (neues iPhone oder Mac Book) gerade auf der Seite surft, kann man die handliche Funktion verwenden: function isRetinaDisplay() { var dpr = 1; if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio; return dpr >= 2; }
-
HTML5 Datenbank mit persistence.js Tutorial
Mit persistence.js lässt sich eine lokale Datenbank mit Javascript erstellen ohne einen Datenbank-Server und eine Internet Verbindung. Unterstütze mobile OS von persistence.js: Android Browser (getestet auf 1.6 und 2.x) iPhone Browser (iPhone OS 3+) Moderne Webkit Browser (Google Chrome und Safari) Firefox (über Google Gears oder In-Memory Database und LocalStorage Fallback) Opera Palm WebOS (getestet…
-
jQuery asynchroner Ajax Call mit Callback Success Funktion
Bei der Programmierung von asynchronen Funktionen mit Ajax steht man vor dem Problem, dass die Funktion keinen Rückgabewert im herkömmlichen Sinne haben. Die folgende Funktion gibt nicht etwa die Variable response zurück, obwohl der Ajax Request erfolgreich ausgeführt wurde aufgrund der Asynchronität. function test() { $.ajax({ async: true, cache:false, url: „testUrl.php“, beforeSend: function (jqXHR, settings)…
-
Google Analytics und jQuery Mobile
Bei der Benutzung von Google Analytics mit jQuery Mobile gibt es ein paar Besonderheiten zu beachten. So wird nicht jede Seite neu geladen bei jQuery Mobile, sondern der Inhalt (per Ajax) in die bestehende Seite eingefügt und die URL angepasst, so dass der Eindruck einer App entsteht. Für die Verwendung von Google Analytics mit jQuery…
-
Javascript Date Vergleich auf Tagesbasis
Zum Vergleich von 2 Date Objekten in Jacascript kann man die folgende Funktion benutzen, die bestimmt, ob ein Datum größer ist auf Tagesbasis. Dies ist sehr nützlich, wenn man ein Datum aus einem Datepicker auswählt: function isDateInFutureOnDailyBasis(date1, date2) { if(date1.getFullYear() > date2.getFullYear()) { return true; } else if(date1.getFullYear() == date2.getFullYear())…
-
Mobile Multi Share Implementation mit jQuery Mobile
Mit dem passendem HTML lässt sich so sehr komfortabel ein Share-Alternative aufbauen für mobile Anwendungen um Platz zu sparen (mit jQuery Mobile). Dabei werden die Share Dienste in ein <select> Tag eigetragen und per Javascript einzeln gehandelt. Das Ergebnis sieht auf Android-Phones so aus:
-
Facebook Like ohne Facebook Button mit Javascript
Wenn man in einer mobilen Anwendung einen eigenen Button anstelle des Facebook Buttons erstellen will oder z.B. eine Select Box zum Sharen, kann man mittels Javscript das Facebook Like Event triggern mittels: Facebook Like mit Javascript triggern function shareFacebookLike(url) { window.location=“http://www.facebook.com/sharer/sharer.php?u=“ + encodeURIComponent(url); } Twitter Tweet mit Javascript triggern function shareTwitter(url, text) { window.location =…
-
Three.js Tween Übersicht Animationen Möglichkeiten
Hier gibt es eine sehr gut Abbildung der möglichen Animation (Tweens) in Three.js: http://www.grasshopper3d.com/profiles/blogs/port-of-robert-penner-s-easing-equations?xg_source=activity (siehe sehr gute Abbildung in den Kommentaren) Zum Einbinden ist das sehr hilfreich: Tutorial Tween three.js Ein kleines Beispiel für einen Tween: new TWEEN.Tween( cube.rotation ) .to( { y: (cube.rotation.y + Math.PI/2)}, 1500 ) .easing( TWEEN.Easing.Back.EaseInOut).start();
-
Praktische String Funktionen in Javascript für InDesign und Web
Entfernt führende und beendende Leerzeichen function trim (str) { return str.replace (/^\s+/, “).replace (/\s+$/, “); } Check, ob ein String leer ist, findet auch z.B. “ “ function isBlank(str) { return str.replace(/\s/g,““) == „“ ; } Checkt, ob ein String enthalten z.B. ob script in javascript enthalten ist – true. function stringContains(str, needle…