Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Moving around between multiple pages 1

Status
Not open for further replies.

MrMuggles31

Technical User
Aug 7, 2010
22
US
I will make this question short -
I have 10 HTML pages labeled 01, 02, 03, etc. Those 10 pages make up a computer based training module, so the user needs to begin with page 01, and move forward with each new page by pressing a forward button (think of it as reading a book from beginning to end). They can also move backward with a back button.
I want to have one JS file that has all the pages listed, so when the user clicks the forward or back button, the JS knows what page it is on, and then move forward or backward based on that list. This will eliminate the need to update the forward and back button for every page.
The problem is I cannot get that to work properly. The JS code is listed below:

Code:
function menu_goto( menuform )
{
	var baseurl = '' ;
	selecteditem = menuform.url.selectedIndex ;
	newurl = menuform.url.options[ selecteditem ].value ;
	if (newurl.length !== 0)
	{
		location.href=baseurl + newurl ;
	}
}
function move_selected(direct,menuform)
{
	[COLOR=gray]//get the dropdown object to perform the operations[/color gray]
	var drp=menuform.url;
	[COLOR=gray]//Check what button was pressed and act accordingly. The button can send the value you choose.[/color gray]
	if(direct=='back')
	{
		[COLOR=gray]//Check that the dropdown can still be moved back one position, so the selected index has to be at least the second option[/color gray]
		if(drp.selectedIndex > 0)
		{
			[COLOR=gray]//Change the selected option by substracting 1 from the current selectedIndex[/color gray]
			drp.selectedIndex=parseInt(drp.selectedIndex) - 1;
		}
	}
	if(direct=='forward')
	{
		[COLOR=gray]//Check that the dropdown can still be moved forward one position, so the selected index has to be at least the second option[/color gray]
		if(drp.selectedIndex < 4)
		{
			[COLOR=gray]//Change the selected option by adding 1 from the current selectedIndex[/color gray]
			drp.selectedIndex=parseInt(drp.selectedIndex) + 1;
		}
	}
	if(direct=='home')
	{
		drp.selectedIndex=0;
	}
	[COLOR=gray]//... Other If statements to check if the down, or forward button, or the home button may hav been pressed, and act accordingly.
	//Fire the dropdown's onChange event so it runs your menu_goto() function.[/color gray]
	drp.onchange();
}
document.writeln( '<form action="chgoto" method="get">' );
document.writeln( '<select name="url" class="dd" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="index.html">First</option>' );
document.writeln( '<option value="02.html">Second</option>' );
document.writeln( '<option value="03.html">Third</option>' );
document.writeln( '<option value="04.html">Fourth</option>' );
document.writeln( '<option value="05.html">Fifth</option>' );
document.writeln( '</select>' );
			
[COLOR=gray]//Write the buttons as you need.[/color gray]
document.writeln( '&nbsp;' );
document.writeln( '<input type=button class="backb" onClick="move_selected(\'back\',this.form); return false;">' );
document.writeln( '<input type=button class="forwardb" onClick="move_selected(\'forward\',this.form); return false;">' );
document.writeln( '<input type=button class="homeb" onClick="move_selected(\'home\',this.form); return false;">' );
document.writeln( '</form>' );

Yes, this does have a dropdown list in the code, but it does not necessarily need to be in there if there is an easier way to manage the information.

Here is the HTML code for page 1:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mr EJT</title>
<link href="t1.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="88" valign="top" class="topo"><div class="header_title">EJT Example</div>
    <div class="header_subtitle">Page 1</div>
    </td>
  </tr>
  <tr>
    <td height="439" valign="top" class="o1"><p>This would be considered Page 1.</p></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="t2">
  <tr>
    <td valign="top"><div><script src="test.js" type="text/javascript"></script>
</div></td>
  </tr>
</table>

</body>
</html>

I was going to use an iframe or a frameset, but we have to comply with 508 compliance, so everything needs to be on one page so the screen reader can read it properly.
Is there an easier solution to this issue, or can this be manipulated so it works for what I am looking for? Thanks in advance.
 
I could have sworn I answered the CSS question in your other thread. For that one, you can put it in the HTML page, it does not need to be inside the js file.


As for this control, as I said in the other thread, you'll need to send the current selected index to the next page so you can dynamically set the selected item in your drop down to the current one and then the forward and back buttons should work automatically.


Code:
function menu_goto( menuform )
{
    var baseurl = '' ;
    selecteditem = menuform.url.selectedIndex ;
    newurl = menuform.url.options[ selecteditem ].value ;
    if (newurl.length !== 0)
    {
        location.href=baseurl + newurl [red]+ "?selIndex=" + selecteditem[/red];
    }
}

//Create a function to get the sent value, and then use it to set the drop down to the appropriate option. 

function set_selectedPage(){

var dropdown=menuform.url;

var page=window.location.href;

var parts=page.split("?");

var selectedPage=parts[1].split("=");

dropdown.selectedIndex=selectedPage[1];

}




Now if JS is not mandatory, A server side language might make it easier to manage, and since all it delivers to the client is HTML you don't have to worry about compatibility issues with the screen readers.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Perhaps I am missing something. The code you provided - does that all get added into my current JS? Do I keep the function move_selected(direct,menuform), and add everything else you provided above that?
I have tested this out, and nothing changes. The dropdown does not move past First, even when I select a new option from the dropdown. I can move forward to Page 2, and move back to Page 1, but nothing else changes. I must be missing something with this code and what you have provided thus far. Is there more to it that I am not seeing?
 
I forgot to mention, you need to call the new function in the onload event of your pages so that it gets set adequately. I also forgot to check for the existence of a value.



Code:
<body onload="set_SelectedPage();">
...

And just to make sure a value exists:

Code:
function set_selectedPage(){

var dropdown=menuform.url;

var page=window.location.href;


if(page.indexOf("?")){

var parts=page.split("?");

var selectedPage=parts[1].split("=");

if(selectedPage[0]=="selIndex"){

dropdown.selectedIndex=selectedPage[1];

}
}
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
So should my HTML code look like this:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mr EJT</title>
<link href="t1.css" rel="stylesheet" type="text/css">
</head>

<body onload="set_SelectedPage();">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="88" valign="top" class="topo"><div class="header_title">EJT Example</div>
    <div class="header_subtitle">Page 1</div>
    </td>
  </tr>
  <tr>
    <td height="439" valign="top" class="o1"><p>This would be considered Page 1.</p></td>
  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="t2">
  <tr>
    <td valign="top"><div><script src="test.js" type="text/javascript"></script>
</div></td>
  </tr>
</table>

</body>
</html>

and my JS code look like this:

Code:
// JavaScript Document

function menu_goto( menuform )
{
	var baseurl = '' ;
	selecteditem = menuform.url.selectedIndex ;
	newurl = menuform.url.options[ selecteditem ].value ;
	if (newurl.length !== 0)
	{
		location.href=baseurl + newurl + "?selIndex=" + selecteditem;
	}
}

function set_selectedPage()
{
	var dropdown=menuform.url;
	var page=window.location.href;
	if(page.indexOf("?"))
	{
		var parts=page.split("?");
		var selectedPage=parts[1].split("=");
		if(selectedPage[0]=="selIndex")
		{
			dropdown.selectedIndex=selectedPage[1];
		}
	}
}

function move_selected(direct,menuform)
{
	//get the dropdown object to perform the operations
	var drp=menuform.url;
	//Check what button was pressed and act accordingly. The button can send the value you choose.
	if(direct=='back')
	{
		//Check that the dropdown can still be moved back one position, so the selected index has to be at least the second option
		if(drp.selectedIndex > 0)
		{
			//Change the selected option by substracting 1 from the current selectedIndex
			drp.selectedIndex=parseInt(drp.selectedIndex) - 1;
		}
	}
	if(direct=='forward')
	{
		//Check that the dropdown can still be moved forward one position, so the selected index has to be at least the second option
		if(drp.selectedIndex < 4)
		{
			//Change the selected option by adding 1 from the current selectedIndex
			drp.selectedIndex=parseInt(drp.selectedIndex) + 1;
		}
	}
	if(direct=='home')
	{
		drp.selectedIndex=0;
	}
	//... Other If statements to check if the down, or forward button, or the home button may hav been pressed, and act accordingly.
	//Fire the dropdown's onChange event so it runs your menu_goto() function.
	drp.onchange();
}
document.writeln( '<form action="chgoto" method="get">' );
document.writeln( '<select name="url" class="dd" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="index.html">First</option>' );
document.writeln( '<option value="02.html">Second</option>' );
document.writeln( '<option value="03.html">Third</option>' );
document.writeln( '<option value="04.html">Fourth</option>' );
document.writeln( '<option value="05.html">Fifth</option>' );
document.writeln( '</select>' );
			
//Write the buttons as you need.
document.writeln( '&nbsp;' );
document.writeln( '<input type=button class="backb" onClick="move_selected(\'back\',this.form); return false;">' );
document.writeln( '<input type=button class="forwardb" onClick="move_selected(\'forward\',this.form); return false;">' );
document.writeln( '<input type=button class="homeb" onClick="move_selected(\'home\',this.form); return false;">' );
document.writeln( '</form>' );
 
Yup that's correct.

I made the mistake above, but make sure the function's names are consistent.
Code:
function set_[red]s[/red]electedPage()
{
...


Code:
<body onload="set_[red]S[/red]electedPage();">

Either both are uppercase S or both are lowercase s.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
I am now getting an error when I run the Index page in IE. It is saying that 'menuform' in the JS is undefined. Why is it saying that now?
 
Here this should definitely work now.

Code:
function menu_goto( menuform )
{
    var baseurl = '' ;
    selecteditem = menuform.url.selectedIndex ;
    alert(selecteditem);
    newurl = menuform.url.options[ selecteditem ].value ;
    if (newurl.length !== 0)
    {
        location.href=baseurl + newurl + "?selIndex=" + selecteditem;
    }
}


function move_selected(direct,menuform)
{
    //get the dropdown object to perform the operations
    var drp=menuform.url;
    //Check what button was pressed and act accordingly. The button can send the value you choose.
    if(direct=='back')
    {
        //Check that the dropdown can still be moved back one position, so the selected index has to be at least the second option
        if(drp.selectedIndex > 0)
        {
            //Change the selected option by substracting 1 from the current selectedIndex
            drp.selectedIndex=parseInt(drp.selectedIndex) - 1;
        }
    }
    if(direct=='forward')
    {
        //Check that the dropdown can still be moved forward one position, so the selected index has to be at least the second option
        if(drp.selectedIndex < 4)
        {
            //Change the selected option by adding 1 from the current selectedIndex
            drp.selectedIndex=parseInt(drp.selectedIndex) + 1;
        }
    }
    if(direct=='home')
    {
        drp.selectedIndex=0;
    }
    //... Other If statements to check if the down, or forward button, or the home button may hav been pressed, and act accordingly.
    //Fire the dropdown's onChange event so it runs your menu_goto() function.
    drp.onchange();
}
document.writeln( '<form action="chgoto" method="get">' );
document.writeln( '<select name="url" class="dd" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="index.html">First</option>' );
document.writeln( '<option value="02.html">Second</option>' );
document.writeln( '<option value="03.html">Third</option>' );
document.writeln( '<option value="04.html">Fourth</option>' );
document.writeln( '<option value="05.html">Fifth</option>' );
document.writeln( '</select>' );
            
//Write the buttons as you need.
document.writeln( '&nbsp;' );
document.writeln( '<input type=button class="backb" onClick="move_selected(\'back\',this.form); return false;" value="<<">');
document.writeln( '<input type=button class="forwardb" onClick="move_selected(\'forward\',this.form); return false;" value=">>">');
document.writeln( '<input type=button class="homeb" onClick="move_selected(\'home\',this.form); return false;" value="H">');
document.writeln( '</form>' );

function set_selectedPage()
{
    var dropdown=document.forms[0].url;
    var page=window.location.href;
    if(page.indexOf("?")!=-1)
    {
        var parts=page.split("?");
        var selectedPage=parts[1].split("=");
        if(selectedPage[0]=="selIndex")
        {
            dropdown.selectedIndex=selectedPage[1];
        }
    }
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Sweet, it finally works. . . except that everytime I go to a new page, a pop up window pops up telling me which page I am on (0, 1, 2, 3, 4). Where in the code is it saying to display a pop up window?
By the way, I really, really appreciate your help on this.
 
One last thing while I am thinking about it - if I wanted the dropdown to be displayed, but I do not want it to be able to be used (viewable but cannot use), how would that be accomplished in the code? There are times when we want the user to go through each page without being able to skip around, so disabling the dropdown would be advantageous.
Is that an easy thing to do?
 
Remove this line from menu_goto():
Code:
alert(selecteditem);

That's the pop up.

As far as disabling, you can just set the disabled property in the actual drop down.

Code:
<select name="url" class="dd" onchange="menu_goto(this.form)" disabled=disabled>'

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Absolutely awesome. Thank you so much for your assistance. Everything is working properly. Hopefully I won't have any additional issues with this!
 
Shoot, I spoke too soon. It is now not recognizing the first page (index.html) in the dropdown or when I click on the home button. And when I try to go past page 5, it gives an error message. Does that issue have to do with the last part of the JS file?
 
Disregard. Figured it out. My bad.
Everything is still working properly! Thanks.
 
A quick follow-up question to this, just because we are having minor issues with the drop down list.
I want to add a 'Go' button next to the drop down list, so the page does not change until that button is pressed. What do I need to change in the JS code to make that function properly?
 
Remove the onChange event form the dropdown, and place the call to the function in the button's onClick event.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
The problem now is that once I remove the onChange event, the back, forward, and home buttons do not work. Why is that?
 
Ah, because the function they call fires the onchange event event on the drop down. But since its no longer there, it doesn't work. You'll need to change that too, so it fires the onClick event of the button instead.
I thought you already understood this, its not difficult, its mostly logic.

Code:
 //Fire the dropdown's onChange event so it runs your menu_goto() function.
  [strikeout]  drp.onchange(); [/strikeout]
document.getElementById("buttonID").onclick();
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top