CSS Cross Shape

It's surprising to see how helpful the CSS Shapes are. These shapes help us in many many ways. If you look at the image below you will say you have to use full image for this effect, because background-repeat wont work in this situation.

 To avoid use of images for such designs we can use CSS Shapes and the web would be light-weight and full of fun. Here is the CSS that creates above shape and works in all browsers including IE.

.cssCrossShape{
    margin: 100px 0 0 100px;
    border-color:#3274D0;
    border-style: solid;
    border-width:150px 1100px;
    border-top:90px solid transparent;
    border-left:0px solid transparent;
    height:0;
    width:0;
}

<div class="cssCrossShape"></div>

HTML5 Placeholder in IE7 and IE8 fixed with jquery

Using HTML5 Placeholder attribute in IE7 and IE8 is possible with the help of a block of jquery code.
Here goes the code -

Sorting HTML table with jquery

Sorting tables in HTML becomes easier with tablesorter. Tablesorter is a jQuery plugin and it has many good features, such as -
Multi-column sorting
Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
And many more...

While implementing it we need to add one plugin in the HEAD section

<script src="jquery.tablesorter.js"></script><!--[Sorting Table]-->

The jquery code goes something like this -
//jquery table sorter code
$("#sortThisTable").tablesorter({       
    headers: {
            // assign the first column (we start counting zero)
            0: {               
                sorter: false
            }
           
        },       
        sortList:[[2,0]], widgets: ['zebra']       
});

And your HTML has to be like -
<table id="sortThisTable" class="tablesorter">
    <thead>
        <tr>
            <th>Sr.No</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Dave</td>
            <td>Barber</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Nanno</td>
            <td>Vsome</td>
        </tr>

    </tbody>
</table>


Download the source here - http://tablesorter.com/docs/#Download

Using jquery datepicker (calendar)

jquery datepicker is very easy to implement. We can have it in action on text-field or on calendar image icon click. All we need to do is -

Add jquery library, jquery UI library and jquery UI CSS
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!--[jQuery Library]-->
    <script src="jquery-ui-1.8.9.custom.min.js"></script> <!--[jQuery UI Library]-->  
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />

When you have these three files in the HEAD section of your HTML file, you can write the jquery calendar code -

<script type="text/javascript">
$(function(){
   
$('.showCalendarTextFieldClass').datepicker({
    minDate: new Date(2012, 0, 1),
    maxDate: new Date(2012, 1, 26),
    dateFormat: 'dd/mm/yy',
    selectMultiple:true,
    showOn: 'button',
    //showOn: 'both',
    buttonImage: 'img/calendarIcon.png',
    buttonImageOnly: true   
});

//   
});
</script>

The code below shows how you can change calendar icon on mouseover  and restore it back on mouseout or when clicked outside of calendar/datepicker, and add alternate text to the icon on mouseover -

//jquery datepicker mouseover/hover change icon
    $(".ui-datepicker-trigger, .ui-datepicker").mouseover(function() {
        $('.ui-datepicker-trigger').css('cursor', 'pointer').attr({alt: 'Pick Date', title: 'Pick Date', src: 'img/calendarIconActive.png'});       
        if($('.ui-datepicker').css("display") == "block"){
            $('.ui-datepicker-trigger').attr({src: 'img/calendarIconActive.png'});
        }
    }).mouseout(function(){
        $('.ui-datepicker-trigger').attr({src: 'img/calendarIcon.png'});
        if($('.ui-datepicker').css("display") == "block"){
            $('.ui-datepicker-trigger').attr({src: 'img/calendarIconActive.png'});
        }       
    });
    $('.ui-datepicker').click(function(e) {
        e.stopPropagation();
    });
    $(document).click(function() {
        $('.ui-datepicker-trigger').attr({src: 'img/calendarIcon.png'});
    });


<input type="text" class="showCalendarTextFieldClass" />

You are done!

More options, events, methods, theming is here - http://jqueryui.com/demos/datepicker/

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);
        }
    });

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;
}

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