View Full Version : Need javascript help with Jump Menu
Hi all,
I have a Jump Menu, when you click on an item it opens a new HTML document -- my question is what do I have to put in the code to specify the size of the window I want to open (I'm not a programmer, so I rely on the handy dandy "Behaviours" features in Dreamweaver that writes the code for me!
Here is the code for my jump menu: - (I want the windows that open to be 400 px wide x 300 px high)
Thanks SO MUCH!
<select name="select" onChange="MM_jumpMenu('parent',this,1)">
<option value="#" selected>Select Style</option>
<option value="ver_cvl_maestro.htm">Maestro</option>
<option value="ver_cvl_ovation.htm">Ovation</option>
<option value="ver_cvl_frost.htm">Frost</option>
<option value="ver_cvl_fine.htm">Fine Cannelure</option>
<option value="ver_cvl_perf18.htm">Perforated P-18/32</option>
<option value="ver_cvl_perf21.htm">Perforated P-21</option>
<option value="ver_cvl_perfp24.htm">Perforated P-24</option>
<option value="ver_cvl_perfp27.htm">Perforated Designer P-27</option>
</select>
mikmik
01-22-2005, 10:59 PM
I think for starters, parent is a bad target.
Anyhooo, try this, and if it doesn't work, let me know. I am not great at this stuff yet :O)))
<select name="select" onChange="NewWindow(this.href,'name','400','350','yes','cent er');return false" onfocus="this.blur()">
Here is a nice dropdown menu with a description, but it has a 'GO' button:
http://dynamicdrive.com/dynamicindex1/combodescribe.htm
Thanks MikMik,
I replaced
"<select name="select" onChange="MM_jumpMenu('parent',this,1)">
With your code:
<select name="select" onChange="NewWindow(this.href,'name','400','350','yes','cent er');return false" onfocus="this.blur()">
And it doesn't seem to work -- perhaps I've replaced it incorrectly, or I'm missing something?
You can check out the web page I put the menu in at:
http://www.royalwindowcoverings.com/contract/ver_cvl.htm
Thanks again for your time :)
Hi...still trying to figure out how to designate a specific size for the new window to open. Anybody else have a suggestion?
Thanks much!
paulhiles
01-26-2005, 03:48 PM
The following might just work! (the Javascript itself originally comes from the Accessify (http://www.accessify.com/tutorials/the-perfect-pop-up.asp) site).
Add the following JavaScript to the <head> section of your web page.
<script type="text/javascript">
var newWindow = null;
function closeWin(){
if (newWindow != null){
if(!newWindow.closed)
newWindow.close();
}
}
function popUpWin(url, type, strWidth, strHeight){
closeWin();
if (type == "fullScreen"){
strWidth = screen.availWidth - 10;
strHeight = screen.availHeight - 160;
}
var tools="";
if (type == "standard" || type == "fullScreen") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes, menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
if (type == "console") tools = "resizable,toolbar=no,location=no,scrollbars=no,wid th="+strWidth+",height="+strHeight+",left=0,top=0";
newWindow = window.open(url, 'newWin', tools);
newWindow.focus();
}
</script>
Add the following to the body of your page:
<form name="jump-menu" method="post" action="#">
<select name="select" onchange="popUpWin(this.href = this.options[this.selectedIndex].value,'standard',640,480);return false;">
<option value="">Please select...</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.msn.com">MSN</option>
</select>
</form>
What you're doing here is using the onchange event handler to call the JavaScript "popUpWin" function.
The 640,480 values are setting the width and height respectively for the new window.
Obviously you can adapt these to suit! :o)
I've only tried it in Firefox and IE so far.. and so far, so good! :o)
Paul
Thanks Paul.
I tried it, and I don't know what I'm doing wrong, but when I click on the items in the menu, nothing happens?
You can check it out at: http://www.royalwindowcoverings.com/contract/contractlouvers_withdropdown.htm
Thanks again for your help!
paulhiles
01-26-2005, 04:28 PM
You've got two lines like this... one after the other.
<script language="JavaScript" type="text/JavaScript">
Try removing one.. and see if that does the trick! :o)
Paul
:-( that did not work either, still won't work. Sorry, don't know what I'm doing wrong (that's what happens when a non-programmer tries to mess with java scripts!)
Thanks,
paulhiles
01-26-2005, 04:50 PM
Try copying this into the top of your page's code before the <body> tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>contract louvers - Royal Window Coverings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="../fade.js"></script>
<script language="JavaScript" src="openWin.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
var newWindow = null;
function closeWin(){
if (newWindow != null){
if(!newWindow.closed)
newWindow.close();
}
}
function popUpWin(url, type, strWidth, strHeight){
closeWin();
if (type == "fullScreen"){
strWidth = screen.availWidth - 10;
strHeight = screen.availHeight - 160;
}
var tools="";
if (type == "standard" || type == "fullScreen") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes, menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
if (type == "console") tools = "resizable,toolbar=no,location=no,scrollbars=no,wid th="+strWidth+",height="+strHeight+",left=0,top=0";
newWindow = window.open(url, 'newWin', tools);
newWindow.focus();
}
-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<style type="text/css">
<!--
.style4 {font-size: 13px}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="../styles.css" rel="stylesheet" type="text/css">
<link href="../styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style12 {color: #CCCCCC}
.style13 {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;}
a:active {
color: #202f66;
}
body {
background-color: #f1f1f1;
}
-->
</style>
</head>
That did it! Thanks so much Paul, I really appreciate your time :) (I have many uses for this type of jump menu, so it is very valuable to me)
Cheers,