For some reason, my webpage functions perfectly in all browsers except for IE 10. Oddly enough, when I test the page locally on IE 10, there are no issues whatsoever; the problems only arise when accessing the page remotely using IE 10.
The JavaScript code is meant to calculate the dimensions of the main text div and adjust the height and width of the off-screen divs accordingly. However, IE 10 seems to mishandle this calculation. It is crucial to set the width of these off-screen divs to ensure they animate correctly when an item from the menu is clicked.
I carefully inspected the code for any deprecated functions but found none. The syntax appears to be correct as far as I can tell. Surprisingly, the console in IE does not show any error messages.
Can anyone shed light on why the page works flawlessly across all browsers locally, yet only displays incorrectly on IE when accessed remotely?
EDIT:
I tried removing the function brackets at initialization so that the DOM could initialize properly, but unfortunately, this did not resolve the issue.
Here's the script embedded in the head section of the page:
<script src="scripts/jquery-1.10.1.min.js"></script>
<script>
var mainTextDiv = null;
var animate;
var acc = 0;
var currentTab = "home";
var nextTab;
var working = 0;
var bar = 600;
var divW;
function init(){
onWC(currentTab);
document.getElementById(currentTab).style.width = 'auto';
divW = document.getElementById(currentTab).offsetWidth;
document.getElementById("home").style.width = divW + "px";
document.getElementById("profile").style.width = divW + "px";
document.getElementById("news").style.width = divW + "px";
document.getElementById("forums").style.width = divW + "px";
document.getElementById("webshop").style.width = divW + "px";
document.getElementById("status").style.width = divW + "px";
}
function onWC(tab){
var divh = document.getElementById(tab).offsetHeight;
document.getElementById('tabcontainer').style.height = ( divh + 50 ) + "px";
}
function moveDiv(tabName){
if (currentTab == tabName){
return;
}
if (working == 1){
return;
}
working = 1;
nextTab = tabName;
removeDiv();
}
function removeDiv(){
mainTextDiv = document.getElementById(currentTab);
mainTextDiv.style.left = parseInt(mainTextDiv.style.left) + (0.5+acc) + "px";
if (parseInt(mainTextDiv.style.left) > 2000){
mainTextDiv.style.left = 2000 + "px";
onWC(nextTab);
getDiv();
return;
}
acc += 0.15;
animate = setTimeout(removeDiv,10);
}
function getDiv(){
mainTextDiv = document.getElementById(nextTab);
mainTextDiv.style.left = parseInt(mainTextDiv.style.left) - (0.5+acc) + "px";
if (parseInt(mainTextDiv.style.left) <= 0){
mainTextDiv.style.left = 0 + "px";
currentTab = nextTab;
working = 0;
return;
}
acc -= 0.15;
animate = setTimeout(getDiv,15);
}
window.onload = init;
window.onresize = init;
$(function() {
$("#menu ul li a").hover(
function(){
$(this).css("background-color", "#525252");
$(this).css("color", "#FFF");
},
function() {
$(this).css("background-color", "#FFF");
$(this).css("color", "#525252");
}
);
});
</script>