Creating drop menu navigation with <select> - html

I've managed to make myself drop menu navigation with html <select>. I've encountered one problem, though.
My external links aren't working. Namely Youtube.
Here is the code:
<select ONCHANGE="location = this.options[this.selectedIndex].value;">
<option value="" selected="selected">Navigation</option>
<option value="index.html">Home</option>
<option value="detroitvideoproduction.html">Video Production</option>
<option value="locationsounddetroit.html">Location Sound</option>
<option value="videoeditingdetroit.html">Video Editing</option>
<option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
<option value="demoreel.html">Demo Reel</option>
<option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
<option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
<option value="dslrrentalsdetroit.html">Camera Rental</option>
<option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
<option value="griprentalsdetroit.html">Grip Rental</option>
<option value="camerasupportdetroit.html">Camera Support</option>
<option value="about.html">About Us</option>
<option value="contact.html">Contact</option>
</select>
As you can see I have 2 external links. One to Vimeo, the other to Youtube.
When you select Vimeo it works perfectly fine and takes you to the appropriate vimeo page,
but when you select Youtube, it does nothing at all.
I know the URL in the link is correct, I checked it before I posted this.
Anybody know why Youtube wont work when Vimeo will?

Well you're not going to want to hear this, but it worked fine for me... i copied and pasted the code and tested it with Chrome and it went to your page just fine.

You might want to change onChange with window.location.href=this.value
So, the correct code is:
<select onChange="window.location.href=this.value">
<option value="" selected="selected">Navigation</option>
<option value="index.html">Home</option>
<option value="detroitvideoproduction.html">Video Production</option>
<option value="locationsounddetroit.html">Location Sound</option>
<option value="videoeditingdetroit.html">Video Editing</option>
<option value="custommotiongraphicsdetroit.html">Custom Graphics</option>
<option value="demoreel.html">Demo Reel</option>
<option value="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</option>
<option value="http://vimeo.com/liveoutloudproductions">Vimeo</option>
<option value="dslrrentalsdetroit.html">Camera Rental</option>
<option value="lectrosonicsrentalsdetroit.html">Audio Rental</option>
<option value="griprentalsdetroit.html">Grip Rental</option>
<option value="camerasupportdetroit.html">Camera Support</option>
<option value="about.html">About Us</option>
<option value="contact.html">Contact</option>
</select>

Some browsers may be objecting to seeing a ? in the string in a select list. Try converting your YouTube URL using TinyURL. I haven't tested, but I'm guessing that will do the trick.

Related

How to use select inputs with Crowd HTML for mturk

I'm trying to set up a question with a select/dropdown for answers on mechanical turk, using Crowd HTML.
This is what I've got so far, but it doesn't give me a dropdown feature when testing, and it just appears as an ordinary text input. The documentation says this:
type
Takes a string to set the HTML5 input-type behavior for the input. Examples include file and date.
So based on this I think it should work but clearly no dice. Any ideas on how to do this? Thank you
<crowd-input name="qualificationType" type="select" required>
<option value="">High School</option>
<option value="">Some College</option>
<option value="">Associate Degree</option>
<option value="">Bachelor's Degree</option>
<option value="">Professional Degree</option>
<option value="">Master's Degree</option>
<option value="">Doctorate Degree</option>
</crowd-input>
A dropdown list is a select element, which you can use in mturk. Change what you have to:
<select name="qualificationType" required>
<option value="">High School</option>
<option value="">Some College</option>
<option value="">Associate Degree</option>
<option value="">Bachelor's Degree</option>
<option value="">Professional Degree</option>
<option value="">Master's Degree</option>
<option value="">Doctorate Degree</option>
</select>
And it should work

multiple select is not working at all on chrome

I'm having some weird issues.
I need a multiple select with some values in it, but somehow if I type
multiple and size values to select tag they are not working.
For that I decided to make a new clear file to test it and the result is same.
<form action="" method="post">
<select name="data[]" multiple size="5">
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
</select>
</form>
These are my codes, and this is below is the result:
screenshot
I can't even select them one by one, I mean browser is not highlighting the ones that I selected, I need to hold CTRL to hightlight them, as like working on windows I don't know where is the problem.
Most likely you have installed some Chrome extension that is preventing the Ctrl key to work as expected. Try removing that.
Have you bind it inside select tags?, you have to.
<select name="values" multiple>
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
<option value="4">value4</option>
</select>
Hope it helps.
Please go with HTML multiple Attribute.
Try Below code:
<select name="Custom_Name" multiple>
<option value="1">1Value</option>
<option value="2">2Value</option>
<option value="3">3Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
<option value="4">4Value</option>
Al the best.

Drop-down lists for contact form

Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Form Select List - Initially selected option not working correctly in IE

I have a form with a select list of various office locations, i have it set so it should have the office initially selected BUT it does not seem to Work in IE!!! (no surprise)
here is what i am using to preselect:
<option selected value="Office 1">Office 1</option>
here is the site: http://www.nwtaxpreparation.com/offices/122andpowell.html
let me know if you have any solutions!
HTML 4 uses:
<option value="foo" selected>Bar</option>
XHTML REQUIRES:
<option value="foo" selected="selected">Bar</option>
To say that "there is no such thing as selected="whatever" is false!
I recently had the same problem with selected options tags. I had a series of select boxes like this:
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I couldn't work out why the correct items wouldn't select. I later discovered that it was because there was no name attribute on the select item. Firefox seems to need this to work properly, even in version 15.
<select name="type">
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I changed it to the above and selected="selected" works fine now.

Selected option in view when SIZE is greater than 1

How do you get the selected option to be in view on page load?
<select name="whatever" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected>7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
If I understand you correctly, you want the item shown in the dropdown list to be the selected item when the page loads. By default behavior the selected view does in fact show "in view" on page load. What are you seeing that you do not expect?
note: your html should be
<option value="7" selected="selected">7</option>
to be a valid html tag.
All browsers I've tested (Firefox, Chrome, Opera and IE7) scroll the contents to display the selected option.
Edit: Windows XP