Make form selects go left-to-right?

[Eris]

In forms, is it possible to make "select" options scrollable from left-to-right, as opposed to up-and-down? I have never seen it done before, but it would be extremely useful for a form I'm currently working on. If there is any way to do this, I would appreciate knowing. Thanks!


ex: this format
(= equals scrollbar, | equals option dividers)

___________
|1|2|3|4|5|
===========

instead of the standard
(|| equals scrollbar, - equals option dividers)

_
1||
-||
2||
-||
3||
-||
4||
-||
5||
¯||

[Dan615]

Quick answer: no

Long answer: Yes, if you want to use layers and individual text input fields, you can make it so that they scroll side ways, and when you click them they turn a different color...i think i'll try and write that up :)

[Eris]

It sounds great! :D

This (http://www.dischord.net/synesthesia/searchtest.htm) is the basic search page I made for what I'm doing. I want the "number of syllables" and the "contains this many letters" fields to go sideways as selects. (In this way, I can set the selects to "multiple", so I can take out extraneous possibilities and just have "any", "1", "2", and so on, without "1 or 2", etc.)

Anyway, if you do decide to figure this sideways deal out, let me know, eh? =) I would greatly appreciate it - and thanks for writing!

---

Also, I have one other problem: I can't figure out how to get the checkbox text and radio text to be clickable, so that the checkbox/radio will be checked without the user having to click right on them. Apparently this only works in IE, and it only works - at least with the checkbox - if there are no values. I need values, but I can't get it to work that way. I have no idea about the radios. I'm kind of rambling here, but maybe someone knows what I mean.

[Dan615]

Actually, I just though of another option...instead of using that sideways scrolling thing with text-input, i can make a sideways scrolling thing with radio buttons...it's just a possibility, I can still make the sideways select, but it would take some javascript and stuff to get it right...i'll make both of them, you can look at the options :)



As for the radio buttons and checkboxes, there's a way to do that with JavaScript as well...there's probably an easier way that I don't know about, but the JS wouldnt be too hard either




Edit: OK I made a test...keep in mind, I haven't make it aesthetically pleasing yet, that's gonna take some more work ;) This should work in most browsers supporting CSS 1...anyone else needs to update their browser, as I always say :p

http://www.thehardwire.com/~crazymofo/testing/test.html

The input field on the bottom is to make sure the selection process in JavaScript is going right...that'll be gone, and I'll explain how to set it up if you like it...I threw this together in 10 minutes, I'll work on it some more, uh, later :)



Edit again (one day later): I updated it for looks and functionality, now all the display options are customizable...I'm gonna make it so the default display settings are automatically set when the page loads, to make the HTML coding shorter...anything else you want customizes, tell me :)

[Eris]

Wow! Very nifty!

Okay, a couple questions, because I am kind of lost... =)

- What is the "this" in "onclick=selectItem(this)" doing? Is there a variable missing somewhere for the "this"?

- Similarly, I'm not seeing any name for this selection. Should I put a "name=" in each of the input strings/areas?

- On the page with your code I put up (http://www.dischord.net/synesthesia/searchtest2.htm), line 23 ("item.form.displayChosen.value") has an error, but I have no idea why.

- Is there any way to a) have the "any" choice automatically selected, and then b) allow the user to check and uncheck any items he wants? (I ask b because I am cannot get anything unchecked without reloading the page.)

- Is there any way to make the select poop out to only its necessary max width? Say, "any 1 2 3 4" instead of the way it currently looks, "any______1______2______3______4"? (minus the underlines, of course; alt+0160 doesn't work in this bbs for some reason)

- Just a note: All of this code is going to be embedded in a php page, so I'm hoping it will execute. ;)

Thanks so much!!!!!

[Eris]

Oh, and as for the checkbox/radio text thing, I've "kinda sorta" got it working on my original searchtest page (http://www.dischord.net/synesthesia/searchtest.htm).

On lines 59-66 is the header code for it. "(stuff)" is obviously not right, but since it shows that I don't know a lot about java, I have no idea what to change it to. <g>

On lines 94-96 is the option I'm trying to get it to work on. I have three checkboxes with the same name (tho' with different values, of course). I am now getting it to work WITH a value as long as their is only one checkbox under the same name (same form option, I mean). So, say, I can get the name "sex" to work as long as there's only "male", but I cannot get it to work on
"female" and "androgynous" at the same time, because the code apparently doesn't like the fact that they all are using the same name, even if their values are different. Here is the code I'm currently using for each of them:

onClick="changeBox(document.namesearch.sex);return false"

I tried changing it to (document.namesearch.sex.male) and (document.namesearch.sex.female), etc., but it doesn't like that code either. ::sighs:: I wish I knew java...

[Dan615]

Originally posted by Eris
Wow! Very nifty!

Okay, a couple questions, because I am kind of lost... =)

- What is the "this" in "onclick=selectItem(this)" doing? Is there a variable missing somewhere for the "this"?

- Similarly, I'm not seeing any name for this selection. Should I put a "name=" in each of the input strings/areas?

- On the page with your code I put up (http://www.dischord.net/synesthesia/searchtest2.htm), line 23 ("item.form.displayChosen.value") has an error, but I have no idea why.

- Is there any way to a) have the "any" choice automatically selected, and then b) allow the user to check and uncheck any items he wants? (I ask b because I am cannot get anything unchecked without reloading the page.)

- Is there any way to make the select poop out to only its necessary max width? Say, "any 1 2 3 4" instead of the way it currently looks, "any______1______2______3______4"? (minus the underlines, of course; alt+0160 doesn't work in this bbs for some reason)

- Just a note: All of this code is going to be embedded in a php page, so I'm hoping it will execute. ;)

Thanks so much!!!!!

- "this" is just an object referring to the object you're currently in...so when it says "selectItem(this)", it's selected THAT item

- The name for the select is in the hidden field, whatever you choose to name it. In your example I see you've named it "chosen", so that would be the select name...I think I'll make a generator for you so you don't have to worry about coding it all yourself

- "displayChosen" is that text field under the orginal test I made, to make sure that it was working properly...I'll get rid of that for you

- I'll make is so that when you click it it highlights, when you click it again it deselects...it'll be easy the way I set it up

- I'll look into the size thing...there's probably a way to resize it using JavaScript

- It'll work with PHP, I've never had any trouble with embedding anything with PHP...if you need any help with that too, just ask :)


I have a lot of school stuff going on, finals are next week, and I have a presentation for Biology...I'll find some time to squeeze this little project :D I have a lot of free time :p