Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

Buy me a drink

If you've found this useful, particularly for commercial projects, you might consider making a small donation.

Debugging jQuery – a beginner’s guide

I get quite a lot of questions from users of this site who are trying to implement some jQuery on their pages, and encountering problems in doing so. I’ll start off by listing the things to check first, and then explain how you to use the browser console to help you. If you’re already seeing error messages in your console, start here.

Nothing happens/jQuery doesn’t work – help!

Go through this checklist in order to rule out the most likely issues:

  • Have you included jQuery on your page?

    You need to include a link to jQuery on your page. This is normally (but doesn’t have to be) included in the document head, and will look something like this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

    If you don’t include jQuery, nothing will work.

  • Have you included jQuery just the once

    Check you’ve only got jQuery loaded once. It’s not uncommon to see it loaded more than once, particularly if you’re trying to use a couple of different plugins. Multiple versions usually, but not always, cause everything to fail.

  • Are you calling the scripts in the right order?

    You need to call scripts (as in load them on your page) in the order that you need them. This should be: jQuery, jQuery UI (if you’re using it), and then any code that needs jQuery. If a script that needs jQuery runs before jQuery is loaded, it won’t work.

  • Does your page use .noConflict()

    Err, what….? You’ll probably be aware that jQuery uses the dollar sign as a shorthand – you’ll have seen code like this:

    $('#myselector').fadeOut('slow');

    Now, it’s possible to disable the use of the $ shorthand by using .noConflict(). This is done in case other javascript libraries need to use the $ variable themselves. WordPress applies .noConflict() by default. The result will probably manifest in the same way as not loading jQuery. To fix this, you’ll need to amend your code to look like this throughout:

    jQuery('#myselector').fadeOut('slow');

    Check out the .noConflict documentation for more information on how to use, and work around this.

  • Are you using another javascript library as well as jQuery?

    If you are, the first thing to consider is ‘Why?’. It’s not impossible to do, but you’ll be making things more complex than they need to be, and life harder for yourself. You’ll need to look at .noConflict again.

  • Is your code correct?

    If you’ve mistyped your code or otherwise made an error, then that can cause all the javascript on your page to stop working. If this is the cause, then it’ll usually show as a console error – see below.

  • Is anything else interfering with your code?

    Sometimes, if you have multiple plugins loaded, either in WordPress, or just lots of scripts loaded, they interfere with each other. If this is a possibility, remove the other scripts and see if that solves your problem. If it does, add scripts back one by one until you isolate the cause.

  • It’s none of these….

    Well, at least you’ve ruled out the obvious things. If you’ve got this far, you need to look more closely at your code, see if there are any error messages generated (see below), and take it from there.

Accessing the browser console

Most browsers have a helpful console where any javascript error messages are displayed. These can often give a clue to the problem. Accessing the console varies from browser to browser.

  • Firefox: If you’re using Firebug click the icon to launch Firebug and access the Console tab. You’ll need to load the page after launching Firebug.
  • IE9: Access Developer tools via F12, and then click the Console menu item. You’ll need to reload the page after launching tools.
  • Chrome: Developer tools are Ctrl+Shift+I, then Console tab.
  • Safari: Develop > Start Debugging Javascript
  • Opera: Ctrl+Shift+I to launch Dragonfly, then the Scripts tab (not the Console tab)

Console errors in 15 seconds

Any of the first four issues in the checklist at the top of the page will generate this (or a very similar) error ($ is not defined) – for example (from Chrome):

Chrome console screenshot $ is not defined error

If your javascript/jQuery has a syntax error, then the console will tell you where it is, and what it thinks is wrong. For example (from Firebug):

Firebug console screenshot showing the location and description of a jQuery syntax error

It’s obviously not feasible to list every possible console error here. If you see something in the console that doesn’t make sense to you, the best bet is to copy the message and Google it. Here’s some more information on using the console to debug.

Tags:

13 responses to “Debugging jQuery – a beginner’s guide”

  1. karel says:

    First of all, thanks for the code + explanation.
    The script works at my page, however, the first 4 cycles go wrong.
    It’s changing the opacity of the first 4 images all together, then the first 3 elements, then first two, then te first one.
    After this the script works as it should be.
    I’m trying to find out what’s going wrong with my book ‘learning Jquery’.
    Any idea?

  2. Simon says:

    Hard to help much as you haven’t said which script you’re having problems with. Assuming you’ve been through the suggestions on this page, then it might be a problem with your html – the jQuery is correct but possibly your html means more then one element is selected, causing the issues you describe.

  3. kavita says:

    Thank you very much its really useful.
    But I want to stop on last image how can I do that?
    I want to run cycle only once and it should stop on last image.

    Thanks

  4. Simon says:

    If you have a look at the Variations section you’ll see a link to this demo.

  5. Kate says:

    The crossfade is working for me but the there seems to be some text behind it that I cant bring down and also the navigation bar wont drop down over the crossfade?

  6. Simon says:

    Kate
    Not sure what you mean by text that you can’t bring down… The navigation bar should be fixable by setting the z-index for the the element containing the navigation. Without seeing your html I can’t say exactly where this will be. Post a link to your site if you like.

  7. cool i’m new in jquery and it’s all really useful for me thanks

  8. Rod says:

    Your code and explanation are both useful & interesting. I now have photos fading and cycling in Safari on iPhone, iPad and macs (once I’ve cleared the cache).
    Is there a way to code for automatic cache clearing?
    Also a friend reports all photos are showing at once side by side with firefox on mac, even after clearing cache. Each photo fades, but all show. Any thoughts?

  9. Simon says:

    I guess you’re talking about forcing reload of a css file after a change. A simple way to do this is to add a query string to your css link adding (say) a version number.
    The Firefox issue does sound like a cache, but if it’s definitely not then there may be some issue with the css which is causing Firefox not to parse it properly. Check it with a validator and then use Firebug to see what css is being applied to an element.

  10. hvdb says:

    Is it possible, when crossfading 2 (or more) images, that the ‘fading-level'(from img1 to img2) is ‘controlled’ by the position of a scrollbar?
    i would like to have on a website the possibility to ‘compare’ an old photo to a new one, but ‘slowly’, with a scrollbar. 😉

  11. Simon says:

    Yes, you could do this. I’d use either UI Slider or jQuery Mobile Slider, and link the fade via .fadeTo() to the value of the slider.

  12. ali says:

    hi please help my slide show is working but the only thing is that it is on the left hand side. I want it to to be in the middle, i have tried few steps but it didnot work please can you help.

    As the images are in div and i am new to div options

  13. Simon says:

    Sounds like you’re just missing some css. Google ‘how to centre a div with css’ if you need more help.

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.