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
183 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

895 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now