Solved

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

Posted on 2008-10-08
8
187 Views
Last Modified: 2012-05-05
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
Comment
Question by:nathan1038
  • 4
  • 4
8 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22672308
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
 

Author Comment

by:nathan1038
ID: 22672578
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22672948
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:nathan1038
ID: 22673420
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
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22673924
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
 

Author Comment

by:nathan1038
ID: 22674238
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22674422
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
 

Author Comment

by:nathan1038
ID: 22676502
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question