JQuery Layout Plugin

Check this link.

JQuery Tablesorter

Check this link

Works with JQuery Mobile 1.4.x

JQuery Mobile Data attribute reference

Check this link

JQuery Mobile Icons

Check this link

Web Trends for 2013

10 Web Design Trends

20 Hottest Trends

20 top web design and development trends

Google Apps Access domain users calendars

<script language="javascript">



$(document).ready(function() {         $('#dataProcessingIFrame').attr("src","http://www.google.com/calendar/embed?src=user%40domain.com&ctz=Asia/Dubai");

  });

 function changeurl(sel) {

    var value = sel.options[sel.selectedIndex].value; 

   var url = "http://www.google.com/calendar/embed?src=user%40domain.com&ctz=Asia/Dubai";

    url = url.replace("user", value);

    $('#dataProcessingIFrame').attr("src",url);

}

 function openurl(sel) {

    var value = sel.options[sel.selectedIndex].value; 

   if(value != "0") {

     var url = "http://www.google.com/calendar/embed?src="+value+"%40domain.com&ctz=Asia/Dubai";

        window.open(url,'_blank','width=600,height=600');

    }

 }

</script>







<select name="users" onchange="javascript: openurl(this);"> <option selected="" value="0">Select User</option> <option value="user">user@domain.com</option></select>

JQuery Password Validation Rule

Check out this link for custom password validation rule in JQuery Validator

QTip2 JQuery Plugin

Cool Tooltip here

Find the source files here

Theme an entire site with JQuery UI

Click here for an example

JQuery UI DropDown

Why you shouldn’t style select boxes look here

Technorati Tags: jquery,ui,dropdown,css,select

Check out this link for nice CSS Dropdown

Also this link here has more details.

Wiki Documentation here

JQuery Tooltip Plugin

See QTip in the following links

Link1

Link2

Link3

JQuery Popup Example

Example:

<style type="text/css">   
    
    div.menudivInactive { margin:0; padding:0;}    
    div.menudivInactive div.tt { width:140px; margin-left:320px; }    
    div.menudivInactive div.tl { background:none; }    
    div.menudivInactive div.tr { background:none; }    
    div.menudivInactive div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; margin-right:7px; height:1px; line-height:1px; }    
    
    div.menudivInactive div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudivInactive div.mr { background:none; }    
    div.menudivInactive div.mm { margin:0px; margin-right:7px; border-right:#a4acb4 solid 1px; border-bottom:none; padding:5px; padding-top:11px; cursor:pointer; background:url(images/img-request-tab-inactive-bg-gradient.png) #efefef top left repeat-x; }    
    
    div.menudiv { margin:0; padding:0; }    
    div.menudiv div.tt { width:140px; margin-left:320px; }    
    div.menudiv div.tl { background:url(images/img-request-tab-active-topleft.png) top left no-repeat; }    
    div.menudiv div.tr { background:url(images/img-request-tab-active-topright.png) top right no-repeat; }    
    div.menudiv div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; height:7px; line-height:7px; margin-right:8px; margin-left:2px; }    
    
    div.menudiv div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudiv div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudiv div.mm { margin-right:8px; background:none; background-color:#efefef; padding:5px; border:none; cursor:pointer; }    
    
    div.menudivContent { margin:0; padding:0;}    
    div.menudivContent div.tt { width:460px; }    
    div.menudivContent div.tl { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.tr { margin-right:8px; background-color:#efefef; }    
    div.menudivContent div.tm { border: solid 1px #a4acb4; border-right:none; border-bottom:none; margin-right:131px; height:1px; line-height:1px; }    
    
    div.menudivContent div.ml { border: solid 1px #a4acb4; border-top:none; border-right:none; border-bottom:none; width:459px; }    
    div.menudivContent div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.mm { background:url(images/img-request-box-active-bg-gradient.png) #FFFFFF top left repeat-x; margin-right:8px; padding:5px; padding-left:10px; padding-right:10px; height:300px; }    
    
    div.menudivContent div.bl { background: url(images/img-request-box-active-bottomleft.png) top left no-repeat; width:460px; }    
    div.menudivContent div.br { background:url(images/img-request-box-active-bottomright.png) top right no-repeat; }    
    div.menudivContent div.bm { background: url(images/img-request-box-active-bottommid.png)top left repeat-x; height:9px; line-height:9px; margin-right:8px; margin-left:7px; }    
    
    .gone { display:none; }    
</style>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">   
    $(document).ready(function(){    
        $(".menudivContent").toggleClass("gone");    
        $(".menudivInactive .mm").click(function() {         
            openPouup();    
        })  
        
        //openPouup();    
    });    
    
    function openPouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        /*Pop In Effect    
        $(".menudivInactive").toggleClass("menudiv");    
        $(".menudivContent").toggleClass("gone");*/    
        
        /*Slide Down Effect*/    
        if(menudivContent) {    
            $(".menudivInactive").toggleClass("menudiv");    
            $(".menudivContent").slideDown("fast",function(){});    
        }    
        else    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }    
    
    /*function closePouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        if(!menudivContent)    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }*/    
</script>

<div class="menudivInactive">   
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"> </div>    
            </div>    
        </div>    
        <div class="ml">    
            <div class="mr">    
                <div class="mm" align="center"> Lorem IPSUM </div>    
            </div>    
        </div>    
    </div>    
</div>    
<div class="menudivContent">    
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"></div>    
            </div>    
        </div>    
    </div>    
    <div class="ml">    
        <div class="mr">    
            <div class="mm">    
                <p>Lorem Ipsum dolor ami aset fetrs psum dolor ami aset fetr psum dolor ami aset fetr aset fetrs psum dolor ami aset fetr psum d.</p>    
            </div>    
        </div>    
    </div>    
    <div class="bl">    
        <div class="br">    
            <div class="bm"> </div>    
        </div>    
    </div>    
</div>

Adding JQuery Widgets to Blogspot

You can add HTML/Javascript widgets to blogspot panels and trigger JQuery on load scripts like the following:

<script type="text/javascript">   
$(document).ready(function(){  
    $("div.date-outer div.date-posts div.post-outer:odd").toggleClass("post-outer-alternate");  
    $("div.sidebar div.widget:odd").toggleClass("widget-alternate");  
});    
</script>