Welcome to WebmasterWorld Guest from 34.229.194.198

Forum Moderators: open

Message Too Old, No Replies

HTML form drop down menu

What way for internal links?

     
2:41 pm on Jun 15, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 31, 2005
posts:18
votes: 0


Hey guys n girls,

I have a form drop down menu for my websites internal links but i would like to know if there is a better/easier way for me to do it preferably all with HTML (if poss).
right now my code looks like this :

<*form><select onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)">
<option value="../widgets/morewidgets.htm">widgets</option>
</select></form*>

i just cant work out if this is the best or perhaps only way to do this. I would rather not use the java cause when i check it in ie6.0.29 it comes up with a "page restricted from running active content" message at the top.
By the way i am using dreamweaverMX and the links inside my current form menus do not update when the template file has been changed when all of the other links change fine (all other links on these pages look like this ../../widgets/morewidgets.htm), maybe this can be sorted as well?

I have been doing lots of searches but just cannot find what i'm looking for.

Please help

thanks

9:37 am on June 17, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0


Hi noblehouse,

If I understand correctly you are currently using a <select> input as your menu and are looking for a better way?

The use of <select> lists as a menu system is quite a common and well used paradigm these days, so I see no problem with it.

An HTML only version would be flat hyperlinks, which is just as acceptable. An excellent read if you are going this way is SURLs (Software Usability Research Lab) Criteria for optimal web design (designing for usability) [psychology.wichita.edu] - especially the section that I have linked to which is entitled How should information be positioned in a typical website?

HTH

6:36 am on June 18, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 31, 2005
posts:18
votes: 0


Thanks for the reply blobfisk,

it was really the onchange
(onChange="if(this.options[this.selectedIndex].value) top.location.href=(this.options[this.selectedIndex].value)

code part that i was trying to find an alternative for, if there is one. It works but in my IE6 it comes up with a "This page has been restricted from running active content..." message which i am trying to get around and in DWMX the links do not update when the file names or directories are changed.

Any alternatives for making a simple drop down menu (not a roll over but one that you click on the little blue arrow to get the options) that links to internal pages would be much appriciated.

thanks

10:18 am on June 20, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 0



Any alternatives for making a simple drop down menu (not a roll over but one that you click on the little blue arrow to get the options) that links to internal pages would be much appriciated.

There are a number of different JavaScript driven menus like this, a search of the web will point you towards a number of these.

One thing that you can do is streamline your onChange event to use a generic function, eg:

onChange="goToPage(this)"

Where you define the actions in a JavaScript function.

3:34 pm on June 20, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


I would rather not use the java cause when i check it in ie6.0.29 it comes up with a "page restricted from running active content" message at the top.

I think the "real" question here is Can I do this without Javascript? That is what's executing when you use the onChange event.

The answer is no, there is no unscripted way I know of to move to a different URL with a drop-down selection without scripting. You can do some things with forms but that requires SERVER-side programming to work.

The second part of this statement,

"page restricted from running active content"

This only occurs in windows XP (I believe) and only occurs offline. Upload your file and it won't.

And Java is a compiled executable applet embedded in a page via the opbject tag, JavaSCRIPT is a client-side scripting language that is part of the plain text of the page, they are two different things. :-)

11:52 am on June 22, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 31, 2005
posts:18
votes: 0


thanks blobfisk and rocknbil for the replies.

I was looking for a way other than using javascript, and i had wondered why no online pages using javascript hadn't brought up the same warning in IE so that settles those. thanks

One thing that you can do is streamline your onChange event to use a generic function, eg:
onChange="goToPage(this)"
Where you define the actions in a JavaScript function.

I would like to know more on how to do this.
would it entail putting some javascript outside of the form, say at the top of the page or would it be an external page? What would the benefits of doing it this way?
Cheers again

4:04 pm on June 22, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Here's one way, I'm old school so there are probably other more "modern" ways:

<html><head><title>Select Destination</title>
<script type="text/javascript">
function goToPage(dd) {
var ind = dd.selectedIndex;
if (ind == 0) { return; }
var url = dd.options[ind].value
document.location=url;
}
</script>

</head>
<body>

<form>
<select name="whatever" onChange="goToPage(this); return false;">
<option value="">Select Destination</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.webmasterworld.com">Webmaster World</option>
</select>
</form>

</body>
</html>

To move it out of the page and put it in an external file, cut all the code and put it into a file with a .js extension. Replace it with:

<script type="text/javascript" src="yourfunctions.js"> // imported </script>

The advantages are a smaller document AND you can make all your J.S. available to any page on your site with a single line. If you need to change your J.S. - it updates it over the entire site instead of having to locate and update multiple instances.

5:08 pm on June 26, 2005 (gmt 0)

New User

10+ Year Member

joined:Mar 31, 2005
posts:18
votes: 0


thanks again rocknbil,

i will be using a simular menu throughout the site so thats exactly what'll be doing.

cheers

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members