asked on

problem with refresh on a html menu system I have created (it will not refresh on pressing back )

I have created this menu system, but when I press back on a browser, it does not go back to the previously clicked on button :

I wonder if its the code i am using, in that it does not allow this to happen. I have included the pics for the menu also :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;	
}
-->
</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<style>
        .inputImage
        {
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
        <script type="text/javascript">
                var buttonIDClicked
                buttonIDClicked = '';
                var img = [];
                img['Button1'] = [];
                img['Button1']['up'] = 'button22-up.jpg';
                img['Button1']['over'] = 'button22-over.jpg';
                img['Button1']['normal'] = 'button22-normal.jpg';
                img['Button1']['down']  = 'button22-down.jpg';
                img['Button2'] = [];
                img['Button2']['up'] = 'button23-up.jpg';
                img['Button2']['over'] = 'button23-over.jpg';
                img['Button2']['normal'] = 'button23-normal.jpg';
                img['Button2']['down']  = 'button23-down.jpg';
                img['Button3'] = [];
                img['Button3']['up'] = 'button24-up.jpg';
                img['Button3']['over'] = 'button24-over.jpg';
                img['Button3']['normal'] = 'button24-normal.jpg';
                img['Button3']['down']  = 'button24-down.jpg';
				
                
                function doRollOver(buttonID){
			 		if( buttonID.src.indexOf("down.jpg") > -1 )
					{
					return;
					}
                        else if (buttonID.src.indexOf(img[buttonID.id]['up'])==-1)
                        {
                           buttonID.src = img[buttonID.id]['over'];
                        }
                }
				
                function doClick(buttonID, down){
                        clearAllButtons();
                        buttonIDClicked = buttonID.getAttribute('ID');
                        buttonID.src = img[buttonID.id][(down ? 'down' : 'up')];
                }
                
                function doRollOut(buttonID){
                        if(buttonID.getAttribute('ID')!=buttonIDClicked){
                                buttonID.src = img[buttonID.id]['normal'];
                        }
                }
                
                function clearAllButtons(){
                        var myButton
                        for(var i=1;i<=10;i++){
                                myButton = document.getElementById('Button'+i);
                                if(myButton && (myButton.src.indexOf(img[myButton.id]['down'])==-1)){
                                        myButton.src = img[myButton.id]['normal'];
                                }
                        }
                }
    </script>
 
</head>
<body onload="clearAllButtons()">
<form action="#" method="post">
        
 
  
<a href="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\page1.htm&quot;)"><img id="Button1" class="inputImage" src="button22-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"></a>
  
<a href="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\help\page2.htm&quot;)"><img id="Button2" class="inputImage" src="button23-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"></a>
  
<a href="scriptcode1:Browser(&quot;Browser&quot;,&quot;<SrcDir>\help\page3.htm&quot;)"><img id="Button3" class="inputImage" src="button24-up.jpg" onmouseover="doRollOver(this);" onmouseout="doRollOut(this);" onmouseup="doClick(this);" onmousedown="doClick(this, true);" ondragstart="return false" onselectstart="return false"></a>
 
 
 
</body>
</html>

Open in new window

menu-example.zip

scrathcyboy

This is a javascript menu, right? Which means the content is dynamically adjusted inline in the page. This is not counted as a new page (neither is a page refresh counted as a new page) in IE. IE's back history has only the discreet pages that you viewed, not each adjustment to each page, such as a JS menu. Try the back button on Firefox, you might be surprised to see that FIrefox DOES record these in-page changes, and IE does not. In which case, it is a function of the browser, not your pages.

nathan1038

ASKER

Yes this is JAvascript based BUT, I actually need this to work for IE, as I am building an application that
can have browsers (browser elements inside it ) inside it, but the browser is IE based.

So what can I do ! Can this problem be solved by adding some more javascript or some kind of work around.
to make the browser / fool the browser into thinking it is a normal html page, rather than a javascript one, even though it will be javascript

scrathcyboy

IE's back history is based on the history of pages you clicked on, and in what sequence. If you clicked --

page1 -- page3 -- page3 (refresh) -- page 1

the history would show page 1, page 3, page 1

So .... consider ways to make a separate page click, and then a refresh, and the page should show --

page 1 -- page 3 -- subpage 4 -- page 3 (refresh)

now you get in the history, page 1, page 3, subpage 4, page 3 refreshed

Before you tear your hair out, you really NEED to try this on Firefox -- see if it is an IE only problem.

nathan1038

ASKER

Hi there scrathcyboy, I think this is an IE only problem. I kinda see what your saying, its my way of saying,
can i find a work around. However, although i kind of see what your saying, I would not know how to incorporate that into the code above - any ideas !

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nathan1038

ASKER

Hi there scrathcyboy, thanks for getting back to me. I have changed my code to yours. One thing I did not mention is that I am using this menu in a program called Multimedia builder, that has browser objects.

(basically u draw what size browser you want, and the website loads in there (hence the 0 margin to 0 the
location)

The multimedia browser object is based on IE / only works on IE. Hence the code you see at the bottom - which is not really html.

Down to business - Are you telling me that you know for sure that this code works for histories ( as it
does not work for me in multimedia builder when i click on back ) If you are telling me it works then it
is a problem with multimedia builder

scrathcyboy

if you had mentioned multimedia builder AT THE OUTSET, it would have saved me a LOT of time, trying to debug a problem that is only because of that. The history works fine as I gave it to you. Good LUCK !!

nathan1038

ASKER

Oh, I am so sorry I did not mention that at the beginning as I can see that has caused you to waste your time. I can but only apologize. ( I really an sorry and hope u can forgive me )