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/