Hi guys,
so earlier today, I wrote this code which successfully changes the html within an element (all of its children elements) on document load, it is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function () {
$('nav#mainNavigation').html('<p>The HTML has been changed.</p>');
});
</script>
</head>
<body>
<nav id="mainNavigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav>
</body>
</html>
Then I tried using the less than IE 9 conditional statement and within it run this script which replaces the content within the <nav> with a <p> that informs the user that there browser is less than IE 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<!--[if lt IE 9]>
<script>
$(document).ready(function () {
$('nav#mainNavigation').html('<p>Your browser is less than IE9, please upgrade.</p>');
});
</script>
<![endif]-->
</head>
<body>
<nav id="mainNavigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav>
</body>
</html>
I know the purpose of this may seem confusing, but my ultimate goal is to change html based on the browser being a version of IE less than IE 9. The script works outside of the conditional-statements when it is executed by all browsers and I am pretty sure the syntax for the less than !( conditional statement is properly written, but it doesnt seem to switch the <ul> with the <p> therefore not execute the script if the browsers is less than IE 9 when I tested it in IE8.
Is there a conflict using the script and the conditional statement or id the conditional statement done wrong. As I mentioned before, the script works fine, but when put in the <IE9 conditional statement, it seems to not be ran even though the conditions are met.
Can someone please help me get this code to work. The <ul> to be replaced if the browser is less than IE 9. I would really appreciate it.
Please let me know if you have any Questions, COmments, Concerns, or Solutions
Thanks in Advance & Best Regards,
Team 1504