eeblog

Voor wie jQuery gebruikt en de volgende valkuil nog niet kent: doe er je voordeel mee!

Controleer de aanwezigheid van een element (of: werk niet met niks)

Ik kwam een prachtig stuk code tegen om middels een mooie animatie een begrippenlijst op het scherm te toveren. Toetscombinaties, transparantie, alles. Omdat ik aan het betreffende project het een en ander moest sleutelen, uitbreiden en aanpassen, kwam een onvermijdelijk moment: een javascript error in de firebug console. En toen bleek dat de code ongeveer zo in elkaar zat (namen van objecten zijn gefingeerd):

var eenObject = jQuery('#een #moeilijke #selector:eq(0)');

eenObject.show();

eenObject.doeErVanAllesMee();

Waar zat nu het probleem?

Als het object niet bestaat, bevat eenObject niets, nada, noppes, en gaat het dus grandioos fout. De oplossing?

jQuery('#een #moeilijke #selector:eq(0)').each(function(){

  this.show();

  this.doeErVanAllesMee();

});

Met deze constructie wordt de code alleen uitgevoerd op elk element uit de collectie. Lege collectie? dan geen code!

Al enige tijd ben ik bekend met sIFR, een techniek waarbij je bepaalde tekstuele elementen op je pagina kunt vervangen door een specifiek lettertype. Omdat je er bijna niet van uit mag gaan dat iedereen het desbetreffende lettertype in huis heeft, maakt sIFR gebruik van een ingenieus trucje: het lettertype wordt in een flash-movie ingebakken en on-the-fly over je pagina heen geplakt. Hier vindt je een voorbeeld.

Nu kwam ik pas op Ajaxian een variant van sIfR tegen, genaamd Facelift. Met Facelift kun je hetzelfde bereiken als met sIFR, maar dan zonder gebruik te maken van flash. Met behulp van een stukje javascript en een PHP script, wordt de tekst vervangen door een plaatje van die tekst in het juiste lettertype. Voorbeelden vindt je hier.

Implementatie? Fluitje van een cent. Het is een kwestie van downloaden, uitpakken, uploaden en een paar regels code aanpassen aan je eigen wensen. De juiste lettertypebestanden in het mapje, “font-family” instellen en voila, een kind kan de was doen.

Wel liep ik tegen een klein dingetje aan: stokken en staarten in de tekst vormen geen probleem, maar daarvoor moet je wel even in de configuratie sleutelen en de waarde “realFontHeight” op “true” zetten.

Al met al een handige tool om je website net dat beetje meer te geven.

Facelift: http://facelift.mawhorter.net/
sIFR: http://www.mikeindustries.com/blog/sifr/