Click here to Skip to main content
Click here to Skip to main content

Easy jQuery Learning Tips and Tricks

, 4 Feb 2010
Rate this:
Please Sign up or sign in to vote.
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 attributeEx:Step 2:Create...
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

M.Premraj
Software Developer (Senior)
India India
my technical blog http://dotnet.kbrecord.com/

Comments and Discussions

 
GeneralGreat Job Man Pinmemberrajarajan_2k526-Dec-09 2:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 4 Feb 2010
Article Copyright 2009 by M.Premraj
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid