PDA

View Full Version : Hyper-link dropdown

zoobie
01-05-2003, 03:43 AM
I musta goofed somewhere. Fix? Thanks

<html>
<head>
<script language="javascript">

function openWindow(url)
{
window.open(url, 'windowname','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,resizable=yes,scrollba rs=yes,top=0,left=0,height=600,width=800');
}
</script>
</head>
<body>

<SELECT name="selectboxname" ONCHANGE="javascript:openWindow('selectboxame.options[selectboxname.selectedIndex].value');" SIZE="1">

<OPTION value="none" selected>- Select a Link -</OPTION>
<OPTION VALUE="http://www.google.com";>Google</OPTION>
<OPTION VALUE="http://www.yahoo.com";>Yahoo</OPTION>

</SELECT>
</body>
</html>
ez4me2c3d
01-05-2003, 03:56 AM
this works... tested


<head>
<script language="javascript">
function openWindow(url) {
window.open(url, 'windowname','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,resizable=yes,scrollba rs=yes,top=0,left=0,height=600,width=800');
}
</script>
</head>
<body>

<SELECT name="selectboxname" ONCHANGE="javascript:openWindow(this.value);" SIZE="1">

<OPTION value="none" selected>- Select a Link -</OPTION>
<OPTION VALUE="http://www.google.com";>Google</OPTION>
<OPTION VALUE="http://www.yahoo.com";>Yahoo</OPTION>

</SELECT>

</body>
</html>

EDIT: make sure the window.open line is all together and not broken up as appears
zoobie
01-05-2003, 04:11 AM
Thanks...but why does my dropdown box remain open? I'd like it to collapse as it's going to the link. :p
whammy
01-05-2003, 04:39 AM
First of all, there's a lot of code in there that's just plain ancient, or just wrong ;).

For instance, "this.value" will only work for a select dropdown in IE, since it's actually not correct javascript - but that's the right idea, since you CAN use "this" instead of specifically naming the field.

Also if you're not modifying any of the window parameters, you should leave them out since they are optional.

Additionally, there is no need to put "javascript:" in an onchange event, and HTML code shouldn't ever have a semicolon in it (at least not the way used above)... Here's a more "modern" version:


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>This is a test.</title>
<script type="text/javascript">
<!--
function openWindow(url) {
if(url) {
newWindow = window.open(url,'myWin');
window.newWindow.focus();
}
}
// -->
</script>
</head>
<body>
<div>
<form id="form1" action="javascript://">
<select name="selectboxname" onchange="openWindow(this.options[this.selectedIndex].value)">
<option value="">- Select a Link -</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo!</option>
</select>
</form>
</div>
</body>
</html>


This will also focus the window if it gets put in back by making the popup window an object.

P.S. Not trying to be too harsh zoobie, just pointing out some things that I would improve upon. I.e. tag names haven't been capitalized since HTML 4.something ;)
zoobie
01-05-2003, 06:08 AM
Holy code bloat, Batman!

Umm...That doesn't collapse either. :rolleyes:

Forget it...I don't wanna open a new window anyway. I'll just use

<select name=url onchange="window.location=url.value;">
<option value="http://yahoo.com">Yahoo</option> :D
whammy
01-05-2003, 06:29 AM
Heh... the code isn't bloated... I just included some things that are necessary in a valid XHTML document, and corrected some HTML... not sure what you mean about "it doesn't collapse"... actually the code you posted should "collapse" (i.e. not work) in any browser except for Internet Explorer. :confused:

For instance, if you expect your form to work in any browser besides IE, you have to wrap it in <form></form> tags, regardless of whether or not you are trying to conform to a standard. IE unfortunately processes script sometimes that shouldn't work at all. Here's a shorter example...

<html>
<head>
<title>This is a test.</title>
</head>
<body>
<div>
<form id="form1" action="javascript://">
<select name="selectboxname" onchange="window.open(this.options[this.selectedIndex].value)">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo!</option>
</select>
</form>
</div>
</body>
</html>


Which still opens a new window, without the function call (which you would need for "url.value"), and it's less script. ;)

That also makes it easy to "upgrade" the code to valid XHTML later on, if you ever need to (which you will if this site is going to be around for a while)... :D

http://www.w3schools.com/xhtml
zoobie
01-05-2003, 11:00 AM
Well, what I mean by it not collapsing is that when you click on the arrow to open the dropdown box, it stays open rather than collapsing or closing back up.

Anyway, are you implying that HTML will be phased out to be replaced with XHTML? Then we must assume that ASP, PHP, and XHTML will also be phased out to be replaced with ZHTML I believe. http://geocities.com/zoobie007/grin.txt
whammy
01-05-2003, 02:33 PM
Don't you mean .NET? ;)

P.S. That's the way onchange works... if you want to do it any other way you'll need to make a function that holds what the current value is in a global variable and then checks to see if it's changed onblur, or just don't use onchange, and have a "go" button... :D