Tuesday, January 31, 2012

Check and uncheck group of checkboxes

As seen on gmail, when you click on the checkbox on table head it selects all checkboxes in the table. Simple, yet useful!

$('#selectAllCheckbox').click(function(){   

       if($(this).is(':checked')){
             $(this).parents('table').find('input[type="checkbox"]').attr('checked', true);
             }
       else{
            $(this).parents('table').find('input[type="checkbox"]').attr('checked', false);
        }
    });


Tuesday, January 10, 2012

CSS - Indenting Second Line of LI (List Items)

It drives me crazy when I see that next line coming under the Bullet point. Here, margins and paddings are not very helpful.  The text-indent property with minus value helps us to get the next lines properly indented -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

Monday, January 9, 2012

Perfect Normalize CSS


Using HTML5 Boilerplate to start your project would be the best choice because it sets the perfect default HTML page for your PC/Mobile project. The H5BP (HTML5 Boilerplate) makes sure that your page is working fine on all devices/browsers.  

The default CSS that comes with H5BP has some issues with browser compatibilities. Don’t worry about that, I have fixed all browser compatibility issues in the CSS and it is attached here. Download and replace it with the default CSS file that comes with H5BP (style.css).