I've got this code as a means to switch CSS styles:
<div>
<a href="#" onclick="setActiveStyleSheet('Red'); return false;" title="Red Style"><img src="/graphics/styleqube_red.gif" width="5" height="5" alt="" border="0" /> Yokum Red</a>
<a href="#" onclick="setActiveStyleSheet('Blue'); return false;" title="Blue Style"><img src="/graphics/styleqube_blue.gif" width="5" height="5" alt="" border="0" /> Champlain Blue</a>
<a href="#" onclick="setActiveStyleSheet('Green'); return false;" title="Green Style"><img src="/graphics/styleqube_green.gif" width="5" height="5" alt="" border="0" /> Adirondack Green</a>
<a href="#" onclick="setActiveStyleSheet('Web 2.0'); return false;" title="Web 2.0"><img src="/graphics/styleqube_web20.gif" width="5" height="5" alt="" border="0" /> Web 2.0 (alternate testing)</a>
</div>'
(You can see it in use here.)
But I'd like to make it so that instead of clicking an HTML link, a visitor can use a pulldown menu that automatically initiates the action as soon as it's selected (no "Submit" button needed). Can anybody please help me convert the above code to a drop-down select code. Preferably at a slightly smaller size than normal if that's even possible. Thanks a bunch.
Nip it in the bud!
andy206uk posted this at 12:04—7th October 2006.
He has: 1,742 posts
Joined: Jul 2002
I'm no javascript wiz but isn't it something like:
<select name="blah"><option onclick="setActiveStyleSheet('Red'); return false;" >Red Style</option>
<option onclick="setActiveStyleSheet('Blue'); return false;" >Blue Style</option>
<option onclick="setActiveStyleSheet('Green'); return false;" >Green Style</option>
<option onclick="setActiveStyleSheet('Web 2.0'); return false;" >Web 2.0 Style</option>
</select>
'
?
Andyk
Music Rants News and Reviews | My Photoblog | Blog of a Web Designer
Give a man a fish and you feed him for a day. Teach him to use the Net and he won't bother you for weeks.
Abhishek Reddy posted this at 14:20—7th October 2006.
He has: 3,285 posts
Joined: Jul 2001
Whilst binding to onclick will work in some browsers for when the user clicks an option, it won't work when the option is selected by keyboard, or even at all in browsers such as Konqueror.
The onchange event is more general:
<select name="blah" onchange="setActiveStyleSheet(this.options[this.selectedIndex].value);"><option value="Red">Red Style</option>
<option value="Blue">Blue Style</option>
<option value="Green">Green Style</option>
<option value="Web 2.0">Web 2.0 Style</option>
</select>
this.selectedIndex is an integer representing the selected option. this.options[] is an array of option nodes in the current select node. value holds whatever argument you want to send to the setActiveStyleSheet function.
abhishek.geek.nz
fifeclub posted this at 01:51—9th October 2006.
He has: 675 posts
Joined: Feb 2001
Thanks. Worked great. Only thing I had to do is add a top dummy option directing people to "choose theme", otherwise you couldn't actually choose the top theme for some reason.
Nip it in the bud!
Abhishek Reddy posted this at 02:41—9th October 2006.
He has: 3,285 posts
Joined: Jul 2001
Good point. I presumed one of the themes would be the current theme anyway, so it would be selected by default. You can set the default option by adding selected="selected" in the option tag.
abhishek.geek.nz