Thursday, 4 August 2011

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..

Monday, 16 May 2011

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


Wednesday, 20 April 2011

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!

Monday, 7 February 2011

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!!