[Javascript] select box question
Paul Novitski
paul at novitskisoftware.com
Thu Jan 6 17:21:36 CST 2005
Shawn,
I can see your wordspacing idea work only as long as the data values are
all single words of the same length. Otherwise, the second column will
have a ragged left edge mimicking the ragged right edge of the first
column, and a third column if any will be further distorted. The only way
I can see to get that second column (at position C2) to line up is to pad
each first-column word (of length C1) with N blank spaces where N = C2 -
C1. Tyson said that didn't work when applied with Javascript
because it seemed to be interpreted as a string, not the html character
code... I'd like to see that, and if debuggable it might be the best solution.
I can see building a multiple-column select list using a table inside a
scrolling div, the height of which toggles between one row and several
rows. Not standards-compliant by a long shot, but doable.
Paul
At 02:35 PM 1/6/05, Shawn Milo wrote:
>Take the style stuff I put in for the select and apply it to the options, too.
>
>Better yet, add this in your HTML head:
>
><style type="text/css">
> select{
> word-spacing: 2em;
> }
> option{
> word-spacing: 2em;
> }
></style>
>
>This will make every option correct. You declare them together
>in one style definition with something like "select, option{" or
>"select option{". I'm too lazy to look up the syntax, though. Try
>them both.
>
>This style should apply whether the option was added by JS or
>in the original HTML.
>
>Shawn
>
>tyson wrote:o
>
>>The word spacing doesn't seem to work right. When I change it in
>>javascript and then add the item to the select box, the spacing isn't
>>changed until I click on the select box. It also adds like 5 spaces even
>>when I'm setting the spacing to 1em;
>>
>>I'm doing this because I need to align the data in my select box with the
>>column headings that I created. All I really need to do is add 2 spaces
>>in between each data value so that they align with the top headings. The
>>reason I'm adding a value from javascript is because I'm having a user
>>add some data from a window, and the opening form needs to be refreshed
>>with the new data. That probably sounds way confusing so I'll just stop
>>yapping-
>>
>>
>>Shawn Milo wrote:
>>
>>>Okay, I think I finally get what you're getting at.
>>>
>>>Forget the JS and just add the word-spacing stuff to the select itself:
>>><select id="my_select_box" style="word-spacing: 5em;">
>>>
>>>Better yet, use a stylesheet, or a text/css section in the HTML head.
>>>
>>>Now that will do any one that is selected. If you want to only do specific
>>>ones, then I guess you'll have to turn that on and off dynamically with
>>>JS just when those are the selectedIndex.
>>>
>>>Let me know if this fixes your problem.
>>>
>>>By the way, what strange set of circumstances is making this feature
>>>desirable?
>>>
>>>Shawn
>>>
>>>
>>>
>>>>I want to be able to add a value into my selectbox from javascript that
>>>>will have more than one blank space between characters. The demo that
>>>>you gave to me did that, but it only shows the blank spaces when I
>>>>click on the select box. When I'm not clicking on the select box, the
>>>>blank spaces are not shown. For example, I would want this
>>>>string "hello world" to be shown in the select box with those 5
>>>>spaces in between. .
>>>>Shawn Milo wrote:
>>>>
>>>>
>>>>
>>>>>Please explain more clearly. What is it you want to have happen?
>>>>>
>>>>>Shawn
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>>I tried your test and it works, but it only shows the added spaces
>>>>>>when you click on the select box. I need those blank spaces shown all
>>>>>>the time, even when the user isn't clicking on it. Is there some way
>>>>>>to get that working?
>>>>>>
>>>>>>Shawn Milo wrote:
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>>Tyson:
>>>>>>>
>>>>>>>Hi. You can use CSS to do this:
>>>>>>>document.forms[0].my_select_box[document.forms[0].my_select_box.length
>>>>>>>- 1].style.wordSpacing = '5em';
>>>>>>>
>>>>>>>
>>>>>>>Full working and tested HTML below.
>>>>>>>
>>>>>>>Shawn
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>><html>
>>>>>>><head>
>>>>>>>
>>>>>>><title>Javascript Test</title>
>>>>>>>
>>>>>>><script type="text/javascript">
>>>>>>>
>>>>>>>
>>>>>>>function testStuff(){
>>>>>>>
>>>>>>>//document.forms[0].my_select_box.options[document.forms[0].my_select_box.length]
>>>>>>>= new Option('hello hi');
>>>>>>>
>>>>>>>//document.forms[0].my_select_box.options[document.forms[0].my_select_box.length]
>>>>>>>= new Option('hello hi');
>>>>>>>
>>>>>>>document.forms[0].my_select_box.options[document.forms[0].my_select_box.length]
>>>>>>>= new Option('hello hi');
>>>>>>>
>>>>>>>
>>>>>>>document.forms[0].my_select_box[document.forms[0].my_select_box.length
>>>>>>>- 1].style.backgroundColor = '#fad762';
>>>>>>>
>>>>>>>document.forms[0].my_select_box[document.forms[0].my_select_box.length
>>>>>>>- 1].style.fontSize = '17pt';
>>>>>>>
>>>>>>>document.forms[0].my_select_box[document.forms[0].my_select_box.length
>>>>>>>- 1].style.wordSpacing = '5em';
>>>>>>>}
>>>>>>>
>>>>>>></script>
>>>>>>></head>
>>>>>>>
>>>>>>><body>
>>>>>>>
>>>>>>><form id="testForm" method="post" action="./test.html">
>>>>>>>
>>>>>>> <select id="my_select_box">
>>>>>>> <option value="0">0</option>
>>>>>>> <option value="1">1</option>
>>>>>>>
>>>>>>> </select>
>>>>>>>
>>>>>>> <input type="button" id="btnTest" value="This is a test."
>>>>>>> onclick="testStuff();" />
>>>>>>></form>
>>>>>>>
>>>>>>></body>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>>Hi-
>>>>>>>>When I add an item into my select box through javascript, I want
>>>>>>>>multiple blank spaces to be kept in the string that's being
>>>>>>>>added. For some reason it only allows one blank space at a time.
>>>>>>>>Here's my code-
>>>>>>>>
>>>>>>>>##########
>>>>>>>>document.forms[0].my_select_box.options[document.forms[0].my_select_box.length]
>>>>>>>>= new Option ('hello hi')
>>>>>>>>##########
>>>>>>>>
>>>>>>>>There should be five spaces between the 'hello' and 'hi', but only
>>>>>>>>one blank space shows up in the select box. I've tryed adding the
>>>>>>>>spaces with the char_code, that doesn't work. I've also tryed
>>>>>>>>adding spaces with  , and that doesn't work. Any help would be
>>>>>>>>appreciated.
>>>>>>>>
>>>>>>>>_______________________________________________
>>>>>>>>Javascript mailing list
>>>>>>>>Javascript at LaTech.edu
>>>>>>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>_______________________________________________
>>>>>>>Javascript mailing list
>>>>>>>Javascript at LaTech.edu
>>>>>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>
>>>>>>_______________________________________________
>>>>>>Javascript mailing list
>>>>>>Javascript at LaTech.edu
>>>>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>_______________________________________________
>>>>>Javascript mailing list
>>>>>Javascript at LaTech.edu
>>>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>>>
>>>>>
>>>>>
>>>>>
>>>>
>>>>_______________________________________________
>>>>Javascript mailing list
>>>>Javascript at LaTech.edu
>>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>>
>>>>
>>>
>>>_______________________________________________
>>>Javascript mailing list
>>>Javascript at LaTech.edu
>>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>>
>>>
>>
>>_______________________________________________
>>Javascript mailing list
>>Javascript at LaTech.edu
>>https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
More information about the Javascript
mailing list