With as few choices as you have, I would be tempted to add them as a field of
radio buttons, and use CSS to replace the buttons with color swatches directly.
No need for any JavaScript at all.
<label class="swatch"><img src="red.png" alt="red" /><input type="radio"
name="color" value="red" /></label>
...
label.swatch { display: inline-block; height: 20px; width: 20px; }
label.swatch input { display: none; }
Where you might need to break out the Prototype is to decorate the chosen
element, can't think of how to do that in CSS off the top of my head.
$$('input[name="color"]').each(function(elm){
if(elm.checked){
elm.previous('img').addClassName('selected');
}else{
elm.previous('img').removeClassName('selected');
}
});
Walter
On Mar 21, 2013, at 6:32 AM, Phil Petree wrote:
> Morning Walter...
>
> That was the approach I took last night... it works but its just not as
> attractive as I'd like... still seems like their should be a more stylish way.
>
> I may just opt for something like the color selector used on a number of
> clothing sites... like this one:
> http://www.brooksbrothers.com/mens/polos-knits/0298,default,sc.html?lid=leftnav-menu
>
> Basically they just put color swatch/squares in a row and allow you to
> mouseover to see the effects and a click selects that color.
> On Thu, Mar 21, 2013 at 12:05 AM, Walter Lee Davis <[email protected]> wrote:
> I think you're going to need to update a swatch next to the picker, maybe.
> The select is remarkably styling-resistant in Safari, probably Chrome as
> well. I would absolutely position a little dot off to the left of the select,
> and update its background color on the change event of the select.
>
> Walter
>
> On Mar 20, 2013, at 3:12 PM, Phil Petree wrote:
>
> > I want users to be able to pick from one of 6 colors for a folder (like a
> > file folder).
> >
> > At first I thought about doing this as a <select><option value='color_blue'
> > style='background-image: url(blue.png);'></option>
> >
> > But I'm discovering this will really only render well in firefox...
> >
> > Has anyone discovered how to do this using proto/scripty?
> >
> > Thanks
> >
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Prototype & script.aculo.us" group.
> > To unsubscribe from this group and stop receiving emails from it, send an
> > email to [email protected].
> > To post to this group, send email to
> > [email protected].
> > Visit this group at
> > http://groups.google.com/group/prototype-scriptaculous?hl=en.
> > For more options, visit https://groups.google.com/groups/opt_out.
> >
> >
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
