Ben jij ook nog zo iemand die te maken heeft met Internet Explorer 6? En in zijn webwerk rekening probeert te houden met de rendering onder IE6? Ik wel. Al is het maar omdat er op één van mijn websites nog meer dan 20% van de Internet Explorer bezoekers gebruik maken van versie 6.

Als je bouwt voor IE6 is het reuze handig om analyse en debugtools tot je beschikking te hebben. Want de script-foutmeldingen van Internet Explorer zelf bieden nauwelijks houvast. Dan wordt foutopsporing zoeken naar een speld in een hooiberg.

De volgende tools komen bijzonder goed van pas:

Debugbar — een Firebug-achtige ontwikkelomgeving. Maar dan voor Internet Explorer. Gratis voor personal use.

Companion JS — een enorm handige javascript debugger. Companion JS draait als een schil rond de (op zichzelf niet al te nuttige) Script debugger van Microsoft. Nooit meer zoeken naar de oorzaak van dat stukje javascript waarop Internet Explorer zich stukbijt.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Browsers · javascript
Getagged als debug

Als het tegenzit dan …
… kom je er na drie dagen konkelen achter dat je niet zelf de klikken op een Google Adsense blok kunt bijhouden (zonder te zondigen tegen de Google Adsense ToS). Hey, da’s de primaire reden dat Google besloot om de Adsense advertenties in een externe iframe te laden. Je haalt diep adem en besluit de boel de boel te laten.

… ontdek je op een gegeven moment dat Internet Explorer het .onload event (op zowel document- als elementniveau) echt maar één keer uitvoert. Als de pagina voor de eerste keer geladen wordt. En daarna blind vertrouwt op de browser cache. Waardoor jouw javascript-code keihard in het stof bijt. Dan:

(1) ga je heel hard vloeken. Volgens mijn gelovige vrienden bij de EO een duidelijk teken van onmacht - het helpt niet echt!
(2) vervloek je de ongebreidelde arrogantie van M$ om de W3C specificaties naar eigen goeddunken te interpreteren. Volgens al mijn (on)gelovige vrienden het utieme teken van onmacht: het helpt zeer zeker niet!!!
(3) verkoop je je eigen naïviteit (lees: de gedachte dat de W3C specificaties een solide basis voor je scripts zijn) een ongenadige rotschop
(4) huil je een paar krokodillen-tranen omdat je zo’n ongelofeloze droplul bent die - tegen beter weten in - zijn tijd verdoet met het schrijven van cross-browser code.
(5) haal je diep adem / je schouders op om als de donder een workaround te verzinnen.

Als het meezit dan …
… krijg je een joppie aangeboden om tegen het minimum jeugdloon kliko’s achter de gemeentelijke vuilniswagen te hangen en kom je elke dag om half vijf zonder een geplaagde geest thuis van je werk …

… kom je tot de conclusie dat het schrijven van onobstrusive javascript eigenlijk ontzettend simpel is door mee te liften op de codebase van libraries als Ben Nolan’s behaviour.js.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in En verder · javascript
Getagged als behaviour, library

De achtergrond
Met Company of Kids ben ik voorzichtig aan het nadenken over een vorm van samenwerking. Om te beginnen ben ik door Company of Kids gevraagd om een flash banner op Leuk voor kids te zetten. Om vervolgens maar eens een dooddoener-konijn uit de hoge hoed te trekken: meten is weten.

En ik wil graag weten hoe vaak de banner van Company of Kids aangeklikt wordt.

Het idee
Oké, dat is niet zo spannend zou je zeggen. Hang een javascript event handler aan het flash object en laat deze event handler een serverside script aanroepen dat het klik-veld van de betreffende record in de hey_hoevaak_wordt_er_op_mij_geklikt tabel met één ophoogt. Een kind kan de was doen …

Het probleem
Een kind kan de was doen … maar niet heus. In theorie klinkt het bovenstaande dan wel logisch, maar in de praktijk blijkt het gemakkelijker gezegd dan gedaan. Want hoewel het in Firefox niet zo’n probleem is om bij een klik op de flash banner de klikteller te updaten, werken Internet Explorer versies 6 en 7 niet mee. En aangezien het overgrote deel van de bezoekers langskomt met deze browsers en versies, MOET een en ander werken onder Internet Explorer 6+. Het probleem lijkt hem erin te zitten dat het flashfilmpje zich in de documentstructuur op de bovenste laag bevindt en derhalve het onclick event van het javascript onderschept. De banner voorzien van de wmode = transparent parameter (geopperd op de Adobe website) biedt evenmin uitkomst. Grrr. Op internet is weliswaar voldoende naslagwerk te vinden over het probleem van de layering van swf objecten in een htmlbestand, maar voor mijn specifieke situatie heb ik geen oplossing gevonden.

De oplossing
Ik kan slecht tegen mijn verlies. Dus heb ik net zolang lopen klooien totdat ik een workaround gevonden had. Toegegeven, ik betwijfel of mijn uiteindelijke fix voor het bovenstaande probleem de schoonheidsprijs verdient, maar hey … het werkt in elk geval wel. Oké, wat heb ik dan gedaan? Door te rommelen met absolute positionering en de z-index, en daarnaast vals te spelen met de in de flashbanner geprogrammeerde doorklik naar de Company of Kids website (lees: de doorklik wordt gedaan door het javascript in plaats van de flash banner) is het gelukt om een tracking van het aantal kliks op de banner te realiseren.

Ik heb een div gebruikt en daarin een absoluut gepositioneerde afbeelding (een transparante gif) geplaatst. Daaronder laad ik een nog een div in, waarin tenslotte de flashbanner zich bevindt. Aan de transparante gif heb ik een onclick event opgehangen, die zorgt voor (1) het verhogen van de teller en (2) het laden van de achterliggende website.

De code
1. html en javascript

<div id="container-banner-cok">
<img id="anker" src="/img/transparant-468x60.gif" />
<div id="flashbanner">
<script type="text/javascript">
// <![CDATA[
var fo = new FlashObject("pad naar flash bestand", "", "468", "60", "6", "#f0f0f0", true);
fo.addParam("wmode", "transparent");
fo.write("flashbanner");
var container = document.getElementById("container-banner-cok");
var anker = document.getElementById("anker");
anker.style.cursor = "pointer";
anker.onclick = function () { updateBannerClicks('cok022007'); window.open('url die geopende moet worden'); }
// ]]>
</script>
</div>
</div>

2. stijlblad dingen

#container-banner-cok { width: 468px; height: 60px; display: block; background: #fff; margin: 10px 10px 10px 20px; padding: 0; z-index: 100; text-align: left; }
#anker { position:absolute; display: block; border: none; z-index: 99; width: 468px; height: 60px; margin: 0; padding: 0; }
#flashbanner { position: absolute; display: block; width: 468px; height: 60px; z-index: 0; padding: 0; margin: 0; }

Oh ja, in het bovenstaande geval heb ik gebruik gemaakt van Geoff Sterns’ flash object voor het inladen van de Flash banner.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Flash · javascript
Getagged als banner, javascript