How to create 2 different scripts for 2 browsers (IE+all the rest)
- by Barnabas Nagy
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?
