jQuery hover de-duplication example

jQuery .hover() helps you add flashy things to your Web page. Wave your mouse over this paragraph to see some colourful demonstrations.

The first paragraph on this page is a copy of the the first paragraph in jQuery hover. We changed the paragraph id and some colours to make it look different. The code is changed to demonstrate de-duplication. The explanation on this page assumes you read jQuery hover.

The HTML

How do we perform the magic? Look at the opening paragraph with the colours. The following section shows the paragraph with the HTML exposed.

<p id="colours2" style="background-color: #66ff66; padding: 1em;">
  jQuery <span style="background-color: #0099cc; color: white; padding-left: 0.5em; padding-right: 0.5em">.hover()</span>
  helps you add<span style="background-color: #ff0066; color: white;"> flashy </span>
  things to your <span style="background-color: #cccc00; color: white; padding-left: 0.5em; padding-right: 0.5em">Web</span> page.
  Wave your mouse over this paragraph to see some colourful demonstrations.
</p>

The jQuery/Javascript code

The following section shows the complete jQuery/Javascript combination. Do not panic. We will split it into smaller bits.

<script type="text/javascript">
function save(to) {
  jQuery(to).data('css-background-color2', jQuery(to).css('background-color'))
    .data('css-color2', jQuery(to).css('color'));
}
function change(to, from) {
  jQuery(from).hover(function() {
    jQuery(to).css('background-color',  jQuery(from).css('background-color'))
      .css('color',  jQuery(from).css('color'));
  }, function() {
    jQuery(to).css('background-color', jQuery(to).data('css-background-color2'))
      .css('color', jQuery(to).data('css-color2'));
  });
}
jQuery(function() {
  save('body');
  save('#colours2');
  jQuery('#colours2').each(function() { change('body', this); });
  jQuery('#colours2').find('span').each(function() { change('#colours2', this); });
});
</script>

The script element

You insert Javascript and jQuery through a link to a file or in your Web page wrapped inside a script element. The following script element example looks simple. The real problem with Javascript is deciding where to put it in your page to make the Javascript work after page elements are loaded. JQuery provides a really easy way to run the code at the right time.

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

Javascript/jQuery function to save current colours

The following Javascript function uses jQuery to copy the current colours in to and save them in a jQuery .data() area.

function save(to) {
  jQuery(to).data('css-background-color2', jQuery(to).css('background-color'))
    .data('css-color2', jQuery(to).css('color'));
}

Javascript/jQuery function to set the hover action

The following Javascript function uses jQuery to set a hover action to copy the current colours in from then a hover action to restore the colours from the jQuery .data() area. .hover() is explained in jQuery hover.

function change(to, from) {
  jQuery(from).hover(function() {
    jQuery(to).css('background-color',  jQuery(from).css('background-color'))
      .css('color',  jQuery(from).css('color'));
  }, function() {
    jQuery(to).css('background-color', jQuery(to).data('css-background-color2'))
      .css('color', jQuery(to).data('css-color2'));
  });
}

Run everything after the page is loaded

The following code shows the outer layer of jQuery wrapped around our code to apply hover. The outer layer delays the code until the page is loaded. Everything runs inside the function defined by this wrapper layer.

<script type="text/javascript">
jQuery(function() {
});
</script>

Save the existing settings

The following lines of jQuery use our save() function to save the existing colours for the page and the demonstration paragraph.

  save('body');
  save('#colours2');

Add hover to the paragraph

Our change() function adds the hover action. The first line of following code selects the paragraph and uses our function to add hover. The second line repeats the process for the HTML span elements.

  jQuery('#colours2').each(function() { change('body', this); });
  jQuery('#colours2').find('span').each(function() { change('#colours2', this); });

De-duplicate

There was duplication of code in jQuery hover and we removed the duplication of code by moving the duplicated code into a function. You can mix Javascript and jQuery structures to improve your code. This is a nice example for someone who uses Javascript and is starting to use jQuery.

There are other ways to de-duplicate the example code and some increase the processing overheads beyond any benefit you might get in your code. There are shortcuts you can use in jQuery but some are hard to explain and are to be avoided until you have a lot of experience with jQuery. The best test of a shortcut is to give the code to someone with less experience and see if they can understand the code.

Good de-duplication will make code easier to understand because you can work through the code in smaller chunks. You can test a good function independently from the rest of your code.