Submit Your Article Forum Rules

Results 1 to 10 of 10

Thread: Need javascript help with Jump Menu

Hybrid View

  1. #1
    Junior Member
    Join Date
    Jul 2004
    Posts
    10

    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>

  2. #2
    WebProWorld MVP mikmik's Avatar
    Join Date
    Aug 2003
    Posts
    1,557
    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','center');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
    Babies don't need a vacation, but I still see them at the beach... it pisses me off! I'll go over to a little baby and say 'What are you doing here? You haven't worked a day in your life!'
    Steven Wright

  3. #3
    Junior Member
    Join Date
    Jul 2004
    Posts
    10

    Help with jump menu

    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','center');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/...ct/ver_cvl.htm

    Thanks again for your time :)

  4. #4
    Junior Member
    Join Date
    Jul 2004
    Posts
    10

    Jump Menu Help

    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!

  5. #5
    Senior Member paulhiles's Avatar
    Join Date
    Jul 2003
    Posts
    2,073

    Possible solution

    The following might just work! (the Javascript itself originally comes from the Accessify 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,wi dth="+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

  6. #6
    Junior Member
    Join Date
    Jul 2004
    Posts
    10
    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/...thdropdown.htm

    Thanks again for your help!

  7. #7
    Senior Member paulhiles's Avatar
    Join Date
    Jul 2003
    Posts
    2,073
    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

  8. #8
    Junior Member
    Join Date
    Jul 2004
    Posts
    10
    :-( 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,

  9. #9
    Senior Member paulhiles's Avatar
    Join Date
    Jul 2003
    Posts
    2,073
    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,wi dth="+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>

  10. #10
    Junior Member
    Join Date
    Jul 2004
    Posts
    10
    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,

Similar Threads

  1. JavaScript Jump List
    By Archmage in forum Web Programming Discussion Forum
    Replies: 1
    Last Post: 03-17-2010, 08:39 AM
  2. Javascript Jump Menu
    By dak888 in forum Web Programming Discussion Forum
    Replies: 11
    Last Post: 09-12-2008, 03:04 AM
  3. No script tag for javascript menu
    By pse in forum Search Engine Optimization Forum
    Replies: 1
    Last Post: 06-17-2008, 06:27 PM
  4. Javascript menu issues
    By ADAM Web Design in forum Web Programming Discussion Forum
    Replies: 3
    Last Post: 06-27-2005, 09:57 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •