Cookie handling

Writing a cookie:

(function(){

// erase any existing instances
eraseCookie('nameOfCookie');

// bind a change event to the cookie
$("input:radio[name:'radioName']").bind( 'change',function(){

//write the cookie
createCookie('extrasCookie',$(this).val(),7);
})
})();



Reading the cookie:

(function(){
if(readCookie('extrasCookie')=="1"){

// do something based on the results

}
})();

scrollTo problems with IE7

Using the jQuery Plugin 'scrollTo' I had problems with the animation in IE7.

Turns out, if I remove the transparent PNG, it works fine. I couldn't find much on it, but someone did say IE7 "renders really nasty when moving transparencies!"

No solution found as yet.

sIFR and tabbing in IE7

Recently, we noticed a strange problem in Internet Explorer when tabbing through pages where SIFR is used.

Internet Explorer appeared to include <object> tags in the list of tags it would focus on, including the <object> tags injected into the page via SIFR. However, the behaviour it had when tabbing onto <object> tags was erratic.

Sometimes it would happily leave focus on the <object>, but without any indication that the <object> was focused. Sometimes it would immediately throw focus onto the next focusable tag. Sometimes it would throw focus back to the beginning of the document, or to the browser toolbar itself, never to return to the HTML page. (The issue may be described in a comment on the SIFR site: http://novemberborn.net/sifr3/r372#c001075)

We weren’t able to isolate exactly what was going on, but we did find that using the attribute tabindex="-1"on the <object> tag prevented IE from focusing on it at all, which for simple SIFR headings is fine. We tweaked the sifr.js file to add the tabindex attribute (thankfully, an easy tweak).

This hasn't been checked on how this works when SIFR is used for links yet though: guess this would prevent tabbing to SIFR links in IE, so might need to adapt the fix if that crops up.

Strings in JavaScript

JavaScript has a really crappy algorithm for pushing Strings together so, where possible, you should use the inbuilt array join() method

var __string = [“string1”,“string2”,“string3”,].join();

instead of

var __string = “string1” + “string2” + “string3”


Simple slideshow - with jQuery

// set the current image to 1 - outside of the function
var current = 1;
OW.slideShow = function() {

// each time this function runs, fade out the image
$j(".className img").fadeOut(350,function(){
current++;
if(current==4){current=1;}

// then update the source of the image to the next one
$j(".className img").attr("src","images/content/img-placeholder-"+current+".jpg");

// then fade the image back in again
$j(".className img").fadeIn(350);
});

}

$j(document).ready(function(){

// in the document.read function attach a time onto the function - in this case it'll run every 6 seconds
if($j('.className img').length){var __int = setInterval("OW.slideShow()",6000);}

});

Outlines on text-indented links

Fabulous post by Patrick Lauke on how to handle the :focus outlines on buttons that have a negative text indent.

http://people.opera.com/patrickl/experiments/keyboard/test

(the short version - add overflow:hidden to the 'a' tag that has the text-indent:-loads on it)

Automatically populate a select box with date options 12 months from now

A function to take a select object, clear it out and then populate it with dates from the current month for a year (12 months).

function createDates(){
var mth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

// previous function sets up f.$ as 'getElementById'
var m = f.$("in_month");
var ml = f.$("out_month");

// get the current Month
var currMth = current.getMonth();

// function is called from the two variables below
// an object is passed through, and all variables on the object are referenced through o

var setMonthSelect = function (o){
o.optMthList.options.length = 0
var y = current.getFullYear();

// cycle through 12 and add the 12 months into the array
for (var i=0; i < 12; i++){

//set up the variables that will go into the options - checkVal is the current month and is incremented in the 'if' statement below
var monthVal = o.optMth[o.checkVal] + '-' + y;
var monthText = o.optMth[o.checkVal] + ' ' + (y-2000);

// figure out if it should be the one that's selected (it's easy, the first one is..)
var sel;
i==0?sel=true:sel=false;

// the thing that actually does the work - function is below (and attribution)
AddSelectOption(o.optMthList, monthText, monthVal, sel);

//if the current month is Dec, make it Jan, otherwise add one
if (o.checkVal == 11){
o.checkVal=0
y++;
}else{
o.checkVal++;
}
}
};

// The calls
setMonthSelect({optMth:mth, checkVal:currMth, optMthList:m});
setMonthSelect({optMth:mth, checkVal:currMth, optMthList:ml});
}

// this function stolen from steven harman
function AddSelectOption(selectObj, text, value, isSelected){
if (selectObj != null && selectObj.options != null){
selectObj.options[selectObj.options.length] = new Option(text, value, false, isSelected);
}
}