JQuery not working in Internet Explorer 8

Question

I have html as below:

<navi>
    <ul class="fnt_menu_secondo_livello" id="menu_secondo_livello">
        <li><a href="Retailers.aspx" title="Account Set up">Account Set Up</a></li>
        <li><a href="RetailerLogin.aspx" title="Retailer Login">Retailers Login</a></li>
        <li><a href="ManufacturerLogin.aspx" title="Manufacture Login">Manufacturers Login</a></li>
        <li><a href="PriceListRequest.aspx" title="Price List Request">Price List Request</a></li>
        <li><a href="Education.aspx" title="Price List Request">Education</a></li>
    </ul>
</navi>

And I'm using this code to addClass to the current menu:

$(document).ready(function() {
    $('navi a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');
});

This is working fine in other browsers except IE8.

Let me know what is wrong with this.?

Answer 1

To make HTML5 elements work with non html5 compliant browsers you need to include htmlshiv http://code.google.com/p/html5shiv/

also as indicated in other answers it should be nav instead of navi http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element

add the following in the script section

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

and modify the selector like

$(document).ready(function() {
    $('nav a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');
});

here is a blog post(courtesy @Ravi) by John Resig you may find useful http://ejohn.org/blog/html5-shiv/

Answer 2

I think you use nav in place of navi like:

<nav>
    <ul class="fnt_menu_secondo_livello" id="menu_secondo_livello">
        <li><a href="Retailers.aspx" title="Account Set up">Account Set Up</a></li>
        <li><a href="RetailerLogin.aspx" title="Retailer Login">Retailers Login</a></li>
        <li><a href="ManufacturerLogin.aspx" title="Manufacture Login">Manufacturers Login</a></li>
        <li><a href="PriceListRequest.aspx" title="Price List Request">Price List Request</a></li>
        <li><a href="Education.aspx" title="Price List Request">Education</a></li>
    </ul>
</nav>

Note: Internet Explorer 8 and earlier versions, do not support the tag.

Refer http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element

Answer 3

I had a similar issue before, it turned out it was the split method in the javascript. IE doesn't support split in ie8 and lower. If you add this to your js and it should work...

    /* Cross-Browser Split 1.0.1
(c) Steven Levithan <stevenlevithan.com>; MIT License
An ECMA-compliant, uniform cross-browser split method */

var cbSplit;

// avoid running twice, which would break `cbSplit._nativeSplit`'s reference to the native `split`
if (!cbSplit) {

cbSplit = function (str, separator, limit) {
    // if `separator` is not a regex, use the native `split`
    if (Object.prototype.toString.call(separator) !== "[object RegExp]") {
        return cbSplit._nativeSplit.call(str, separator, limit);
    }

    var output = [],
        lastLastIndex = 0,
        flags = (separator.ignoreCase ? "i" : "") +
                (separator.multiline  ? "m" : "") +
                (separator.sticky     ? "y" : ""),
        separator = RegExp(separator.source, flags + "g"), // make `global` and avoid `lastIndex` issues by working with a copy
        separator2, match, lastIndex, lastLength;

    str = str + ""; // type conversion
    if (!cbSplit._compliantExecNpcg) {
        separator2 = RegExp("^" + separator.source + "$(?!\\s)", flags); // doesn't need /g or /y, but they don't hurt
    }

/* behavior for `limit`: if it's...
- `undefined`: no limit.
- `NaN` or zero: return an empty array.
- a positive number: use `Math.floor(limit)`.
- a negative number: no limit.
- other: type-convert, then use the above rules. */
if (limit === undefined || +limit < 0) {
    limit = Infinity;
} else {
    limit = Math.floor(+limit);
    if (!limit) {
        return [];
    }
}

while (match = separator.exec(str)) {
    lastIndex = match.index + match[0].length; // `separator.lastIndex` is not reliable cross-browser

    if (lastIndex > lastLastIndex) {
        output.push(str.slice(lastLastIndex, match.index));

        // fix browsers whose `exec` methods don't consistently return `undefined` for nonparticipating capturing groups
        if (!cbSplit._compliantExecNpcg && match.length > 1) {
            match[0].replace(separator2, function () {
                for (var i = 1; i < arguments.length - 2; i++) {
                    if (arguments[i] === undefined) {
                        match[i] = undefined;
                    }
                }
            });
        }

        if (match.length > 1 && match.index < str.length) {
            Array.prototype.push.apply(output, match.slice(1));
        }

        lastLength = match[0].length;
        lastLastIndex = lastIndex;

        if (output.length >= limit) {
            break;
        }
    }

    if (separator.lastIndex === match.index) {
        separator.lastIndex++; // avoid an infinite loop
    }
}

if (lastLastIndex === str.length) {
    if (lastLength || !separator.test("")) {
        output.push("");
    }
} else {
    output.push(str.slice(lastLastIndex));
}

return output.length > limit ? output.slice(0, limit) : output;
};

cbSplit._compliantExecNpcg = /()??/.exec("")[1] === undefined; // NPCG: nonparticipating capturing group
cbSplit._nativeSplit = String.prototype.split;

} // end `if (!cbSplit)`

// for convenience...
String.prototype.split = function (separator, limit) {
    return cbSplit(this, separator, limit);
};

Answer 4

i don't think there is a valid html tag called <navi>... it sould be <nav> if i am not wrong

and your selector,

 $('nav a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');