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
188 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 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