dropdown menu help 2

[ruler1]

Hi, i have aquired some useful code that i'd love to have added to my webpage however it will only show as links seperated by ' - ' i was wondering if anyone would know how i could change it so that it would appear in a dropdown menu instead? the code is below:

<p style="text-align: center;" class="nav">
<!– Add English to Chinese (Simplified) BETA –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-Chinese (Simplified) BETA">Chinese</a>
<!– END English to Chinese (Simplified) BETA–>
 - 
<!– Add English to French –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to French ">French</a>
<!– END English to French –>
 - 
<!– Add English to German –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to German">German</a>
<!– END English to German –>
 - 
<!– Add English to Italian –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to Italian">Italian</a>
<!– END English to Italian –>
 - 
<!– Add English to Japanese BETA –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to Japanese BETA">Japanese</a>
<!– END English to Japanese BETA –>
 - 
<!– Add English to Korean BETA –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to Korean BETA">Korean</a>
<!– END English to Korean BETA –>
 - 
<!– Add English to Russian BETA –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to Russian BETA ">Russian</a>
<!– END English to Russian BETA –>
 - 
<!– Add English to Spanish –>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8');[/URL] return false;" title="Google-Translate-English to Spanish ">Spanish</a>
<!– END English to Spanish –>
</p>

i'd be greatful for any tips, thank you

 

[johnwm]

Probably the best known of the drop-down menus is Suckerfish. Just use the google engine at the top of this page to find several examples of it's use.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[BillyRayPreachersSon]

If by 'drop down menu' you mean a standard select element, then the syntax is as follows:

<select name="elName">
   <option value="optValue">Text goes here</option>
</select>

If you want to pick up when something has been chosen, you can use the "onchange" event:

<select name="elName" onchange="someCodeHere();">
   <option value="optValue">Text goes here</option>
</select>

To load another page using JS, you can use:

window.location = '[URL unfurl="true"]http://www.whatever.address.here';[/URL]

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ruler1]

thanks for your help guys its much appreciated but i think i found another solution, not sure if its unauthordox to do it this way but it seems to work any how
this is the code i used which does seem to do the job.

<select name="language">
<option selected="Language">Translate Language</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8');[/URL] return false;">English to Arabic</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8');[/URL] return false;">English to Chinese</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8');[/URL] return false;">English to French</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8');[/URL] return false;">English to German</option>

<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8');[/URL] return false;">English to Italian</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8');[/URL] return false;">English to Japanese</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8');[/URL] return false;">English to Korean</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8');[/URL] return false;">English to Russian</option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8');[/URL] return false;">English to Spanish </option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cno&hl=en&ie=UTF8');[/URL] return false;">English to Norwegian </option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Csv&hl=en&ie=UTF8');[/URL] return false;">English to Swedish </option>
<option onclick="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Chi&hl=en&ie=UTF8');[/URL] return false;">English to Hindi</option>
</select>

i was just guessing with the code until i got it to function so maybe this might be useful to someone else? not sure if this is the correct way to do it but it works

thanks once again

 

[BillyRayPreachersSon]

You should use "onselect" on the select element, not "onclick" on each option.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ruler1]

hmm this is strange, it works with firefox but not with IE? i tried changing it to onselect and stil the same thing, maybe i am missing something?

 

[BillyRayPreachersSon]

Probably. What code do you have right now?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ruler1]

<select name="language">
<option selected="Language">Translate Language</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Car&hl=en&ie=UTF8');[/URL] return false;">English to Arabic</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8');[/URL] return false;">English to Chinese</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8');[/URL] return false;">English to French</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8');[/URL] return false;">English to German</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8');[/URL] return false;">English to Italian</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8');[/URL] return false;">English to Japanese</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8');[/URL] return false;">English to Korean</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8');[/URL] return false;">English to Russian</option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8');[/URL] return false;">English to Spanish </option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cno&hl=en&ie=UTF8');[/URL] return false;">English to Norwegian </option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Csv&hl=en&ie=UTF8');[/URL] return false;">English to Swedish </option>
<option onselect="window.open('[URL unfurl="true"]http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Chi&hl=en&ie=UTF8');[/URL] return false;">English to Hindi</option>
</select>

i cant see what im missing. im not really the best coder but i do try my best

 

[BillyRayPreachersSon]

Oops - my bad. I had a complete brain fart moment! It's "onchange", not "onselect". I'm not sure what I was thinking (or not!)

Try this:

<select name="language" onchange="window.open('[URL unfurl="true"]http://www.google.com/translate?u='[/URL] + encodeURIComponent(location.href) + '&langpair=' + this.value, '', '');">
   <option selected="true">Translate Language</option>
   <option value="en%7Car&hl=en&ie=UTF8">English to French</option>
</select>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ruler1]

that works 100% perfect, thanks Dan your a true gentleman. i couldnt think of any other way to do it but your version also saves on bandwidth too, thanks again.
This topic seems to be solved now