SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question help with IE conditional statement not working

    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:
    Code HTML4Strict:
    <!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
    Code HTML4Strict:
    <!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

  2. #2
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The forum will not let me edit any more, but I just wanted to point out that according to this:

    I am pretty sure I wrote the conditional statement correctly and I know the code is written correctly because it runs on its own without the conditional comments.

    I am using the conditional-statement wrong, does the script have to be in a separate file, and then linked in the conditional comment, or did I make some ridiculously stupid mistake that I am not seeing?

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The conditional statement is not the problem. The problem is that you're using HTML5 elements that are unknown to Internet Explorer < 9 (e.g. nav), and since Internet Explorer doesn't recognize them, your Javascript function doesn't trigger anything.

    To make the test, replace nav with div and you'll see that your function works as expected.

    If you must use html5 for whatever reason, then your only solution is to create DOM elements that are recognized by IE and thus allow for CSS styles to be applied.

    That means lots of extra scripting. Modernizr would be one of those scripts.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you could use conditional statements to create <div>s for UAs that can't handle unknown tags' style.

    Since the html implementation for those UAs probably stops at HTML 4.01 or XHTML 1.0, they treat <nav> like an unknown element rather then a HTML5 element.

    You could also use conditional statement to create additional CSS rules, specifically targeting those UAs, for those unknown elements, like <nav>.

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another item to consider is that I've only seen very simple "look what you can do with conditional comments" demos that worked with this style of code reliably. I've always had poor consistency with conditional comments that directly wrap code. To get conditional comments to behave properly, I typically only use them to wrap a link element in the document head for an IE specific stylesheet or a script tag before the closing body tag for an IE specific .js file. Otherwise, I've had results similar to yours where it doesn't work the way it's supposed to, and I've run across blogs where other developers have had similar results.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •