JavaScript drop down popup question

[jennashton]

Hello,

I have a JavaScript drop down that generate a popup window depends on users selection. When Google tool bar is used it seems to block my popup window. My popup window does not dispay any ads or banner. Since the content is minimal usability wise it makes sense to use popup rather than a new page. My codes are below. Any suggestion would be great.

BTW, This seems to happen with JavaScript drop down is used. It does not happen when the javascript is used in a href or link.

Thanks ahead.

<SCRIPT LANGUAGE="JavaScript"><!--
function OpenNewWindow( url, width, height, options, name )
{
if (! width ) width = 250;
if (! height ) height = 250;
if (! options ) options = "scrollbars=yes,menubar=yes,toolbar=yes,location=yes,status=yes,resizable=yes";
if (! name ) name = "otherWindows";

var newWin = window.open( url, name, "width=" + width + ",height=" + height + "," + options );
}

}

//-->
</script>

<form name="myform1">
<table>
<tr>
<td>
<select name="whatever" onChange="window.location=document.myform1.whatever.options[document.myform1.whatever.selectedIndex].value">

<option selected value="javascript: alert('Please select something')">please select from bottom</option>

<option value="onChange="OpenNewWindow('test.html','_new','resizable=no,width=250,height=250')">open window with info</option>
</select>
</td>
</tr>
</table>

[edited by: jennashton at 10:42 pm (utc) on Feb. 16, 2004]

[RonPK]

Replace
<option value="value=onChange="OpenNewWindow('test.html','_new','resizable=no,width=250,height=250')">open window with info</option>

with
<option value="javascript:OpenNewWindow('test.html','_new','resizable=no,width=250,height=250')">open window with info</option>

and things will be fine.

[jennashton]

I did that and it Google popup blocker blocked it.

<SCRIPT LANGUAGE="JavaScript"><!--
function OpenNewWindow( url, width, height, options, name )
{
if (! width ) width = 250;
if (! height ) height = 250;
if (! options ) options = "scrollbars=yes,menubar=yes,toolbar=yes,location=yes,status=yes,resizable=yes";
if (! name ) name = "otherWindows";

var newWin = window.open( url, name, "width=" + width + ",height=" + height + "," + options );
}

//-->
</script>
<form name="myform1">
<table>
<tr>
<td>
<select name="whatever" onChange="window.location=document.myform1.whatever.options[document.myform1.whatever.selectedIndex].value">

<option selected value="javascript: alert('Please select something')">please select from bottom</option>

<option value="javascript:OpenNewWindow('test2.html','_new','resizable=no,width=300,height=250')">open window with info</option>
</select>
</td>
</tr>
</table>

Weird thing, it works on my local drive. As soon as I upload to my server and test the script Google Pop up blocker blocks it. Seems like it does not like form based popup...

[jennashton]

I did find a script on JavaScript Source that worked. However the resize window is set and I prefer to set it in the option select rather than have it predefined in the script. Is this possible?

<script language="JavaScript">
<!-- Begin
function formHandler(form) {
var windowprops = "height=450,width=500,location=no,"
+ "scrollbars=no,menubars=no,toolbars=no,resizable=yes";

var URL = form.site.options[form.site.selectedIndex].value;
popup = window.open(URL,"MenuPopup",windowprops);
}

// End -->

</script>
<table>
<tr>
<td>
<form name=form>
<select name=site SIZE=1 onChange="formHandler(this.form)">
<option value="http://www.yoursite.com">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>
</form>
</td>
</tr>
</table>

Thanks for helping.

[RonPK]

Yeah, sorry, I only tested the script locally, so that did not alert the popup blocker.

You could add the width and height as parameters to the onchange event handler, like this:
<select onchange="formHandler(this.form, 500, 300)">

in the script:
function formHandler(form, wi, he) {
var windowprops = "height="+he+",width="+wi+",location=no,"
+ "scrollbars=no,menubars=no,toolbars=no,resizable=yes";