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 …

Gör så här för att lösa problemet. Skri

about:config

i adressfältet. Leta upp:

javascript.options.jit.content

Dubbelklicka eller ändra värdet till false. Starta om webbläsaren och det ska nu vara fixat.

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?

Lösningen finns här!  Allt du behöver är tillägget Greasemonkey och mitt lilla Javascript nedan. Det censurerar bort orden “apple” och “iphone” från sidorna du väljer! Så här ser en sökning på “iphone” ut på Bloggy:

Censurerat och färdigt!

Scriptet du behöver ser ut på detta viset:

[code language="js"]
// ==UserScript==
// @name anti-apple
// @namespace http://drago.cynatic.org/anti-apple.js
// @description Dödar apple
// @include *
// ==/UserScript==

(function() {
var replacements, regex, key, textnodes, node, s;
replacements = {
"apple": "a****e",
"Apple": "A****e",
"iphone": "i****e",
"iPhone": "i****e",
};
regex = {};
for (key in replacements) {
regex[key] = new RegExp(key, 'g');
}
textnodes = document.evaluate( "//body//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

for (var i = 0; i < textnodes.snapshotLength; i++) {
node = textnodes.snapshotItem(i);
s = node.data;
for (key in replacements) {
s = s.replace(regex[key], replacements[key]);
}
node.data = s;
}
})();

OBS, javascriptet är editerat av mig, men det finns liknande på nätet, hittade på disken och har ingen aning om vart det kommer ifrån!

Problemet som verkar finnas är att något i Mozillas Javascript-motor tracemonkey har gått sönder vilket medför att AJAX inte hanteras som det ska.

Det största problemet jag stötte på var att mediahanteraren i WordPress helt enkelt la ner sin verksamhet. Vad som händer är att istället för att öppnas i en egen modul, så öppnas mediahanteraren i samma fönster – vilket får till följd att det man skriver försvinner och att infogandet av bilder blir omöjligt.

Mer information:

• http://ffextensionguru.wordpress.com/2009/05/23/firefox-3-5-update-and-wordpress-oddities/
• https://bugzilla.mozilla.org/show_bug.cgi?id=494143
• https://bugzilla.mozilla.org/show_bug.cgi?id=493760

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)

Dags att ta tag i grejen att lära sig JavaScript fullt ut med all dess skönhet och elakhet. Fick precis boken “DOM Scripting: Web Design with JavaScript and the Document Object Model”, så nu blir det hets-inlärning tills boken är färdigläst.

Jag utlovar en recension på den senare!