Drop-down-box and how to hyperlink

  powerless 23:09 29 Jun 04
Locked

FP2003

Ain't got a clue about this, i'm wanting to create a drop down box so that when you first see it, it has "Continue to..." within the box.

When you click on it you can then select, part 1, part 2 etc and these will be hyperlinked to another page.

I've looked at the help files but can't make sense of it.

That make sense?

  Charence 23:29 29 Jun 04

I have provided an example below, using "part 1" and "part 2" as links. The ----Please Select----- is the default value. SELECT NAME is the name of the drop down menu and I javascript is used to go to the link. An error message also displays if nothing is selected.

**********example***************

<FORM>

<SELECT NAME="DropDown" SIZE="1">

<OPTION SELECTED VALUE="">-------- Please Select --------

<OPTION VALUE="part1.html">Part 1

<OPTION VALUE="part2.html">Part 2

</SELECT>

<INPUT TYPE="button" VALUE="Go"

onClick="if (form.DropDown.selectedIndex != 0)

location = form.DropDown.options[form.DropDown.selectedIndex].value;

else

alert('Select something from Drop Down Menu Please')">

</FORM>

***********end***************

For every link you want to insert, just add another <OPTION VALUE...>.

Charence

  Charence 23:30 29 Jun 04

it should say "BETWEEN <BODY> TAGS" in the above title

  powerless 01:32 30 Jun 04

Can i remove the GO button so when an option is selected it opens whatever page is selected?

  Taran 08:30 30 Jun 04

The easiest way to do this is if you're struggling with code is to use one of the available code generators.

click here

It will produce a JavaScript snippet that should go between the <head></head> tags while the drop down menu itself may go where you like on the page inside the <body></body> tags.

You can do it all within FrontPage but it requires a little jiggerypokery while the above code generator only needs a little input from you to produce what is necessary.

  Charence 14:10 30 Jun 04

<HTML>

<BODY>

<FORM>

<SELECT NAME="DropDown" SIZE="1"

onChange="

if (form.DropDown.selectedIndex !=0)

location = form.DropDown.options[form.DropDown.selectedIndex].value;

else

alert('Select Something!')">

<OPTION SELECTED VALUE="">-------- Please Select --------

<OPTION VALUE="part1.html">Part 1

<OPTION VALUE="part2.html">Part 2

</SELECT>

</FORM>

</BODY>

</HTML>

Charence

  powerless 10:05 01 Jul 04

I tried Charence method and tarans click here.

Now they both worked.

But why the extra [or lack of] code in between <head> for the script as just copying and pasting Charence code where i wanted the box did exactly the samething?

  Taran 13:18 01 Jul 04

There are loads of ways to achieve a similar result. I only included the link to the code generator to save explaning how to do it all from scratch (lazy of me I know).

NetObjects, Dreamweaver, FrontPage and other web editors can all do it for you to an extent, and they all produce different code in the process.

Like many things in the web world there are lots of ways to get to where you want to be and while some may be preferable than others for one reason or another, as long as the end result works reliably, go with it.

The oversimplified answer is that the code generator uses the code block in the head tags to perform a broadly similar function while the snippet offered by Charence has a self contained If-Else command.

The thing I like about that particluar code generator is that it takes frames and old browser versions into account, so the code is degradable to most users and the majority of site configurations. If you read through the header code snippet you should be able to more or less see this in action where target=top, blank, self and parent are all present. Obviosuly if you don't need those functions then you don't have to use them. It's a script that takes most scenarios into account.

  powerless 06:52 03 Jul 04

When i link to another page in another folder. Do i have to enter the full path to this page?

Or a quicker way?

  Taran 12:53 03 Jul 04

All links need to target the destination file with its full address within the web root.

If you have a folder in the web root called commerce with a page called inventory.html inside it the path in the hyperlink must read commerce/inventory.html

Any other file or folder name combination won't work and this is one area where people often make mistakes.

Here are four totally different hyperlink targets:

inventory.html

inventory.htm

Inventory.html

Inventory.htm

The capital letter and extension (.htm or .html) lead to completely different files as far as the web browser is concerned, which is one of many good reasons why it is important to keep all file names lower case, don't use spaces between filename words, use underscores instead, like_this, and make sure your hyperlinks lead to the correct file.

  Charence 00:38 04 Jul 04

If the page you are linking to is within the same folder, then all you need is the filename and extension. e.g. "page2.html"

But if it is not in the same folder your link will have to include the folder name as well e.g. "folder/page2.html"

If it is on a completely different server, you will need to include the full URL. e.g. "click here"

Whenever possible, try to avoid using the full URL because if you move your website to another location, you may need to correct all of the links to the new URL of the new server which may be a time consuming process, if your links don't have the full URL, you can easily transfer your site to another server without changing the links.

Charence

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

These are the Best Christmas Ads and Studio Projects of 2016

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…