Input field toggle (badly written - needs re-writing)

fieldToggle = function(i){

__defaultVal = $(i).attr('value');
__inputField = $(i);

$(__inputField).bind('click focus', function () {
if ($(this).attr('value') == __defaultVal) {
$(this).attr('value', '');
}
});

$(__inputField).bind('blur', function () {
if ($(this).attr('value') == "") {
$(this).attr('value', __defaultVal);
}
});

}

Quick toggle based on select box changing

Quick way to make a field toggle enabled/disabled based on changing a select box.

JavaScript

var fil = '#filter';
var filSub = '#subFilter';

$(fil).change(function(){
($(this).val() != 0) ? $(filSub).attr('disabled','') : $(filSub).attr('disabled','disabled');
});

HTML

Filter by type
All Type 1 Type 2

Quick 'n dirty Mobile site

Summarised from the Smashing Magazine article. Because sometimes you just want the bare bones, not the explanation.

1. Add in a mobile stylesheet:
   
   
   
   
   <
link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"only screen and (max-device-width: 480px)"
href
=
"small-device.css"

/>

   
   
   If you want to use ProtoFluid (an excellent testing tool), use this one:
   
   
   <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/small-device.css">
   
   
   


2. Add in the meta tag to help the iPhone out:
   
   
   
   
   <
meta
name
=
"viewport"
content
=
"width=device-width"
/>

   
   



3. Redo styles!

IE6 problems with setAttribute

This was so annoying!

I could *not* figure out why a piece of code wasn't working. Then someone pointed out that:

newLink.setAttribute('class', 'myClassName');

is notoriously flakey in IE6. Change it to:

newLink.className = 'myClassName';

and it all works fine and dandy.

God I hate IE6!!

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.