Javascript Show and Hide Divs Reloads Complete Page in IE6

Question

Hello, and thank you for taking a look at this question.

We have developed a website which has a navigation control (Next and Previous buttons) written in Flash. These buttons use ExternalInterface to call a Javascript function in my webpage, e.g. ExternalInterface.call("showPage", pageNum);

My HTML page contains a number of Divs which each represent a single 'screen'. The first Div (screen) has the CSS Display set to 'inline' and all of the remaining are set to 'none'.

The Javascript showPage function which is called when the Flash button is clicked is as follows and it calls the hideShow function:

function showPage(which) {

    if (pagetype == "lo"){
        if(which < 0 && isRunningInFrame()){goPrev();}
        else if (which > maxPageNum && isRunningInFrame()){goNext();}
        else{dsPages.setCurrentRow(which);}
    }

    hideShow('page' + currentRow, 'page' + which);
    prevRow = currentRow;
    currentRow = which; 
}

function hideShow(hideDiv, showDiv){
    if(document.getElementById(hideDiv)!=null){
        document.getElementById(hideDiv).className = "hideDiv clear";   
    }
    if(document.getElementById(showDiv)!=null){
        document.getElementById(showDiv).className = "showDiv clear";
    }
}

This all works well in contemporary browsers and is very responsive. However our client has Internet Explorer 6 on all of their PCs (well they would wouldn't they!) and when you click Next the complete page reloads. I only assume this is happening because I can see in the bottom left corner of the browser (in the grey bar) all of the JPEG images loading. Some of the HTML pages contain approximately 50 'screens' and this is very slow when they all load over and over again.

I would be very grateful if anyone can see why this is happening or could suggest a more efficient approach to this.

Thank you.

Regards

Chris

Answer 1

Pointy may have a point here (no pun intended). A simple guess-suggestion would be to try placing a 'return false;' after your js-call.