CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
Random Programmer
Random Programmer

Reputation: 51

IE Doesn't run remote JS properly but local runs fine

My page works in every browser except in IE 10. When I run this page locally in IE 10 there seems to be no problem whatsoever, only when I open the page remotely with IE 10.

The JavaScript is supposed to measure the div with main text and set the height and width of the div's that are off-screen. This is done wrong by IE 10. The width of these div's has to be set because otherwise the will not animate in properly when an item from the menu is clicked.

I did a check on deprecated functions but found none. I checked the syntax and nothing wrong there. (as far as i can see) The console in IE does not report any errors.

Anyone any idea as for why locally it works fine in every browser, but remotely the only browser that displays it faulty is IE?

EDIT:

I have removed the function brackets at init so the DOM can initiate, although this did not fix the problem.

script (embedded in the head 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>

Upvotes: 2

Views: 407

Answers (1)

Joe
Joe

Reputation: 2596

Change window.onresize = init(); to window.onresize = init;

As it stands, the init() is trying to run immediately when the JS file is loaded, which is throwing the error because the DOM hasn't loaded yet.

Upvotes: 3

Related Questions