jQuery crashing Internet Explorer

Question

Hello.

Okay basically, I'm designing and developing a fairly complicated website which revolves around the use of jQuery.. My knowlege of jQuery is really poor and this is the first time I've properly used it. I posted a question here before about the script and apparently its awful, but I didn't show you exactly what I was actually writing it for, which I can now.. Because I've uploaded it onto a test directory. It now works fine in every browser other than IE. The CSS styling is getting there and it should be close to finish soon! However, Internet Explorer is showing bad problems.. In IE 7,8 it looks fine but when you go to hover over a link, it immediately crashes. IE 6, the display doesn't seem to be working properly at all. But IE 6 is a lesser problem.

If you could take just 5 or 10 minutes to potentially rewrite a simple script which would potentially take me 10 hours, I would be so so grateful! Heres the site - http://openyourheart.org.uk/test/index.html

I can send all the files zipped if required.

Thankyou in advance.

Bradley

Answer 1

There is a lot of things you should be doing on your page.

1) For production always used a minified version of jQuery. Better yet, Use jQuery from a CDN like google so the chances that jQuery is already cached in the clients browser increases and the time for it to load is reduced.

Right now your jquery is 160kb instead use this in your header :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

2) Sliding panel (http://www.openyourheart.org.uk/test/scripts/jquery.slidingpanels.js) gives a 404 - check if you have the script in the correct location).

3) Right now there are 8 HTTP requests just for JavaScripts. The more javascripts you can put into one file and minifiy(YUI Compressor) the better. Each Javascript will load and will stop everything else from loading on your page until it loads and because these are on top. The whole page will take a very long time to load.

Use a tool like Firebug(Net tab) Addon in firefox to see how many files are being loaded and how big they are.

4) I think there is room for the images to get smaller(A single facebook yellow image is 500kb -- your background is 1.3MB - Love Hurts is 590KB) You've got 2 MB between 3 images -- imagine someone with a dialup connection trying to get to your site.
Your background anyways doesn't have much detail - In photoshop if the quality goes down to 6-8 i don't think it will make too much of a difference.

5) Other smaller images can be made into PNG and minified they will come down in size drastically. For PNG files you can use utilities like OptiPNG and others to reduce the size of png images -- i think that particular image(facebook) should come below the 25kb range once made png and minified.

6) Consider GZip compression for your webpages.

I Haven't seen this in IE as yet because there is so much that should basically change in the website itself. Once you've optimised your website, I think it sould work in IE unless there is a specific IE related issue with one of your JavaScripts(hint, look at the documentation for the plugins for known IE related issues).

Higher load times are bad for SEO as well as google has considered load time as a SEO parameter. In firefox Firebug you can install an addon called YSlow! this will help you track other things you can do.

Answer 2

After investigating deeper into the crashing, I discovered that only two of the boxes were actually causing the crashes. Experienting with the script, I found that the fade In images were causing it and if I took them away it worked fine.. Sooo, I looked for differences between the divs were the images were fading into and found that the crashing boxes had an ID aswell as a class.. This seemed to be effecting it?! I removed the ID and just left the "blank square" classes and it worked without crashing.

Original -

<div id="row1square2" class="blank square">
  <div class="square whoweare">ESTABLISHED<br/>FOR OVER<br /><span id="thirtyyears">30 YEARS</span></div>

New Version -

<div class="blank square">
  <div class="row1square2 square whoweare">ESTABLISHED<br/>FOR OVER<br /><span id="thirtyyears">30 YEARS</span></div>   

I have no idea, why this would be having an effect, but the site is very close to completion and coming and great thanks to all your help and comments, I've tried to implement and continue working on your suggestions. I do have one other issue, which I cant seem to resolve, so I've posted it as a new question here..

http://stackoverflow.com/questions/2941172/hide-horizontal-scrollbar-in-ie-7-and-below

Thanks Again, Bradley