Först får vi tänka att CSS3 är helt uteslutet, det fungerar sådär och vi vill ju nå de flesta besökarna av sidan, även de som inte kör senaste versionen av X webbläsare.

Först kollar vi lite på uppbyggnaden:

[php]
<h1>En rubbe</h1>
<p>Paragraf</p>
<p><a href="#" class="more-link">Läs mer</a></p>
[/php]

Vilket betyder att CSS egentligen är uteslutet, Läs mer finns inne i en <p>-tagg, men det gör paragraferna ovan också, vilket det kan finnas flera av. Detta betyder att display: inline inte kan användas på <p>.

Lösningen måste ligga i JavaScript. Detta är alltså ett litet fulhack med jQuery för att tillfredställa begäret att ha Läs mer vid sidan av texten och inte under:

[javascript]$("a.more-link").parent().css({ ‘display’: ‘inline’ }).prev(‘p’).css({ ‘display’: ‘inline’ });[/javascript]

Den snabba förklaringen är att jag väljer a.more-link, hoppar upp till dess förälder i hierarkin, sätter display inline på paragrafen. Slutligen så går jag bakåt med hjälp av .prev() för att hitta elementet ovanför Läs mer-länken och sätter display inline även här.

Quick & Dirty

För att förklara så använder jag the_content() tillsammans med en sidbrytning 99 gånger av 100 för att visa en ingress på första sidan. Alltså, the_excerpt(); fungerar inte då det bryter text samt tar bort HTML.

Samma höjd på fyra kolumner

jQuery tillhandahåller dock en väldigt smart och snabb lösning för att fixa samma höjd på dina kolumner:

[javascript]
var highestCol = Math.max($(‘#colright’).height(),$(‘#colleft’).height());
$(‘#colright, #colleft’).height(highestCol);
[/javascript]

Vad de gör är att det helt enkelt räknar ut höjden på båda, tar den som är högst (längst?) och sätter den mindre till samma höjd.

Värt att notera är att systemet inte är dynamiskt för fem öre när handlar om dynamiska sidladdningar så som med AJAX eller annat som påverkar höjden utan att ladda om sidan. Detta på grund av att höjden sätts med .height(). Sätter man höjden med min-height eller något liknande kanske ett annat resultat infinner sig, men det är ingenting jag har kollat.

Lösningen på det fasta problemet kan också avhjälpas med att binda ett event eller en timer som kollar av höjden vilket helt plötsligt gör systemet lite krångligt. Hade själv problem med det på denna sidan när scriptet skulle samarbeta med Disqus, lösningen hette bakgrundsbild med CSS istället …

Problem: Webbläsarens cache sparar bilden och hämtar den gamla, det går tyvärr inte ens att lita på no-cache/no-store meta-taggarna.

Lösningen: Uppdatera bilden med en query-sträng.

Tänk dig att du har följande HTML:

[code lang="html"]<div>
<img src="bild.jpg" alt="" title="" id="image" />
<input type="button" value="update" id="update" />
</div>

Du vill nu att bilden ska uppdateras så fort någon trycker på knappen. För enkelhetens skull så använder vi jQuery.

[code lang="javascript"]
$('#update').click( function () {
$('#image').attr('src', 'bild.jpg');
});

Javascriptkoden ovan ska enligt reglerna byta ut bild.jpg mot bild.jpg, det vill säga uppdatera bilden från servern igen. Det är vid detta momentet cache-funktionen spökar.

Vad vi gör då är att vi lägger till en querysträng i slutet av bilden.

[code lang="javascript"]
$('#update').click( function () {
var timestamp = new Date().getTime();
$('#image').attr('src', 'bild.jpg?t='+timestamp);
});

Vi lägger alltså till en tidsstämpel som sätts till epoch/unixtid och lägger till den som en sträng efter bilden. Bilden kommer alltså hämtas som bild.jpg?t=123445345 där siffrorna alltid ändras och aldrig är unika.

Vad detta innebär i praktiken är att webbläsaren luras att tro att bilden som hämtas alltid är unik och inte är samma som redans finns lagrad - det vill säga att bilden kommer alltid att förnyas, oavsett cache.

Att använda ramverk så som jQuery kan vara en lösning så att det finns en naturlig fallback på alla funktioner som konstrueras.

Ska klura lite på detta till helgen, men vad har ni lärt er, sett och läst? Finns det några bra och utförliga resonemang när det gäller ämnet JavaScript och tillgänglighet?

Det ser onekligen väldigt snyggt ut och fungerar bra när man testar demot som finns på sidan.

Det verkar som att Facebook och Gmail (som har en liknande chatt) fortfarande är i framkanten med interaktiva funktioner.

Och efter att lösningarna lanseras så kommer de öppna alternativen ganska snabbt.

(via – webAppers.com)