Hassle-free Eventbinding with jQuery .on()

Reattaching eventhandlers after ajax requests produces ugly and very odd code. It’s better you use jQuery .live()-event-attaching which attaches automatically the handler to all new elements with the same selector. In the current version of jQuery 1.7 the live()-method is replaced by on() that combines all possible event-attaching features of jQuery.

Continue reading

Browser-History mit jQuery auslesen

Eine wirklich simple Idee … mittels der Farbunterscheidung zwischen “visited”- bzw. “nicht visited”-Links kann man die Browser-History eines Benutzers stehlen. Man braucht allerdings eine Linkliste die man vergleichen kann, also ist es kein richtiges stehlen. Im Detail funktioniert es so das man mittels Javascript Links erzeugt und vergleicht in welcher Farbe sie dargestellt werden. So kann man zB feststellen ob der Benutzer vorher schon bei den Konkurrenten vorbeigeschaut hat.

Mein Beispiel-Script kann man unter folgender Adresse finden:
http://bohuco.net/dev/history/

(via dicabrio)

iPhone Lagesensor via Javascript

Über den Lagesensor kann man ermitteln ob das iPhone gerade hochkant oder horizontal gehalten wird. Safari am iPhone besitzt dazu ein spezielles window-attribut. In window.orientation steht entweder 0 (fĂŒr vertikal) oder +/-90 wenn das iPhone quer gehalten wird, je nachdem welche Richtung es gedreht wurde.

Um auf eine Änderung reagieren zu können gibt es den Event-Handler onorientationchange den man zum Beispiel im BODY-Tag verwenden kann:

 
    <body onorientationchange="alert(window.orientation);"></body>

» Beispiel-Seite

Firebug console.log – graceful degradation and cool features

My favorite feature in firebug is console.log but it has one problem, you have to remove all calls from source code before going live else your visitors will get many many javascript errors. But there is a really simple solution for that problem, getfirebug.com hosts a javascript which creates a fallback console object if firebug is not installed.


<!-- graceful degradation of firebugs console obj -->
<script type="text/javascript" src="http://www.getfirebug.com/firebug/firebugx.js"></script>

So, now we are on the save side and can play around with the console object. The usually most used method is “log”, it simply prints something to the console. Strings, Arrays, Objects, Dom, XML … everything works, log can also print more than one variable at once.


console.log('A String', ['an','array'], document.getElementById('domObject'));

Console can write messages with a specific type, so you can print errors and warnings to your console.


console.error('an error');
console.warn('a warning');

Outline object members in console with the ‘dir’ method.


console.dir({nice:'to', see:'that', cool:function(){ alert('cool'); }});

If you wanna see all cool features, now and live, there is an example page on bohuco.net/code:
http://bohuco.net/code/firebug-logging/

More infos:
http://getfirebug.com/console.html
Google Code – Fun with Firebug

Playing around with gameQuery [08/2013 Update]

Update 08/2013: I updated this very old post because it still gets traffic. The links to the legacy game works now again. For a current gameQuery example read the new post: Still playing around with gameQuery.

gameQuery, a new jQuery plugin, provides functions for creating browser games. In this early stage gameQuery supports a main-loop, game area (playground), sprites with CSS animations and sounds (not tried yet).

I have played around with gameQuery and here is the result. A simple Pong clone that should work in IE6/7, Chrome and Firefox.

The current gameQuery version is 0.2.5 and so there are some points for improvement. Every sprite needs an animation and every animation needs an image even if you don’t need it. Playground is always position:absolute and it has a black border. Only little things that you can override.

found @ Ajaxian

Javascript private members

Die definitive Link-Sammlung:

http://www.crockford.com/javascript/private.html
http://mckoss.com/jscript/object.htm

Wichtig: Private Variablen können nicht aus den public Methoden gelesen werden sondern nur aus den private-Methoden … also MUSS es fĂŒr die privaten Variablen Setter- und Getter-Methoden geben. Und, die privaten Methoden werden NICHT mit “this” aufgerufen:


var test = function() {

    // private variable
    var status = 1;

    // private method
    var getStatus = function() {
        return status;
    }

    return {
        publicMethod: function() {
            var status = getStatus(); // NOT this.getStatus();
        }
    }
}

Schrift-Problem adee

facelift (FLIR) ist ein Javascript/PHP-Lösung die on-the-fly Bilder mit SchriftzĂŒgen in den gewĂŒnschten Schriften erzeugt. FLIR benötigt im Gegensatz zu sIFR, kein Flash. Die Bilder werden serverseitig mittels PHP (GD-Library) erzeugt und dann automatisch in die Seite eingefĂŒgt.

Tutorial

IE6 PNG Fix

Beim CSSGirl wird ein neuer PNG Fix vorgestellt, ich werd ihn nicht gleich ausprobieren aber er scheint wohl besser zu sein als das was es bisher gegeben hat. Es wird SuperSlight mit dem neuen Unit PNG Fix verglichen und jeder hat seine Vor- und Nachteile aber der Unit PNG Fix hat dann doch die Nase vorn.

SongZwa 2

Ich hab heut ein neues ZwischenRelease von SongZwa hochgeladen. Leider gibts immer noch keine Userverwaltung und damit auch keine Playlisten die ĂŒber eine Session hinaus bestehen bleiben, aber einige andere Sachen hab ich verbessert.

Die grĂ¶ĂŸten Änderungen hat es im Player gegeben. Alle Elemente sehen jetzt grafisch gleich aus, die Elapsed-Time-Bar hab ich mit dem Song-Titel kombiniert und alles wurde etwas hin-/hergeschoben und schaut jetzt hoffentlich besser aus.

Die Kommunikation zwischen YouTube-Player und meinem Javascript-Interface sollte jetzt besser funktionieren. Wenn man also im YouTube-Player lauter dreht sollte sich das auch oben in der LautstÀrkeanzeige Àndern und umgekehrt.

Die drei Interface-Blöcke Search, Playlist und Video lassen sich jetzt ausblenden. Das braucht genau keiner außer rbrthmr weil er sich immer Sachen anhört die ganz grausliche Videos haben … also viel Spaß jetzt beim ausblenden.

Videos die von YouTube als NotEmbedable markiert sind werden jetzt ausgegraut angezeigt. Man kann dennoch draufklicken und man wird gefragt ob man das Video direkt bei YouTube ansehen will.

Und jetzt! Fehlt noch der Link:
http://bohuco.net/songzwa

Some Links for CSS and Javascript

Wieder mal ein Feature das sicher keiner brauch. Aber wenn dich eine nette Grafikerin fragt, kannst auch nicht einfach “so a schaaas” sagen.

Selection Background Color via CSS Àndern

Und gleich noch einer … den werd ich demnext sorgar noch wo verwenden mĂŒssen, man kann ja nicht erwarten das die User die Browserfunktionen nĂŒtzen können ???

TextgrĂ¶ĂŸe mittels Javascript Ă€ndern

Gleich mal merken fĂŒr die Zukunft …

Mehrere Hintergrundbilder mittels CSS3