Mobile stylesheets

I’ve found that the Android phones I've been testing on, in landscape view has a width of something like 533px – not the 480px everyone seems to be talking about. This was confusing. But I ended up using the following code to make the site work:

 <link href="css/screen.css" media="only screen and (min-device-width: 534px)" rel="stylesheet" type="text/css"></link>

<link href="css/mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-width: 533px) and (orientation: landscape)" rel="stylesheet" type="text/css"></link>

 This removes the main stylesheet and only displays the mobile stylesheet on devices. iPad just gets the regular site. Another media query might be necessary for an iPad site.

I’d really strongly like to discourage the use of:
maximum-scale=1

This will mean the user can’t zoom into the page which is really bad for accessibility reasons.

 Oh, and there’s a resize bug in mobile Safari nicely described by Jeremy Keith: http://adactio.com/journal/5088/ If you go from Portrait to Landscape the page ends up being too big and the user has to double tap to bring it back to the right size.

But it’s a well documented bug, so we just need to point this out and hope that Apple fixes asap!!

CSS3 is a misnomer?

According to the W3C:

"CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification."

So there will be no CSS3, just a more enhanced CSS2.1.

Seems weird to me..

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

}
})();