SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: pull down box

Hybrid View

  1. #1
    SitePoint Guru coiL's Avatar
    Join Date
    Sep 2001
    Location
    QLD, Australia
    Posts
    666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pull down box

    I wanted to create a pull down box for 'quick links'. I wasn't sure how to do this myself so I went
    searching for a script. The one below is what I found. I have 2 questions though I was wondering if someone could answer for me.

    the script:
    select name="c614" size="1">
    <option selected value="http://url">title</option>
    <option value="http://url">title</option>
    <option value="http://url">title</option>
    <option value="http://url">title</option>
    </select>

    <input type="button" value="Go" onClick="location=document.c937.c614.options[document.c937.c614.selectedIndex].value"> </p>
    </form>

    the questions:
    a) this is just html isn't it? (I found it on a java script site).
    b)I understand most of it(seemed pretty easy once I saw how it was done) but I don't understand the location part. Could someone please explain to me what all of those numbers are.

    Any help would be greatly appreciated.
    coiL
    "cradled in the learning curve"

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need the rest of it actually, here is the code i would use (from DW).
    <script language="JavaScript">
    <!--
    function MM_jumpMenu(targ,selObj,restore){ //v3.0
    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
    if (restore) selObj.selectedIndex=0;
    }

    function MM_findObj(n, d) { //v3.0
    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); return x;
    }

    function MM_jumpMenuGo(selName,targ,restore){ //v3.0
    var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
    }
    //-->
    </script>
    </head>

    <body bgcolor="#FFFFFF">
    <form name="form1">
    <select name="Jump Menu" onChange="MM_jumpMenu('parent',this,0)">
    <option value="http://www" selected>Option1</option>
    <option value="http://www">Option2</option>
    </select>
    <input type="button" name="Button1" value="Go" onClick="MM_jumpMenuGo('Jump Menu','parent',0)">
    </form>
    </body>
    </html>
    So technically it IS java...
    Hope that helps a little

  3. #3
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The numbers are simply references to tell the JavaScript how to function. In your code above you left out the form name, which would be c937; then you have the select name which is c614. Using those, the script knows to do something in form c937 with select c614. Make any sense? If you wanted to, you could rename those numbers to anything you like; "quickjump" and "jumper" for example; basically anything you like so long as you change all of the instances of those numbers or words so that the JavaScript knows how to function.

    Alternately, w/out the use of the rather large script Platinum used (Dreamweaver is notorious for using shoddy JavaScript code), you could use this; it is what I use on my sites and allows people to simply select the appropriate option in the dropdown menu and go there w/out having to click on "go":
    Code:
    <form name="c937">
    <select name="c614" size="1" onChange="go()">
    <option select="selected" value="http://url">title</option> 
    <option value="http://url">title</option> 
    <option value="http://url">title</option> 
    <option value="http://url">title</option> 
    </select> 
    
    <script language="javascript" type="text/javascript">
    <!--
    function go()
    {
    location=document.c937.c614.options[document.c937.c614.selectedIndex].value
    }
    //-->
    </script>
    
    <input type="button" name="test" value="Go!"
    onClick="go()">
    </p>
    </form>
    See you around the forums!
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by platinum
    So technically it IS java...
    Actually it is javascript. Java is different. Very common misconception though.

    <input type="button" value="Go" onClick="location=document.c937.c614.options[document.c937.c614.selectedIndex].value">
    Javascript is a "step" script. It takes things from the top to bottom to find information, so here goes...

    Location = will be the URL (web address) of the chosen result.

    Document = The current page your form is located on.

    c937 = The NAME specifed in your FORM tag.

    c614 = The NAME specified in the question at hand.

    options[infohere] = The specified area is dealing with the OPTIONS tag. The selectedIndex part will find which option was actually chosen.

    value = the value of the option that was chosen.

    Clearer for ya?

  5. #5
    SitePoint Guru coiL's Avatar
    Join Date
    Sep 2001
    Location
    QLD, Australia
    Posts
    666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes that does help a fair bit thank you I'm not 100% clear but I understand it more then I did before.

    Aes, doesn't that script you wrote in, still have a go button? I wouldn't mind getting rid of it if I could.
    coiL
    "cradled in the learning curve"

  6. #6
    Non-Member
    Join Date
    Jul 2001
    Location
    USA - WA and NY
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best Place to Learn JavaScript

    I'm lost when it comes to javascripts. Yet, I have way too many areas on my site to "not" use it for dropdown windows.

    Where is the best place to learn how to do this? I tried to understand the code above and I'm lost. I do know HTML coding though.

    Most likely I will end up with 6 links containing drop downs.

    Thanks much,

  7. #7
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by coiL
    Aes, doesn't that script you wrote in, still have a go button? I wouldn't mind getting rid of it if I could.
    Sure; just take the button part out:
    Code:
    <form name="c937">
    <select name="c614" size="1" onChange="go()">
    <option select="selected" value="http://url">title</option> 
    <option value="http://url">title</option> 
    <option value="http://url">title</option> 
    <option value="http://url">title</option> 
    </select> 
    
    <script language="javascript" type="text/javascript">
    <!--
    function go()
    {
    location=document.c937.c614.options[document.c937.c614.selectedIndex].value
    }
    //-->
    </script>
    
    </p>
    </form>
    The button was basically there as a safe guard against those that don't have JS enabled; but it's usually pretty safe to leave the button out completely.

    See you around the forums!
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  8. #8
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maria; take a look at these articles by Kevin Yank on SitePoint. They'll get you started. Then, you can take a look at a more advanced JS Tutorial that deals with Object-Oriented Programming by Ryan Frishberg (only if you're interested of course) Good luck!
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  9. #9
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are too smart aes

  10. #10
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by platinum
    You are too smart aes
    Haw! That's quite an overstatement! Where on earth did you get such a silly idea?
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  11. #11
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awwwww, my copy an' paste job from dreamweaver wasn't good enough.. and you do it in like 4 lines
    ahhh well.

  12. #12
    SitePoint Guru coiL's Avatar
    Join Date
    Sep 2001
    Location
    QLD, Australia
    Posts
    666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks
    coiL
    "cradled in the learning curve"


Bookmarks

Posting Permissions

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