IE conditional comment help

[Ad Pro]

I am including a conditional comment in my code to solve a couple of problems in IE 6. The site has two themes (two style sheets) one for night and one for day so a javascript file is linked in the head of the page rather than the style sheets directly.

However not all of the styles in the IE 6 style sheets override those in the standard style sheets. Is there a way to make IE 6 ignore the previously linked Javascript file?

What I have is...

<script type="text/javascript" src="js/themechanger.js"></script>

<!--[if lte IE 6]>
<script type="text/javascript" src="js/iethemechanger.js"></script>
<![endif]-->

 

[angelwatt]

The IE CSS should overwrite everything is doesn't like in the other CSS file (that all browsers see). That's just how it works. You could create some JavaScript-fu to delete the link tag for that CSS file, but that seems over kill. Hmm, actually I'm not convinced I completely understand what you're doing.

You might be able to make use of this script. It would go inside the conditional comment area. It essentially looks through each script tage and looks for the one that has a matching src destination as the one we want to remove, then removes that script tag. This code will likely not work until the page is completed loading, so you may need to put it in a function that's called after the onload event.

var scripts = document.getElementsByTagName('script');
var len = scripts.length-1;
do {
  if (scripts[len].src.indexOf('js\/themechanger.js') != -1) {
    scripts[len].parentNode.removeChild(scripts[len]);
    break;
  }
} while (len-- > 0);

* Script untested.

 

[SrWebDeveloper]

Tested PHP Code (server side):

$script=(ieversion()<=6) ? "js/iethemechanger.js" : "js/themechanger.js";
printf("<script type='text/javascript' src='%s'></script>",$script);

function ieversion() {
  ereg('MSIE ([0-9]\.[0-9])',$_SERVER['HTTP_USER_AGENT'],$reg);
  if(!isset($reg[1])) {
    return -1;
  } else {
    return floatval($reg[1]);
  }
}

@OP:

Your message was a bit confusing at first read since you mentioned stylesheets (*.css) but your code involved javascript files (*.js). Based on your exact code as posted above you apparently want to load iethemechanger.js if the browser version is MSIE and less than or equal to 6, otherwise load themechanger.js instead.

The above code I posted does precisely that, if I'm understanding your request. This solution is also server side based if your server supports PHP, since users can disable Javascript. Change the condition in line one to suit your needs.

@angelwatt:

I don't normally post code after you do, but this is a tested server side solution. Looks like your code is Javascript but I see "PHP Code" there? I edited this part as that threw me for a loop (i.e. JS vs. PHP)

-jim

 

[angelwatt]

@angelwatt:

I don't normally post code after you do, but this is a tested server side solution. Looks like your code is Javascript but I see "PHP Code" there? I edited this part as that threw me for a loop (i.e. JS vs. PHP)

-jim

I usually use the PHP markup tags as it gives the color coding unlike the code tags. Your code will likely be more reliable. I wasn't even sure I was following the question anyways. I was thrown off, like you, about the mention of the CSS, but it's really about a JavaScript file.

 

[Ad Pro]

Sorry that the question is a bit confusing, and I can't really link you to the site as its not supposed to be released yet.

I did manage to get the same thing to work by using <![if !IE]><![endif]> around the file I wanted IE to ignore and <!--[if lt IE 7]><![endif]--> around the file i wanted it to see. This is too much of a hack though and doesn't validate. The code you posted also seems a little over the top.

I have been thinking about it though and I think there is a much better and 'proper' way to do it by adding some code to the javascript file which is linked in the head of the page.

This is the javascript file which selects the style sheet depending on the time:

var d=new Date();
var twi_am_start = 4;
var twi_am_end = 3.59;
var twi_pm_start = 20;
var twi_pm_end = 19.59;
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
document.write('<link rel="stylesheet" href="stylenight.css" type="text/css">');
else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start )
document.write('<link rel="stylesheet" href="styleday.css" type="text/css">');

What I want to do is add to this script so that it takes into consideration the browser type/version. for example if the time is between 4am and 8pm and the browser is not IE styleday.css is selected, if again the time is between 4am and 8pm and the browser is less than IE7 iestyleday.css is selected. and the same for the night style between 8pm and 4am.

Thanks for your help so far, much appreciated!