MrMuggles31
Technical User
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:
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:
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 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( ' ' );
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.