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
180 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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

708 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

21 Experts available now in Live!

Get 1:1 Help Now