Moving forward and back in a dropdown list

[MrMuggles31]

This question really should be an easy one to answer, but for the life of me, I cannot figure out what to search for in Google, nor how to code it. Here is the situation -
I have an HTML file that has a JavaScript drop down list. The JavaScript file is:

function menu_goto( menuform )
{
var baseurl = '[URL unfurl="true"]http://www.cnn.com/'[/URL] ;
  selecteditem = menuform.url.selectedIndex ;
  newurl = menuform.url.options[ selecteditem ].value ;
  if (newurl.length != 0) {
    location.href = baseurl + newurl ;
  }
}
document.writeln( '<form action="chgoto" method="get">' );
document.writeln( '<select name="url" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="01.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>' );
document.writeln( '</form>' );

Pretty simple stuff. The HTML file just has this JS added where I want the drop down to show up.
The question is - now that I have a drop down list, how can I add a Next, Previous, and Home button that goes to the next or previous option on the list, or to the first option when the user clicks Home? So if the user is on Third, they would click on Next, it would go to Fourth, click on previous it would go to Second, or click Home and it would go to First. Obviously putting goforward or goback would not work because that would put the user forward or back based on there browsing history. I want it to be tied into the list. Any ideas? Any websites I can visit that has a good example of this? I am hoping the issue is an easy solution. Thank you all in advance.

 

[BillyRayPreachersSon]

A good starting point would be to investigate reading the 'selectedIndex' property of the <select> element - it gives you the currently selected item.

You can also write to this property.

Having said that, why on earth would you want to add code to do what you already have? The user can simply choose the option from the drop-down with the mouse or keyboard as it stands, and it is a very familiar paradigm. Why screw with it?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[MrMuggles31]

A fair enough question. I work with CBTs on a regular basis, and each CBT has on average about 50 slides or pages. These are all coded in HTML. One of the requirements is to have a drop down list so we can view any of the pages quickly and easily without having to manually find it.
But, when it is set up for a user to go through the CBT, there only option is to use the next and previous buttons (along with the Home button) to advance to the next or previous slide. The drop down list is still present, but it cannot be used if you do not have the rights to use that option (these are all connected with an LMS system with username and password security).
So what I am trying to create is one object (the JavaScript piece) that controls the order of the slides, and a next, previous, and home button that correspond with the order of the slides that are in the JavaScript file. I believe this is the easiest solution because we tend to add and remove slides all the time, so rather than having to update every page to make the changes, we only need to update one file, and everything else works from that file. Make sense?
So do you happen to have any simple solutions to accomplish this? Perhaps expanding more on your first comment about investigating the 'selectedIndex' property and also writing to the property. I don't know if I am completely understanding what you are talking about. Thanks.

 

[vacunita]

Following Dan's advice you'll need to give your drop down an ID so you can access it using getElementById just to make it easier. but you can access it through the form if you wan to.

Other than that, its just a matter of changing the selected index, and then firing the the onChange event of your dropdown.

<script>
function move_selected(selAction){
  var thedropdown=document.getElementById('urID');

  if(selAction=='back'){
    thedropdown.selectedIndex=parseInt(thedropdown.selectedIndex) - 1;

 }
...

thedropdown.onchange();

}
</script>

<input type=button value="<<" onClick="move_selected('back'); return false;"><input 
...

You may want to do some checking on the current selected index so you don't move it past the existing options.







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

http://behindtheweb.blogspot.com/

 

[MrMuggles31]

Is the example you provided all JavaScript? How would I code and display it in the HTML file?
I have been struggling in understanding JavaScript, so I do not quite understand everything you are talking about (getElementById, onChange event, selected index, etc), but I have been reading up on the different parts you are pointing out. Any suggestions on where I can go to get further information about this? Anything else to add that might make this easier to code (perhaps what you have all ready provided is the easiest way, but I thought I would ask)? Thanks.

 

[vacunita]

Yes, its all Javascript. There's the HTML button at the end. But you can use another document.writeln() to output it if you need to.

Basically getElementById is a function that returns an object based on its ID so you can manipulate it.

As I said, you could also access it using the form if you send the parameter to the function, like you do in your own menu_goto(this.form) function.


selectedIndex is the currently selected option of the drop down in question. It can be read to find out what it is, or it can be set so you can change the selected option.

Basically what my example is doing, is simply adding a button to move the selected option of the drop down up 1 option. So if the selected option is say "Third" the button would move it up to Second when clicked. If you click it again it moves up to "First".


The onChange event is the one you are already using in your code to run your menu_goto() function when a choice is made from the drop down. So my code is doing is calling that event so it executes your menu_goto() function.

As far as learning about this I suggest w3schools They have me pretty good tutorials, with examples you can try out on their website.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

http://www.w3schools.com/jsref/prop_select_selectedindex.asp

http://www.w3schools.com/jsref/event_onchange.asp

I'll incorporate the button and the function into yo code, so yo can see more or less how it should work.

[gray]
function menu_goto( menuform )
{
var baseurl = '[URL unfurl="true"]http://www.cnn.com/'[/URL] ;
  selecteditem = menuform.url.selectedIndex ;
  newurl = menuform.url.options[ selecteditem ].value ;
  if (newurl.length != 0) {
    location.href = baseurl + newurl ;
  }
}
[blue]
function move_selected(direct,menuform){
[green]//get the dropdown object to perform theoperations[/green]
   var drp=menuform.url;
[green]//Check what button was pressed and act accordingly. The button can send the value you choose, I chose "back", you may want "up" instead. [/green]
   if(direct=='back'){
[green]//Check that the dropdown can still be moved back or up one position, so the selected index has to be at least the second option [/green]
	if(drp.selectedIndex >= 1){

[green]//Change the selected option by substracting1 from the current selectedIndex[/green]
          drp.selectedIndex=parseInt(drp.selectedIndex) - 1;
         }

  }
[green]//... Other If statements to check if the down, or forward button, or the home button may hav been pressed, and act accordingly.[/green]

[green]//Fire the dropdown's onChange event  so it runs your menu_goto() function.[/green]

drp.onchange();
}
[/blue]
document.writeln( '<form action="chgoto" method="get">' );
document.writeln( '<select name="url" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="01.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>' );
[/gray]
[blue]
[green]//Write the buttons as you need. [/green]
document.wirteln('<input type=button value="<<" onClick="move_selected(\'back\',this.form); return false;">

[/blue][gray]
document.writeln( '</form>' );
[/gray]

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

http://behindtheweb.blogspot.com/

 

[MrMuggles31]

I appreciate all the info. I am currently working through this to see how it will work (hoping I can get it to work). If I have any other issues or questions, I will let you know. Thank you.

 

[MrMuggles31]

I made updates to the JS piece, and inserted it into the HTML file. The dropdown works, but the forward and back button do not. They all end up going back to page 1. What is in the JS that is not correct?

// 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 ;
	}
}
function move_selected(direct,menuform)
{
	//get the dropdown object to perform theoperations
	var drp=menuform.url;
	//Check what button was pressed and act accordingly. The button can send the value you choose.
	if(direct=='up')
	{
		//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 >= 1)
		{
			//Change the selected option by substracting 1 from the current selectedIndex
			drp.selectedIndex=parseInt(drp.selectedIndex) - 1;
		}
	}
	if(direct=='down')
	{
		//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 >= 1)
		{
			//Change the selected option by adding 1 from the current selectedIndex
			drp.selectedIndex=parseInt(drp.selectedIndex) + 1;
		}
	}
	//... 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" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="01.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( '<input type=button value="<<" onClick="move_selected(\'up\',this.form); return false;">' );
document.writeln( '<input type=button value=">>" onClick="move_selected(\'down\',this.form); return false;">' );
document.writeln( '</form>' );

 

[vacunita]

Here:

 //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 >= 1)

You want to check there's options ahead of the current one to move the selection, however you are checking only if the position is above or equal to the second one. You would need to check that the position is at least 1 less than the last one in the dropdown so:

        if(drp.selectedIndex [red]< [/red][blue]4[/blue])

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

http://behindtheweb.blogspot.com/

 

[MrMuggles31]

So if I am placing the JavaScript file (called test.js) into my HTML file like this:

<!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>Untitled Document</title>
</head>

<body>
<p>Page 1</p>
<script src="test.js" type="text/javascript"></script>
</body>
</html>

Why is the dropdown list reseting itself to the first option when I go to a new page? The dropdown takes me to the page I select, but then the list will show First instead of the page I am on.
I really do apologize if these questions are basic. I do not have enough knowledge in JavaScript to figure these simple issues out. I can only thank you for being patient with me and helping me out.

 

[vacunita]

Because when you change pages, the Js file is reloaded, and reset.

If you wanted to keep the current position, you would need to save the current value, and send to the page that is being opened, and then have your JS use the value to set the selectedIndex of the dropdown to the value.

That may be a bit too complex though for you.

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

http://behindtheweb.blogspot.com/

 

[MrMuggles31]

Yeah, I think you are right. Perhaps it is time to go back to the drawing board and try to learn JavaScript the old fashioned way - starting at the beginning and reading through a book.
Thanks for your help though. Hopefully in the future I can figure this out so it will work for what I need.

 

[MrMuggles31]

I wanted to explore this again for a moment, cause I think I can get this to work with my limited knowledge of JavaScript if someone could just help me tweak the code.
This is what I have for my JS code right now (the file is titled as test.js):

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)
{
	//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 > 1)
		{
			//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 < 5)
		{
			//Change the selected option by adding 1 from the current selectedIndex
			drp.selectedIndex=parseInt(drp.selectedIndex) + 1;
		}
	}
	//... 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" onchange="menu_goto(this.form)">' );
document.writeln( '<option value="01.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( '<input type=button value="<<" onClick="move_selected(\'back\',this.form); return false;">' );
document.writeln( '<input type=button value=">>" onClick="move_selected(\'forward\',this.form); return false;">' );
document.writeln( '</form>' );

I will apply this code into my HTML file as follows:

<!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>Untitled Document</title>
</head>

<body>
<iframe width="100%" height="100px" frameborder="0" src ="01.html">
</iframe>
<script src="test.js" type="text/javascript"></script>
</body>
</html>

The issue is that the JS is not controlling or updating the iframe link. Without that working, I am not sure if the forward and back buttons are working either.
So, one issue at a time - how do I update the JS file so it updates and controls the iframe? I want the drop down and the forward and back button to obviously be shown outside of the iframe.
Once that is settled, I might be able to figure out how to code the JS to work properly for the forward and back buttons.
Again, thank you in advance for your assistance.

 

[vacunita]

You never mentioned an iframe before, and all your JS did was to change the location of the window the JS was currently in.

If you need to alter the iframe, then you need to target the iframe. To do that you'll need to give it a name though.

<iframe [red]name="myiframe"[/red] width="100%" height="100px" frameborder="0" src ="01.html">
</iframe>

[green]//Then your location.href would need to change to target the iframe so:[/green]

window.[red]myiframe[/red].location.href=baseurl + newurl ;

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

http://behindtheweb.blogspot.com/

 

[MrMuggles31]

I did not mention an iframe before because I was trying to tie it all into one html file. However, I had someone suggest that it might be easier in the long run to do it as an iframe, so after some testing and discussion, this is the viable solution.
I tested it out, and it works really well. A few minor follow up questions for this -
If I am at the first link (in this case 01.html), I do not want the back button to function. So, if someone were to click on it, the button would do nothing (whether it is disabled or otherwise). How do I tell the code to do that?
The same goes for the forward button - I want it to be disabled so it does not get an error since there are no more links beyond that final page. How do I tell it that it has reached the last link and to do nothing?
And if I put a home button, how do I tell it in the JS file to go to the first page? Thanks.

 

[vacunita]

If I am at the first link (in this case 01.html), I do not want the back button to function. So, if someone were to click on it, the button would do nothing (whether it is disabled or otherwise). How do I tell the code to do that?
The same goes for the forward button - I want it to be disabled so it does not get an error since there are no more links beyond that final page. How do I tell it that it has reached the last link and to do nothing?
And if I put a home button, how do I tell it in the JS file to go to the first page? Thanks.

The code should already be doing that for both the back and forward buttons. That's what the
if(drp.selectedIndex > 1) and if(drp.selectedIndex < 4)
where for. So you wouldn't move past the available options.

For the home button, just set the selectedIndex to 0. Instead of adding or subtracting anything.

if(direct=='home'){
drp.selectedIndex=0;
}

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

http://behindtheweb.blogspot.com/

 

[MrMuggles31]

Your right. I had something off in my code as opposed to what I posted on here. It works.
Ok, one last question and I will be done for now (and feel free to point me to a website that will explain this if it is too much to describe on here). The JS piece outside of the iframe - the drop down, the forward, back, and home buttons, etc. all need to be displayed a certain way. It will also be within some images and divs that will be decided by what the CSS file is. How do I incorporate stylesheet information for the dropdown, forward, back, and home buttons? Does the styles need to be written into the JavaScript file, or can it be handled by a CSS file in the HTML file? For example, I want the dropdown and the 3 buttons to be in a table, along with a logo on one side, and some text on the other side. Then I will have a border around the whole table for accenting purposes. This I would normally control with the CSS file.
Hopefully the answer to this is just as easy as the others I have been asking today.