droplist of links

[tripwater]

I did a search in this forum and did not find anything on this. I have seen this many times so I assume it is simple. I would like to add a "Jump to" droplist that will take visitors to various sections of my site if they would rather use it instead of the main menu. How do I do this?


<form name=goto method=get>
<select name=jumpto>
<option>Page1
<option>page2
</select>
</form>



thank you for any help.

[AdamGundry]

Something like this?
http://www.agbs.co.uk/scripts/dropdown.html

Adam

[tripwater]

yes thank you very much.

[tripwater]

I have a question...How can I get this to work with frames?


My main data frame is named "text".

I added the code from the link you left and it works great but I now need for the droplist which is in the top frame to load the url in the bottom frame.

I tried adding the target="text" after the url in the javascript array but that did not work



<script type="text/javascript">
/*
Copyright (C) 2003 Adam Gundry
Licensed under the GNU GPL: http://www.gnu.org/copyleft/gpl.html

To use this script: Change the text in the marked sections.
Use this format for drop down links:
"Text in dropdown", "address",
*/

// Enter caption for the top option (no effect)
topoption = "Choose a location...";

// Change the following lines (not the first or last, but you can add lines).
dropdownlinks = new Array(
"<span style=font-size:x-small>Home</span>", "../main/maindata.php",
"<span style=font-size:x-small>Account Login</span>", "../account",
"", "");

function dropdownchange(el){
if (el.value != "null") window.location = el.value;
}

document.write('<select onchange="dropdownchange(this)"><option value="null">' + topoption + '</option>');
for (i=0;i<dropdownlinks.length-2;i=i+2){
document.write('<option value="' + dropdownlinks[i+1] + '">' + dropdownlinks[i] + '</option>');
}
document.write('</select>');
</script>

[AdamGundry]

You should be able to change this line

if (el.value != "null") window.location = el.value;

to this

if (el.value != "null") text.location = el.value;

Adam

[tripwater]

Thanks for the help...Unfortunately I seem to be doing something wrong. I have the droplist in the middle of my header image so the code is right in the middle of a data cell.

here is a link to my
site (http://www.spacebadger.com)

Please ignore the source...I am using php with a few page includes and for some reason when you view source on these pages everything is jacked up.

I have another question if possible, one of the choices in the droplist is another site not using frames. How do I load it as target=_self as well so it open in the parent window without frames?


I hope I am not wearing you out. Thanks.

[AdamGundry]

Ok, try this:
function dropdownchange(el){
if (el.value != "null"){
if (el.value.substring(0, 1) == '&amp;'){
window.frames["text"].location = el.value;
} else {
window.location = el.value.substring(1, el.value.length);
}
}
}
In the dropdownlinks array, add an &amp;-sign before each URL to load in the whole window, e.g:

dropdownlinks = new Array(
"<span style=font-size:x-small>Home</span>", "../main/maindata.php",
"<span style=font-size:x-small>Account Login</span>", "../account",
"New window example", "&http://www.example.com",
"", "");

Adam

[tripwater]

Thank you for your patience...

As of now THe home link which does not have a & in front of it loads in the top frame (which is where the header & droplist are) and the URLs with the & do nothing. Here's what I have



<script type="text/javascript">
/*
Copyright (C) 2003 Adam Gundry
Licensed under the GNU GPL: http://www.gnu.org/copyleft/gpl.html

To use this script: Change the text in the marked sections.
Use this format for drop down links:
"Text in dropdown", "address",
*/

// Enter caption for the top option (no effect)
topoption = "Choose a location...";

// Change the following lines (not the first or last, but you can add lines).
dropdownlinks = new Array(
"<span style=font-size:x-small>Home</span>", "/main/maindata.php",
"<span style=font-size:x-small>Account Login</span>", "&/account",
"New window example", "&http://www.example.com",
"", "");

function dropdownchange(el)
{
if (el.value != "null")
{
if (el.value.substring(0, 1) == '&')
{
window.frames["text"].location = el.value;
}
else
{
window.location = el.value.substring(1, el.value.length);
}
}
}

document.write('<select onchange="dropdownchange(this)"><option value="null">' + topoption + '</option>');
for (i=0;i<dropdownlinks.length-2;i=i+2){
document.write('<option value="' + dropdownlinks[i+1] + '">' + dropdownlinks[i] + '</option>');
}
document.write('</select>');
</script>



Here is my frameseton my index page :


<frameset frameborder="0" framespacing="0" border="0" cols="*" rows="160,*">

<frame marginwidth="0" marginheight="0" src="heading.html" name="heading" noresize scrolling="no">

<frameset frameborder="0" framespacing="0" border="0" cols="160,*" rows="*">


<frame marginwidth="5" marginheight="5" src="php/menuall.inc" name="menu" noresize scrolling="auto">

<frame marginwidth="5" marginheight="5" src="main/maindata.php" name="text" noresize>

</frameset>

</frameset>

[AdamGundry]

Sorry, I missed a bit. This version I tested on IE 6.0 and Mozilla 1.3:

dropdownlinks = new Array(
"<span style=font-size:x-small>Home</span>", "main/maindata.php",
"<span style=font-size:x-small>Account Login</span>", "&account",
"Full window example", "&http://www.example.com",
"", "");

function dropdownchange(el){
if (el.value != "null"){
if (el.value.substring(0, 1) != '&'){
top.window.frames[2].location = el.value;
} else {
top.window.location = el.value.substring(1, el.value.length);
}
}
}

Adam