[Javascript] The Non-Breaking Space of Doom

[Andrew Crawford]

Thanks.  You are correct: it would probably be better to do it with CSS.
 I was just being lazy and didn't want to go back up the chain and make
the changes to my data source to return the indentation level as a
separate item.

So, now, I have:

function processReqChange() {
    if (req.readyState == 4 && req.status == 200) {
        var rows = eval(req.responseText);
        var gotdata;
        gotdata = (rows) ? true : false;

        // remove any previously-created folders
        document.getElementById("form_folder").options.length = 1;

        if (gotdata) {
            for(r in rows) {
                // populate the form_folder select list
                var newelementidx =
window.top.document.getElementById('form_folder').options.length;

document.getElementById("form_folder").options[newelementidx] = new
Option(rows[r].label, rows[r].id, false, false);
                var indenttext = "margin-left:"+rows[r].indent+"em";

document.getElementById("form_folder").options[newelementidx].setAttribute("style",indenttext);
            }
        }
    }
}

... that creates select lists that look like this:

<option value="1" style="margin-left: 0em;">Item-1</option>
<option value="2" style="margin-left: 1em;">Item-1.1</option>
<option value="3" style="margin-left: 1em;">Item-1.2</option>
<option value="4" style="margin-left: 2em;">Item-1.2.1</option>
<option value="5" style="margin-left: 0em;">Item-2</option>
<option value="6" style="margin-left: 1em;">Item-2.1</option>

... and displays like Example 1 in my original post.

Andrew Crawford

Paul Novitski wrote:
> At 08:16 PM 1/9/2006, Andrew Crawford wrote:
> 
>> Item-1
>> &nbsp;Item-1.1
>> &nbsp;Item-1.2
>> &nbsp;&nbsp;Item-1.2.1
>> Item-2
>> &nbsp;Item-2.1
> 
> 
> Andrew,
> 
> Without seeing more of your script I can't tell why it's outputting
> &amp; for &.  Can you share more of it, ideally in a live demo page?
> 
> However, I would argue for an entirely different approach: instead of
> attempting to paint a particular visual appearance in HTML using
> non-breaking spaces, I recommend that you output semantically-meaningful
> HTML which you then style separately with CSS.
> 
> Here's how I'd mark up your example (probably augmented by some ids &
> class names):
> 
> <ul>
>   <li>Item-1
>     <ul>
>       <li>Item-1.1</li>
>       <li>Item-1.2
>         <ul>
>           <li>Item-2.1</li>
>         </ul>
>       </li>
>     </ul>
>   </li>
> </ul>
> 
> In other words, a set of nested unordered lists.  Using CSS you can
> style these in an amazing variety of ways, including the simple
> indenting you're attempting now.  In contrast, your &nbsp; approach
> leaves you with little or no flexibility when it comes time to change
> the menu's appearance.   Separating structure (HTML) from presentation
> (CSS) from behavior (JavaScript) can improve work quality and greatly
> speed future modifications.
> 
> It looks like you know enough JavaScript to output a nested list
> structure, but let us know if you need a hand.
> 
> Here's a cool site about styling lists as menus:
> http://css.maxdesign.com.au/
> 
> To illustrate the many ways that CSS can style a single page of HTML
> markup, check out the CSS Zen Garden:
> http://csszengarden.com/
> 
> An excellent CSS listserve is CSS-D:
> http://lists.css-discuss.org/mailman/listinfo/css-d
> 
> Regards,
> Paul
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>