Dotnetplace.com

.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here

Advertise

Loading...


Posted by Aamir Hasan   on Sunday, December 4, 2011 Total Views:  

Recently asked from me that how to create a simple function, as mouse move background color of defined area will automatically change and when mouse leave the specific area previous color will come back. So, I have created a simple hover effect jQuery plugin. By writing a jQuery plugin, you can save the developer time and can easily use in your web site application.

In this article, we will learn how to create a simple hover effect jQuery plugin.

 

Step 1: Firstly, I have created plugin JavaScript file with named AamirHasan.HoverEffect.js and add the Microsoft CDN jQuery library and AamirHasan.HoverEffect.js plugin reference inside head section of aspx page as shown below.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"

    type="text/javascript"></script>

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

  

Step 2: In this js file, I have added new function to jQuery.fn Object. For Default settings I have used $.extend. $.extend to combine more than one object into first object. By using Namespacing, you can avoid with conflict with other plugin with same name.

Step3: Copy and paste the following code inside the AamirHasan.HoverEffect.js file.

(function($){

    jQuery.fn.extend({

        HoverEffect:function(options){

            var defaults ={

                backgroundColor:"#fff"

            };

 

            var options = $.extend(defaults, options);

 

            returnthis.each(function(){

                jQuery(this).hover(

                function(){

                    $(this).css("background-color", options.backgroundColor)},

                function(){

                    $(this).css("background-color","")}

                );

            });

        }

 

    });

})(jQuery);

 

Step 4: Save and close plugin file.

In the above jQuery plugin, I have added backgroundColor parameter. Now, you can use this HoverEffect plugin.

Let us see the code.

<!DOCTYPE html>

<html>

<head runat="server">

    <title></title>

    <style>

        #msg

        {

            background-color: #eaeaea;

            border: 1pxsolid#999;

            width: 400px;

            height: 200px;

            padding: 20px;

        }

    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"

     type="text/javascript"></script>

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

    <script type="text/javascript">

        $(function(){

            $('#msg').HoverEffect();

        });

 

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="msg">

        .NET Articles<br/>

        Author:Aamir Hasan

    </div>

    </form>

</body>

</html>

By adding jQuery library, will come to know that you are extending the methods.  We can call the Hovereffect on any contents of the page.

Example 1

    <script type="text/javascript">

        $(function(){

            $('#msg').HoverEffect();

        });

    </script>

Example 2

    <script type="text/javascript">

        $(function(){

            $('p').HoverEffect({backgroundColor:"red"});

        });

    </script>

Example 3

    <script type="text/javascript">

        $(function(){

           $('#example3 tr').HoverEffect({backgroundColor:"#FF0"});

        });

    </script>

Output

 

I have tested this example on following browsers:

  • Internet explorer 9 & 10

  • Firefox 7.0

  • Chrome 12.0

  • Opera 12

  • Safari

Download

jQuery-Plugin-HoverEffect.zip (1.42 kb)

See live demo

Category:
Protected by Copyscape Online Plagiarism Tool

Comments (4) -

Ahmed
Ahmed Saudi Arabia
12/6/2011 2:24:55 AM #

أشكركم على المشاركة.

Maxman
Maxman United States
12/12/2011 1:56:13 AM #

I want to say thank you for the information you have shared. Just continue writing this kind of post. I will be your loyal reader. Ton of thanks.
www.penisenhancementpills.us/maxman-review.html

vimax
vimax United States
1/1/2012 1:28:50 PM #

vimax

john
john United States
1/5/2012 7:28:06 AM #

Excellent work, keep it up

adfasdf
adfasdf United States
4/8/2012 4:47:18 AM #

adfasdf

y
y United States
4/12/2012 9:21:05 AM #

adsfasdf

Ozella Rehm
Ozella Rehm United States
3/28/2017 3:45:54 AM #

Mar 13, 2017 - Купить АлкоБарьер средство от алкоголизма в Актобе “У меня были проблемы в жизни, и мне казалось,что с помощью алкоголя я могу ... pronews24.ru

leasbian milfs
leasbian milfs United States
8/30/2017 6:09:01 PM #

please post more

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5