[Javascript] select box question
Shawn Milo
ShawnMilo at Runbox.com
Thu Jan 6 17:28:37 CST 2005
Paul,
Yeah, I tried the thing myself, and the text ' ' showed up
in the select.
As for my solution, it solved the original post's question, because it
asked how you could
have extra spaces in there -- it wasn't until later that the OP
explained what it was for.
I agree with your suggestion for a solution, and just want to toss in a
reminder that
the OP needs to remember to use a fixed-width font, or it will all be
for naught.
Shawn
Paul Novitski wrote:
> 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
>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
More information about the Javascript
mailing list