FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Question About Drop-Down search buttons





NjRocket
Hey guys, i'm trying to find a free script for my site that has drop down boxes. Where you hit the down arrow and select what your looking for. The only problem i have is that i don't want to have a "go" button after you select your choose. I want it to automatically go to the site or link i have it set for when you choose it. I don't want to hit go. When you find the script, is there an option to get rid of it like the value change i guess, or is there a totally different script. Thanks alot guys
benjad
check out this site...

http://www.town.ocean-city.md.us/

On the right hand side of the page is a drop down box where when you choose an option, it goes to the destination page. It works off of javascript. Check out the source of the page, and see if you can 'borrow' the code idea.
NjRocket
benjad wrote:
check out this site...

http://www.town.ocean-city.md.us/

On the right hand side of the page is a drop down box where when you choose an option, it goes to the destination page. It works off of javascript. Check out the source of the page, and see if you can 'borrow' the code idea.


Thanks for the find, i assume now its a customized script to get rid of the "go" button. I don't really want to get involved with "borrowing" scripts and stuff. I rather find out how to do it , and make it my self or have someone exlplain. I appreciate it the find though. Thats a perfect example of what i want though.
benjad
Let's cut this down to the meat...

Code:
script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
...
//-->
</script>


This script is stolen from somewhere else... because the restore feature is not used anywhere else on the site. This is the function that actually calculates the next page to display. It is called when the value of the drop down is altered. The drop down code looks like...

Code:
     
<form name="form2">
        <select name="menu2" onChange="MM_jumpMenu('parent',this,0)">
          <option value="Americans with Disabilities.html">Americans with Disabilities</option>

          <option value="/brp2002.html"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b><font color="#000000">Beach
          Replenishment 2006</font></b></font> </option>
          ....
      
</select>
</form>


Looking at these two snippets should give you a prety good idea of how it works. The magic happens in the onChange statement. The MM_jump function is a lot more elaborate than it needs to be.

Also, would I be correct in guessing that you would like the menu options to be easily changeable. That will probably require some php work. But just this little snippett of js should get you headed in the right direction.
NjRocket
I used the above and changed some stuff around. It doesnt seem to be going to the designated link i choose for it. Can you check my source code and see where i screwed up? I'm sure its something simple, i've been looking at it for a while and can't see where i went wrong lol. Its right under my vertical banner on the left. Thanks.
benjad
I'm not the javascript expert but....

The code portion should probably go in the header... not sure if that is a convention, or a hard and fast rule.

The script needs an opening <script> tag to pair with the closing script tag.

For the options, close the select and form tags.

Give these changes a try, and see what happens.
NjRocket
benjad wrote:
I'm not the javascript expert but....

The code portion should probably go in the header... not sure if that is a convention, or a hard and fast rule.

The script needs an opening <script> tag to pair with the closing script tag.

For the options, close the select and form tags.

Give these changes a try, and see what happens.


Alright i'll give that a try, everything looks good except the fact the choices don't follow the url, nothing. So i'll see if that helps me.
NjRocket
nah doesnt seem to be working, i even just used the code you gave and not change anything. They still don't work. I don't know if i'm missing something or if i got to change my index file from .html to something else. I'm no that good with these scripts Sad
LukeakaDanish
i think this should be VERY easy...

have you tried something like the following...?

Code:


<option #attributes and stuff# onclick="self.location.replace('#new place to go#');"></option>



I think that should pretty much do it!...no need for some long, hard to understand, function imo...
NjRocket
LukeakaDanish wrote:
i think this should be VERY easy...

have you tried something like the following...?

Code:


<option #attributes and stuff# onclick="self.location.replace('#new place to go#');"></option>



I think that should pretty much do it!...no need for some long, hard to understand, function imo...


So you saying all I need is that code, nothing else before or after it? I'll try that later, thanks for the find
riv
LukeakaDanish wrote:
i think this should be VERY easy...

have you tried something like the following...?

Code:


<option #attributes and stuff# onclick="self.location.replace('#new place to go#');"></option>



I think that should pretty much do it!...no need for some long, hard to understand, function imo...


That's the way to do it. But it's a lot of typing, since you have to do that for every single option.
NjRocket
I'll try that later, if the code and link work, i don't care about typing. Thats the least of my problems, i need a code to work ya know, thats all that really matters right now. Copy and Paste
NjRocket
bump, it doesnt seem to be working
LukeakaDanish
Ok

I looked in my JavaScript book...and here is the example script they give of how to do this exact thing.

http://www.javascriptworld.com/scripts/chap08/script04.html

If that doesnt help then nothing will!

BTW...that book ("javascript for the world wide web") is my personal recomendation to anybody wishing to learn javascript...it will get you up and running in a matter of days...!
NjRocket
LukeakaDanish wrote:
Ok

I looked in my JavaScript book...and here is the example script they give of how to do this exact thing.

http://www.javascriptworld.com/scripts/chap08/script04.html

If that doesnt help then nothing will!

BTW...that book ("javascript for the world wide web") is my personal recomendation to anybody wishing to learn javascript...it will get you up and running in a matter of days...!


awesome, it looks like its going to work. How do i get the actual script though, just view page source? Let me know, i want to start this soon. Thanks alot.
LukeakaDanish
Right click anywhere on the page and press "View Source" in IE or "View Page Source" in firefox

This is an essential tool for any web developer!...you'll find that as your skills improve you will feel like looking at the source of pages that you visit - to see how they solve a particular problem or just out of interest.

Luke
NjRocket
LukeakaDanish wrote:
Right click anywhere on the page and press "View Source" in IE or "View Page Source" in firefox

This is an essential tool for any web developer!...you'll find that as your skills improve you will feel like looking at the source of pages that you visit - to see how they solve a particular problem or just out of interest.

Luke


so basically that site is giving out that script for free like other sites do? Just let me know, thanks.
LukeakaDanish
Unless a site specifically notes this, the code for the site is not copyrighted - as long as you dont copy images and / or content, using javascript and / or html "bits" from the site is fully legal - though copying an entire page from somewhere else may be frowned upon (or possibly illegal)

This scipt is completely free and legal though - no worries Very Happy

- (i think) the site is meant as something which helps the user of the book and is of minimal use for most other people as the function of the scripts are explained in the book.

Also please note that any code you write may be used by anybody else - even if you tell them not to - because the source is so easily available no-one really expects to be able to keep their code private
NjRocket
ok, the set up of the script works, but when you go to my site www.topsportlinks.frih.net , use the select a team feature under my vertical banner, when you select a team, it comes as page can't be displayed. The script is reading......www.topsportlinks.frih.net/www.astros.mlb.com and of course the link is not working. Is there a way i can have the link go to only www.astros.mlb.com and skip the beginning part which is my website? Thanks alot. Let me know.
LukeakaDanish
Very easy...if you want to link out of your site at any time you will have to use the full adress

Code:
http://www.astros.mlb.com
NjRocket
great, this worked and everything is working good right now with the drop down box. The last question i have is why is my mouseover images below the banner not working on the links like home, forums, sports, ect. Can you check the source code and see where i went wrong?
LukeakaDanish
I dont understand what it is you think doesnt work...the links are linkmenu is working fine as far as i can see..the only problem is that the pages it is linking to dont excist so im getting a blank screen...but the sites under construction innit?

is what your trying to do is a hover type menu...then please tell me, coz i see no evidence in the script...Confused

BTW...firefox tells me some of your css is incorrect...you might wanna try fix it...(HINT: view your page in firefox and click [tools]-[javascript-console])
LukeakaDanish
I have just been taking a look at your source code (well...you asked for it Wink), and i've noticed some pretty strange "things"

Firstly:

You have three <body> tags!!!! - only one is allowed - never more and never less - make sure you include all the attributes from all the body tags in just one...right after your <head> section

Secondly:

You have both <meta> and <title> tags outside your <head> section - this is both stupid as i will laugh at you Wink , but also these tags now have no effect on your document (appart from making it load slower, and harder to read) - place the in the head!

Thirdly:

I dont like this part of your code:

Code:
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="table17">
  <tr>
   
</input>
</input>
</input>
</input>
</input>
</input>

</td></tr></table>


It makes no sence...you start a table and then place...well nothing...appart from ending tags for inputs which where never started, and then you end the table...i think you can safely delete this and your page will look no different.

EDIT:

Im not trying to scare you or anything, but there are at least a zillion (no kiddn Wink) more "anomalies" in your code. One of the more important ones is that when you coppied the code from the link i gave you you didnt read through it. Therefor it refers to "gotoLocation.cgi" as the action for the form. Set the action to "#" or something...unless you ofcourse have written the "gotoLocation.cgi" file, which i somehow doubt Wink

EDIT AGAIN:

Here's another tiny little recomendation for you: if you insist on using tables for layout, at least keep them as simple as possible. Make sure you always know what the purpose is of every little bit of code - if you dont its too compicated and should be done in an easier way

Luke
NjRocket
alright, i got to fix some of that when i get a chance, the part of i'm talking about is right under the header. You know the home, poker, sports, forums images , there should be a mouseover feature when you hover the mouse over each of images. The mouseover files are something likemouseover_01....its located to the right of the normal images files. I'm pretty sure its hsrc....It was working before i was adding these scripts for the dropdown box. I'm not sure if something changed or what. Let me know if you can figure out how to fix it or something. Thanks alot. If you can figure out how to fix it, some $FRI is the reward Smile
benjad
It sounds like running this through html tidy might help you get the code under control.
NjRocket
benjad wrote:
It sounds like running this through html tidy might help you get the code under control.


html tidy?
quartnee
I don't know if you still need help or not, but here's a code i found on Lissa Explains It All that will give a drop down menu without a go button and you don't need extra scripts/pages to refer to the site you need:
Code:
<form ACTION=URI>
<select name=lissamenu3
onchange="location.href=(form.lissamenu3.options[form.lissamenu3.selectedIndex].value)">
<option value="0"> Choose One</option>
<option value="0"></option> (This line adds a space in your menu)
<option value="http://www.lissaexplains.com"> Home</option>
<option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>
<option value="http://www.lissaexplains.com/tools.shtml"> Links</option>
</select>
</form>

The specific page with this code on it is right here
Basically anywhere it says Lissa you change it with what you want. Like "lissamenu3" can be changed to just regular "menu" and of course the links you change and the name of the links. I tested it out my self and it works perfectly. Also, if you want to add more links just copy "<option value="http://">Link Name</option>" and paste that until you have enough.
NjRocket
quartnee wrote:
I don't know if you still need help or not, but here's a code i found on Lissa Explains It All that will give a drop down menu without a go button and you don't need extra scripts/pages to refer to the site you need:
Code:
<form ACTION=URI>
<select name=lissamenu3
onchange="location.href=(form.lissamenu3.options[form.lissamenu3.selectedIndex].value)">
<option value="0"> Choose One</option>
<option value="0"></option> (This line adds a space in your menu)
<option value="http://www.lissaexplains.com"> Home</option>
<option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>
<option value="http://www.lissaexplains.com/tools.shtml"> Links</option>
</select>
</form>

The specific page with this code on it is right here
Basically anywhere it says Lissa you change it with what you want. Like "lissamenu3" can be changed to just regular "menu" and of course the links you change and the name of the links. I tested it out my self and it works perfectly. Also, if you want to add more links just copy "<option value="http://">Link Name</option>" and paste that until you have enough.


Looks alot easier to follow, nice find. Only if i can fix my mouseover...there is some FRI$ for the person to fix it lol
quartnee
I found two codes that might help, I hope these help. I read through it a little and it sounds like what your looking for, if not, you can search through the site I gave before and it will most likely help you out better than I.

First code:
Code:
<applet code="fphover.class" codebase="../_fpclass/" width="92" height="44">
<param name="bgcolor" value="#000000">
<param name="url" value="http://your address" valuetype="ref">
<param name="image" value="imagename1.gif" valuetype="ref">
<param name="hoverimage" value="imagename2.gif" valuetype="ref">
<param name="sound" value="yoursoundfile1.au" valuetype="ref">
<param name="hoversound" value="yoursoundfile2.au" valuetype="ref">
</applet>

Link to instructions for Code 1.

Second code:
Code:
<script language="JavaScript" type="text/javascript">
<!-- Hide the script from old browsers --

img0_on = new Image(width,height);
img0_on.src="image2.gif";
img0_off = new Image(width,height);
img0_off.src="image1.gif";
 
img1_on = new Image(width,height);
img1_on.src="image4.gif";
img1_off = new Image(width,height);
img1_off.src="image3.gif";

img2_on = new Image(width,height);
img2_on.src="image6.gif";
img2_off = new Image(width,height);
img2_off.src="image5.gif";
 
img3_on = new Image(width,height);
img3_on.src="image8.gif";
img3_off = new Image(width,height);
img3_off.src="image7.gif";

function over_image(parm_name)
    {
        document[parm_name].src = eval(parm_name + "_on.src");
    }
function off_image(parm_name)
    {
        document[parm_name].src = eval(parm_name + "_off.src");
    }
// --End Hiding Here -->
</script>

Link to instructions for Code 2.

For both of the links you have to scroll to the botton of the page for the instruction on how to use them. I didn't put the instructions because that would be to long of a post and I didn't want to copy her whole page x] Hope this helps.
LukeakaDanish
just add the following code to all your images:

Code:


onmouseover="this.src='hover_picture_path';" onmouseout="this.src='no_hover_picture_path"



of course replacing the file names.

This is not the best solution to the probnlem, but it works and im trying to make it as simple as possible for you. The perfect solution is the sdecond code which quertnee links to - but i would wait till you actually understand how it works before trying to implement it.

Luke
NjRocket
ok, i appreciate what you guys are doing. But the problem is, the script i have DID work a couple of days ago. I guess with me adding new scripts, something might have happened. So if anyone can actually find whats wrong with my script for the mouseovers instead of redoing, thats awesome. Thanks for trying guys
LukeakaDanish
right...well if it suddenly stopped working that means something else is messing it up...(probably)...you REALLY need to go through your code, bit by bit and fix up all the messy bits...this is tedious...but im posetive it will make your code work again...

BTW...i dont think the "hsrc" attribute does what you think!

--> i found a script which will make it do what you thought i would...

http://www.gtaforums.com/index.php?showtopic=226663

search for "hsrc" and youll find the script...

though i SINCERELY recomend using onmouseover and onmouseout instead! ALOT easier!!!
NjRocket
LukeakaDanish wrote:
right...well if it suddenly stopped working that means something else is messing it up...(probably)...you REALLY need to go through your code, bit by bit and fix up all the messy bits...this is tedious...but im posetive it will make your code work again...

BTW...i dont think the "hsrc" attribute does what you think!

--> i found a script which will make it do what you thought i would...

http://www.gtaforums.com/index.php?showtopic=226663

search for "hsrc" and youll find the script...

though i SINCERELY recomend using onmouseover and onmouseout instead! ALOT easier!!!


AHHH, thats what the damn problem was lol, i have the code from dynamics, but deleted some of it. The coding was right for images but not for the main code in between the <head>
NjRocket
lol, this is really odd. When i go to preview in frontpage, the mouseover works actually how i want it to. But when i save the index and upload it to the server, the mouseover doesn't work. Go figureeeee.
LukeakaDanish
well...one things for sure - you've once again (sry...but you really should start thinking!) placed your new content somewhere very wierd! between the ending head tag and the beginning body tag...what goes there...NOTHING! and i think you actually know that. place it inside the head.
LukeakaDanish
btw...if your using frontpage...it actually has a perfectly acceptable rollover function itself as far as i remember (though it is years since i used it) - try reading some help files for frontpage or something...
NjRocket
ugh, at this point, its starting to piss me off lol. I don't really want to put in a whole new script, how could it be working in frontpage, but not when i upload it to my site. ERRR ......
LukeakaDanish
do you want me to quickly and redo the hover thing so that it works? - i will send you the page code as it ends up...or something..? - your obviously quite new to HTML and Javascript, so i can understand if the whole thing seams a little daunting - however i can do a VERY SIMPLE function for you which handles this - there's practically not a page where i dont use hovers - so it really is easy...
NjRocket
LukeakaDanish wrote:
do you want me to quickly and redo the hover thing so that it works? - i will send you the page code as it ends up...or something..? - your obviously quite new to HTML and Javascript, so i can understand if the whole thing seams a little daunting - however i can do a VERY SIMPLE function for you which handles this - there's practically not a page where i dont use hovers - so it really is easy...


yea, can you like just set one set of an image up. Like just rename the spot and write IMAGE 1 and then where to put image Mouseover or something like that on one script? Than i can just fill in the files with the right directories. So basically besides placing the code in, all i have to do is rename the spot and put the actual image file in there. That would be pretty good. Thanks.
LukeakaDanish
http://lukedk.frih.net/temp/quickhover/

This is my very quick example...ive commented the code to make it as clear as possible for you...

This is actually a more advanced version than i was planning to show you preloading the images makes the hover work more smoothly...so i think its a good idea...

happy hovering!

Luke

PS: This is my last post for tonight...im off to bed...so if you have problems, either ask somebody else or...wait till tomorrow
NjRocket
thanks alot, it seems to work
Related topics
Drop down menu things
[JS] selecting an option from a drop down box
Javascript Drop down menus
drop down menus
Imagine:What you would do if Frihost drop down?
I need a Drop Down Bar Paying 100 FRIH$
help on a drop down menu!! Please Read!!
IP => Country => Drop Down Box!
Drop down Menu
FRIH$ For a dropdown navbar
Looking for Drop Down and Tab Menu Effects
how to put what you have query in a drop down list?
extra line from css in drop down menu
Tutorial: How to create flash drop down menus and site navig
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.