Question

I’m trying to solve an IE CSS issue by using conditional tags. My jQuery that does the job of tabbed box effect calls an id that is inside the conditional tags. I’ve given new ids to IE so on IE the jQuery is not working. I tried to duplicate the script with the new id in one of the script but the 2 scripts seems to get in conflict.

My jQuery (in between the head tags) is (for all all browsers except IE):

  <script>
var currentTab = 0; // Set to a different number to start on a different tab.

function openTab(clickedTab) {
 var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
 $(".tabbed-box .tabs li a").removeClass("active");
 $(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
 $(".tabbed-box .tabbed-content").hide();
 $(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
 currentTab = thisTab;
}

$(document).ready(function() {
 $(".tabs li:eq(0) a").css("border-left", "none");

 $(".tabbed-box .tabs li a").click(function() { 
  openTab($(this)); return false; 
 });

 $(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});
</script>

And I would need this for IE:

    <script>
var currentTab = 0; // Set to a different number to start on a different tab.

function openTab(clickedTab) {
 var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
 $(".tabbed-box ie-.tabs li a").removeClass("active");
 $(".tabbed-box ie-.tabs li a:eq("+thisTab+")").addClass("active");
 $(".tabbed-box .tabbed-content").hide();
 $(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
 currentTab = thisTab;
}

$(document).ready(function() {
 $(".ie-tabs li:eq(0) a").css("border-left", "none");

 $(".tabbed-box .ie-tabs li a").click(function() { 
  openTab($(this)); return false; 
 });

 $(".tabbed-box .ie-tabs li a:eq("+currentTab+")").click()
});
</script>

Having the 2 scripts in the head conflicts with each other. Maybe there is a way to combine them?

Answer 1

IE Conditional comments are your friend

<!--[if IE]>
<script>
   // The IE script
</script>
<![endif]-->

<![if !IE]>
<script>
   // The script for other browsers
</script>
<![endif]>

IE will only see the first script. All other browers see only the second one.

If you only wish to have this “special treatment” for a certain old version of IE, but newer ones like IE8 or IE9 behave properly and can use the standard script, then write the condition like this:

<!--[if IE lte 6]>
   // The script for IE6 and below
</script>
<![endif]-->

This way only IE 6 and below will see this script. Newer IE versions will use the standard script.

This also allows you to cleanly throw away the special script, once support for these versions of IE is no longer required.