Readmore-länk bredvid föregående text i WordPress

Krånglig rubrik men problemet är lite mer lättföreståligt. Tänk en typisk startsida i WordPress som är uppbyggd med the_content(‘Läs mer’); (eller liknande). Allt är fint men du kommer helt plötsligt på att Läs mer ska ju ta vid där föregående text slutade! Problem direkt!

Läs hela inlägget →

Enkelt sätt för att få två kolumner till samma höjd

Att få två kolumner att ständigt ha samma höjd i ren CSS är pain-in-the-ass rent ut sagt 9 gånger av 10, speciellt om du inte vill bland in bilder i din lösning.

Läs hela inlägget →

Cache och att uppdatera bilder med jQuery

Tänk dig att du har ska fixa bildeditering på sidan du utvecklar. Tänk att du vill att användaren ska kunna förändra små delar av bilden i webbläsaren och för att få det att gå så smidigt som möjligt så vill du uppdatera bilden utan att webbläsaren laddar om.

bildeditering-jquery-bild

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.

Tillgänglighet via JavaScript

Har funderat på detta ett tag, hur fungerar Javascript för blinda eller för andra som använder olika hjälpmedel för att ta sig runt på internet.

hanglas_tillganglighet

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?

Snygg chatt med jQuery i Facebook-stil

jquery facbook chatDet kändes som att det varit på gång länge, men nu kan du i alla fall integrera en chatt a la Facebook på din webbplats med jQuery.

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)