PDA

View Full Version : Need drop down help..PLEASE



Lovergirl
11-07-2006, 04:57 PM
I am trying to make a drop down with colors for the end user to be able to pick a color. I have the colors up on the page www.easyorderform.com/form I am just trying to make the drop down of colors and I am stuck, and I do not have Flash, however I do have Fireworks. Any suggestions, please help a newbie to the internet.
Thanks:cool:

Lovergirl
11-07-2006, 04:58 PM
Actually the page is http://www.easyorderform.com/form.html

mwinter
11-07-2006, 08:57 PM
The select element, or rather its option element children, may only contain text. You would be better off using radio buttons. You should also give appropriate alternative text to all of those images ("Lime", "Gold", "Sapphire", and so on).

The image at the start is excessively wide and causes a horizontal scrollbar, here. All upper-case letters are recognised for being harder to read than lower- or mixed-case; consider rewriting the relevant parts. Use labels: don't place the label as default content in form controls.

Mike

Lovergirl
11-08-2006, 03:14 PM
The select element, or rather its option element children, may only contain text. You would be better off using radio buttons. You should also give appropriate alternative text to all of those images ("Lime", "Gold", "Sapphire", and so on).

The image at the start is excessively wide and causes a horizontal scrollbar, here. All upper-case letters are recognised for being harder to read than lower- or mixed-case; consider rewriting the relevant parts. Use labels: don't place the label as default content in form controls.

Mike
Those pictures are actually all separate, is there anyway to make a drop down, whether it is in flash, or another language?? Even if it is like the colors pallete that they have here.

mwinter
11-09-2006, 12:55 PM
Those pictures are actually all separate,

I'm aware of that.



is there anyway to make a drop down, whether it is in flash, or another language??

And still have it submit the choice? Reliably? Not in Flash. With some effort, it could be scripted, but you'd still have to use radio buttons, anyway, for the fall back.



Even if it is like the colors pallete that they have here.

That is an aid, not a necessity.

Mike

Lovergirl
11-09-2006, 05:08 PM
MWinters,
I appreciate your feedback I really do. However in this quick reply box where you can change the color, is there anyway to get a drop down box like this one??

ItsMeOnly
11-09-2006, 06:31 PM
Well, you might use something like suckerfish menu (that is a list disguised as dropdown- avaliable at DD among many others) with simple JS backend to store selected variable to be passed as order, like

<li><img src="magenta.gif" onclick="colorValue= 'magenta';hideMenu()"></li>

Lovergirl
11-09-2006, 08:17 PM
The only probelm with that is I want the end user to pick the color to send it back to me on a form. Basically I am trying to make it where the user enters basic info(address, phone, ect, and then picks the product that they want, including the color. So basically I want the info that they enter in to be sent back to me. So I can contact them, check out what I have, www.easyorderform/form.html

Lovergirl
11-09-2006, 08:17 PM
Sorry www.easyorderform.com/form.html

ItsMeOnly
11-09-2006, 09:40 PM
Yes, we know, and the color the user chooses will in in the form, however it will be selected from a non <select> menu, and filled in by simple javascript function.


<input type="hidden" id="color">
<ul id="suckerfish">
<li>Currently selected color: <span id="preview">none</span>
<ul id="menu">
<li><img src="magenta.gif" onclick="setColorValue('magenta');"></li>
<li><img src="orange.gif" onclick="setColorValue('orange');"></li>
</ul></li>
</ul>
<script type="text/javascript">
function setColorValue(value) {
var colorValueField = document.getElementById('color');
var previewObject = document.getElementById('preview');

if (colorValueField) colorValueField.value = value;
if (previewObject) previewObject.innerHTML = "<img src=\"" + value +".gif\"> "+ value;

hideMenu()
}

function hideMenu() {
var menuObj = document.getElementById('menu');
if (menuObj && menuObj.style) menuObj.style.display = "none";
}
</script>

This is a crummy, but working script (I hope someone will come with an optimized version), you'll need to integrate it into your page.
A few assumptions are made:
1) images are gifs, and their names represent color "value".
2) you might want to integrate suckerfish (or other CSS based) menu (of course, this will work even without the suckerfish menu, when you just attach onclick event to images, yet IMHO it will look better, and you wanted a "dropdown")...