SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
Thread: pull down box
-
Oct 21, 2001, 06:38 #1
- 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"
-
Oct 21, 2001, 07:47 #2
- 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>
Hope that helps a little
-
Oct 21, 2001, 08:27 #3
- 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>
Colin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
-
Oct 21, 2001, 08:32 #4
- Join Date
- Jul 2001
- Posts
- 284
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by platinum
So technically it IS java...
<input type="button" value="Go" onClick="location=document.c937.c614.options[document.c937.c614.selectedIndex].value">
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?
-
Oct 21, 2001, 08:57 #5
- 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"
-
Oct 21, 2001, 19:08 #6
- 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,
-
Oct 21, 2001, 20:19 #7
- 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.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>
See you around the forums!Colin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
-
Oct 21, 2001, 20:33 #8
- 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.
-
Oct 21, 2001, 21:43 #9
- Join Date
- Jun 2001
- Location
- Adelaide, Australia
- Posts
- 6,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You are too smart aes
-
Oct 21, 2001, 21:56 #10
- 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 aesColin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
-
Oct 21, 2001, 22:05 #11
- 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.
-
Oct 22, 2001, 00:14 #12
- 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