jQuery or CSS?

jQuery can do everything CSS can do plus more. Why bother with CSS when jQuery can do so much?

As an example, jQuery updates the following area with the first part of the text from any paragraph under the cursor. Move your mouse around to see the effect.

Please move your mouse around the page.

CSS is faster

CSS is faster. If you can do something in CSS, use CSS. jQuery can be used to fix problems with CSS but the problems are usually caused by limitations in your HTML and the best long term solution is to fix the HTML so you can use CSS.

An example is selecting an element then trying to apply styling to the parent of an element. jQuery can do it. CSS cannot. The first time you need to solve the problem is usually when you need to centre an element. In CSS you centre an element by telling the parent to centre the element. jQuery can select the parent of an element but CSS can not.

How would you use CSS to make the following word, Hello, appear in the centre of the page?
<p><strong id="example2">Hello</strong></p>

Here is the example word and HTML without CSS or jQuery.

Hello

Here is the example word with inline styling to centre the text:
<p style="text-align: center;"><strong id="example3">Hello</strong></p>
And here is the result:

Hello

Here is the example word with inline styling to centre the text:
<style>
.centre { text-align: center; }
</style>
<p class="centre"><strong id="example4">Hello</strong></p>
And here is the result:

Hello

Here is the example word with jQuery adding styling:
<script type="text/javascript">
jQuery(function() {
  jQuery('#example5').parent().css('text-align', 'center');
});
</script>
<p><strong id="example5">Hello</strong></p>
And here is the result:

Hello

You can fix a problem like this in minutes using jQuery, compared to hours for a formal change to HTML. A good content management system will help you change the HTML if you make only one change in one place. There might be several similar elements in a variety of files with all of them needing a matching change. A quick jQuery change might be easier.

The cost of the jQuery approach is longer page load times and fewer satisfied customers. There is an additional cost when several jQuery quick fixes are piled up on the one page and fight each other. You might not notice anything for a long time because of your fast computer. Your customers, on ordinary computers, might notice a slow down after just a few jQuery modifications then start shopping elsewhere.

Change your HTML

The parent selector problem is a common reason to use jQuery and a good reason to change your HTML. Use the example of placing an image in the centre of a paragraph or division. In jQuery, you can select the image then the parent element then apply text-align: center to the parent. You cannot do the same in CSS.

The CSS approach is to give the parent element a class then apply the CSS to all elements with that class. You go back to the code generating the HTML and change the code to add the class to the elements holding images that need to be in the centre.

The HTML generation logic can be complex if you do not know what will be in the parent element when you create the parent element.

Another approach is to wrap the image in a div and give the div a class to centre the image in the div. You might have to make the div 100% wide to get the right result.

Hover example

There are times when you need jQuery instead of CSS. The following example is a trivial example and I use it only demonstrate jQuery. The example simple follows your cursor across the screen and replaces the text in the display box. An expanded version of this example might be needed to follow a cursor over a map and display information about each location on the map without covering up any part of the map.

The active area is at the top of this page and repeated here.

Please move your mouse around the page.

The following line is the definition of the active area. Note we use a class instead of an id because the area occurs more than once.

<pre class="example1" style="background-color: yellow; color: blue; padding: 1em; text-align: center;">Please move your mouse around the page.</pre>

The following lines show the jQuery code.

<script type="text/javascript">
jQuery(function() {
  var example1 = jQuery('.example1').first();
  var text1 = example1.text();
  var bg = example1.css('background-color');
  jQuery('p').each(function() {
    var ptext = jQuery(this).text().substring(0, text1.length);
    jQuery(this).hover(function() {
      jQuery('.example1').each(function() {
        jQuery(this).text(ptext);
        jQuery(this).css('background-color', 'orange');
      });
    }, function() {
      jQuery('.example1').each(function() {
        jQuery(this).text(text1);
        jQuery(this).css('background-color', bg);
      });
    });
  });
});
</script>

Here is the area again:

Please move your mouse around the page.