Question

I am almost finished a contract right now, and it appears at the last minute that most of my javascript/jQuery isnt working in Safari on either PC or Mac.

The whole site is designed with progressive enhancement and unobtrusive javascript to turn ?p= links into # hash links, fade pages in and out, and have smooth rollovers – all of which have stopped working for ONLY Safari.

I have read that Safari may be unable to handle large .js files, but my jquery page is under 10k, and I am using a compressed jquery library at about 55k.

Here is what I have now, works in the latest versions of IE, FF, and Chrome – test.cultureconquest.com

Answer 1

Many errors are exposed when I run a jslint of the main body of your code. Lots of little things, like missing semicolons. Other things, like naming a variable “class”, which is a reserved word in JavaScript could be a problem.

You have some logic that can be handled better using real jQuery idioms. For example you do:

var class = $(this).attr("class");
class = class.substr(5);

var ext
if ( class == "ccm" ) {
    ext = "cultureconquest.com";
}
if ( class == "gmail" ) {
    ext = "gmail.com";
}

jQuery has a method to test whether an element contains a class, hasClass()

var ext;
if ($(this).hasClass("ccm")) {
    ext = "cultureconquest.com";
}
if ($(this).hasClass("gmail")) {
    ext = "gmail.com";
}

I also notice you’re using livequery() extension to jQuery. An equivalent method, live() was added in jQuery 1.3. See live() for details.

Those are a few things to look at. If you can get your code to pass a jslint test, I bet you’ll be a lot of the way there to getting it working in Safari.