[Javascript] select box question
Shawn Milo
ShawnMilo at Runbox.com
Thu Jan 6 16:35:50 CST 2005
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
>
>
More information about the Javascript
mailing list