Easy jQuery Learning Tips and Tricks

JQuery is an Art of JavaScript and CSS. This tip/trick will show you a. Show an animated tool tip b. Add attributes using script. Step 1: Add the script tag with the required jQuery file in src attribute Ex:

<script type="text/javascript" src="jquery.js"></script>

Step 2: Create required styles in the page or add the CSS file in the page. Ex:

<style>
    body
    {
        margin: 0px auto;
        font: 80%/120% Arial, Helvetica, sans-serif;
    }
    .m2
    {
        margin: 100px 0 0;
        padding: 0;
        list-style: none;
    }
    .m2 li
    {
        padding: 0;
        margin: 0 2px;
        float: left;
        position: relative;
        text-align: center;
    }
    .m2 a
    {
        padding: 14px 10px;
        display: block;
        width: 144px;
        color: #000000;
        text-decoration: none;
        font-weight: bold;
        background: smokewhite no-repeat center center;
    }
    .m2 li div
    {
        font-weight: normal;
        background: #BFBF6A; /* url(images/hover.png) no-repeat;  */
        width: 180px;
        height: 45px;
        position: absolute;
        top: -85px;
        left: -15px;
        text-align: center;
        padding: 20px 12px 10px;
        font-style: normal;
        z-index: 2;
        display: none;
    }
    .h
    {
        background: blue;
        color: white;
    }
    .search
    {
        width: 100%;
        padding: 20px;
        text-align: center;
    }
    .search #txtSearch
    {
        width: 200px;
        border: solid 1px green;
        padding: 2px;
    }
</style>

Step 3: Create the required div, ul and li tags as per requirement.

<div>
    <ul class="m2">
        <li>
            <a href="http://yahoo.com" title="Yahoo">Yahoo</a> 
        </li>
        <li>
            <a href="http://www.google.com" title="My Favourite Search engine">
            Google</a>
        </li>
        <li>
            <a href="http://www.codeproject.com/m-premraj/" title="Find Me">
            Find me</a>
        </li>
    </ul>
    <div class='search'>
        <input type='text' id='txtSearch' /><img id='imgSearch' /></div>
</div>

Step 4: This is very important step and last one. Add some JavaScript which is given below

<script type="text/javascript">
$(document).ready(function(){
	$(".m2 a").append("<div></div>");
	$("#imgSearch").attr("src","search.jpg");
	$(".m2 a").hover(function() {$(this).find("div").animate({opacity: "show", top: "-55"},
            "slow");var hoverText = $(this).attr("title");
        $(this).find("div").text(hoverText);},
            function() {$(this).find("div").animate({opacity: "hide", top: "-10"}, "fast");
	});
});
</script>

Have a HAPPY CODING ART.