• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

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
0
nathan1038
Asked:
nathan1038
  • 4
  • 4
1 Solution
 
scrathcyboyCommented:
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.
0
 
nathan1038Author Commented:
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  
0
 
scrathcyboyCommented:
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.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
nathan1038Author Commented:
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 !
0
 
scrathcyboyCommented:
In your case you had some major errors in your code -- here is the corrected code below.
If you will complete the page a bit more, you will find that the IE history now works, at least it does in IE6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
<!--
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #000000;      
}
 
  .inputImage
        {
            border: 1px solid black;
            cursor: pointer;
        }
-->
    </style>
<SCRIPT language="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>
 
 
 </form>
</body>
</html>

Open in new window

0
 
nathan1038Author Commented:
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
0
 
scrathcyboyCommented:
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 !!
0
 
nathan1038Author Commented:
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 )  
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now