jQuery/JavaScript issues in Safari PC/Mac

Question

Hey,

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.

Answer 2

The main problem I see is that you are throwing a Parse error because of using the variable name class in your two .MAIL .livequery statements. Just change that variable name (it appears 10 times in those two functions) like this:

// SAFE EMAIL //
$(".MAIL").livequery( function() {
    var email = $(this).attr("id");
    var className = $(this).attr("class");
    className = className.substr(5);

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

    document.getElementById(email).innerHTML = email+"@"+ext;
    $(this).attr("title","");
});

$(".MAIL").livequery("click", function() {
    var className = $(this).attr("class");
    className = className.substr(5);

    var ext
    if ( className == "ccm" ) {
        ext = "cultureconquest.com";
    }
    if ( className == "gmail" ) {
        ext = "gmail.com";
    }
    var email = $(this).attr("id")+"@"+ext;
    var mailto = "mailto:"+email;
    window.location = mailto;
});