And finally, last night, late last night I sat there trying to apply some jQuery code that I’d learned on Codecademy, to a my own file on my own netbook and later onto my web server and found nothing worked. I painstakingly checked the HTML file that linked the jQuery code and the code itself, tried to link to the proper libraries but nothing worked. It was past midnight before I decided to let it go and try another day.
By hook or by crook (but probably by luck) I managed to make something happen in my Firefox browser that was jQuery powered. So, to clear up my confusion I thought I’d investigate and document the code in HTML and the .js file that is almost foolproof with regard to making jQuery tick.
These below are examples of the snippets we can use to link to the jQuery library.
And this is the actual file that contains the jQuery goodness.
The file is correctly linked but there’s no effect because I haven’t included the piece of code that links to the jQuery library. So I’ll add that now by linking to Google as follows.
And voila! We have some jQuery action. But there is one caveat. And this might actually be one of the things that got so stumped last night. When linking to a jQuery library, it is important to make sure it is the first script linked.
So that could be a huge answer to our problem.
Now, the version of jQuery we used via Google was 1.7.2. I also have a link to 1.2.1 and 1.10.1. Let me test those right now.
In place of the google jQuery library link.
<script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script> Worked
<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script> Worked
<script src=”http://code.jquery.com/jquery-migrate-1.2.1.min.js”></script> Migrate plugin and not a jQuery library file as such. Probsly another reason this was not going to work for me last night
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script> Worked
The only logical conclusion is that I did not link jQuery correctly i.e. I did not make the linking script tag, the top most script tag my list of scripts in the HTML document head. Put simply, the link to jquery should be at the very top of any scripts you link in your web pages.
- To make sure jQuery works in your web pages
- Make your you’re linking to a valid version of jQuery.
- Check your script load order
- Of course check that your jquery is valid and functioning code
- If still having problems follow the 6 steps on this page. css-plus.com/2010/03/6-steps-to-take-if-your-jquery-is-not-working/
So all of this is for one little fade effect using CSS, HTML and just a little jquery. Have a go and make this for yourself. You’ll find it on the jquery track of Codecademy where I got the code to work from.
font-family: Verdana, Arial, Sans-Serif;
<link rel=’stylesheet’ type=’text/css’ href=button.css’/>
Mystery solved then I think. Thanks for reading, please don’t forget to check out my website, and catch you later. 🙂