/    Sign up×
Community /Pin to ProfileBookmark

droplist of links

Copy linkTweet thisAlerts:
Aug 12.2003

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.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@tripwaterauthorAug 12.2003 — yes thank you very much.
Copy linkTweet thisAlerts:
@tripwaterauthorAug 12.2003 — 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


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

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

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

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

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

<i> </i> document.write('&lt;select onchange="dropdownchange(this)"&gt;&lt;option value="null"&gt;' + topoption + '&lt;/option&gt;');
<i> </i> for (i=0;i&lt;dropdownlinks.length-2;i=i+2){
<i> </i> document.write('&lt;option value="' + dropdownlinks[i+1] + '"&gt;' + dropdownlinks[i] + '&lt;/option&gt;');
<i> </i> }
<i> </i> document.write('&lt;/select&gt;');
<i> </i> &lt;/script&gt;
Copy linkTweet thisAlerts:
@AdamGundryAug 12.2003 — 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
Copy linkTweet thisAlerts:
@tripwaterauthorAug 12.2003 — 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

[URL=http://www.spacebadger.com]site[/URL]

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.
Copy linkTweet thisAlerts:
@AdamGundryAug 12.2003 — Ok, try this:
function dropdownchange(el){
if (el.value != "null"){
if (el.value.substring(0, 1) == '&amp;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
Copy linkTweet thisAlerts:
@tripwaterauthorAug 12.2003 — 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


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

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

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

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

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

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



Here is my frameseton my index page :

<i>
</i>&lt;frameset frameborder="0" framespacing="0" border="0" cols="*" rows="160,*"&gt;

<i> </i> &lt;frame marginwidth="0" marginheight="0" src="heading.html" name="heading" noresize scrolling="no"&gt;

<i> </i> &lt;frameset frameborder="0" framespacing="0" border="0" cols="160,*" rows="*"&gt;


<i> </i> &lt;frame marginwidth="5" marginheight="5" src="php/menuall.inc" name="menu" noresize scrolling="auto"&gt;

<i> </i> &lt;frame marginwidth="5" marginheight="5" src="main/maindata.php" name="text" noresize&gt;

<i> </i> &lt;/frameset&gt;

<i> </i> &lt;/frameset&gt;
Copy linkTweet thisAlerts:
@AdamGundryAug 13.2003 — Sorry, I missed a bit. This version I tested on IE 6.0 and Mozilla 1.3:

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

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

Adam
×

Success!

Help @tripwater spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...