hiding/showing: right way?

Discussion in 'Javascript' started by EventListener, Oct 14, 2005.

  1. I have a folder/file tree that is dynamically generated from an xml
    file. The way I've written it seems to work. Since I'm a fairly novice
    javascript programmer, I'm concerned that there may be a hidden
    downside to coding this way vs. hiding/showing using style.visibility.

    My tree starts with only the top level folders showing. When the xml
    for the tree loads, I have a recursive function that creates subtrees
    for each folder, then saves them as a property of that folder.

    buildTree: function( root, offset )
    {
    var curNode = root;
    var myIndent = 20;
    var myHeight = 22;

    if( offset == null )
    {
    myIndent = 2;
    }
    else
    {
    myIndent += offset;
    }

    var spacer = "";
    for( var i = 0; i < myIndent;i++ )
    {
    spacer += "-";
    }

    var elem = document.createElement( "div" );
    elem.style.top = 0;

    if( curNode.nodeName == "folder" )
    {
    elem.id = "FolderElement";

    var children = curNode.childNodes;
    var subTreeItems = new Array( );
    for( var i = 0; i < children.length; i++ )
    {
    if( children.nodeType == "1" )
    {
    var newChild = this.buildTree( children, myIndent );
    subTreeItems.push( newChild );
    }
    }

    var folderName = curNode.attributes[0].nodeValue;
    var isEmpty = subTreeItems.length > 0 ? false : true ;
    var line = this.makeFolderLine(folderName , myHeight, myIndent,
    isEmpty );

    elem.appendChild( line );

    Event.observe( line, "mouseup", this.__neh_toggleFolder_closure,
    false);

    elem["subTreeData"]= subTreeItems;
    }
    else if( curNode.nodeName == "item" )
    {
    elem.id = "ItemElement";
    elem.className = "item";
    var itemObj = new this.ItemObject( curNode );
    var line = this.makeItemLine( itemObj, myHeight, myIndent );

    elem.appendChild( line );

    Event.observe( line, "mousedown", this.__neh_selectItemDown_closure,
    false);

    }

    return elem;
    },


    When the user opens a folder, the subtree elements are appended.

    Are there any dangers/concerns using this method?

    (Warning for the anti-library folks -- I am using the library
    prototype.js to add and remove event listeners)

    Thanks,

    Cathy
     
    EventListener, Oct 14, 2005
    #1
    1. Advertising

  2. Re: hiding/showing: right way?

    The only problem I see with it is that it would assign multiple
    elements with the same ID attribute. This is a HUGE (X)HTML no no. You
    could set elem.id to elem.className (or elem.className =
    elem.className + newClassName) instead.

    But other than that the code seems sound. I might, however, point you
    to http://gazingus.org/html/DOM-Scripted_Lists_Revisited.html, which
    has a hierarchal tree script that is simply attached to a list. That
    means you would simply have to use basic DOM functions (or even
    innerHTML) to modify the tree contents and ignore the heavy lifting
    altogether. This would also have the advantage of being more usable to
    people with older browsers or JavaScript turned off.
     
    Joshie Surber, Oct 17, 2005
    #2
    1. Advertising

  3. Re: hiding/showing: right way?

    Joshie Surber wrote:
    > The only problem I see with it is that it would assign multiple
    > elements with the same ID attribute. This is a HUGE (X)HTML no no. You
    > could set elem.id to elem.className (or elem.className =
    > elem.className + newClassName) instead.
    >


    Thanks Joshie. I've noticed that using elem.className is too slow,
    since I have multiple class names and have to use a regex to extract
    the proper one. But point taken about unique ids. I'll probablly just
    add a custom property to indicate folderline vs. fileline.

    > But other than that the code seems sound. I might, however, point you
    > to http://gazingus.org/html/DOM-Scripted_Lists_Revisited.html, which
    > has a hierarchal tree script that is simply attached to a list. That
    > means you would simply have to use basic DOM functions (or even
    > innerHTML) to modify the tree contents and ignore the heavy lifting
    > altogether.


    Interesting ref. It is always nice to see how others do things. At this
    point, though, the tree structure is a small part of a lot of code, and
    I don't want to switch it out and risk breaking stuff.

    > This would also have the advantage of being more usable to
    > people with older browsers or JavaScript turned off.


    This is for an app where it is okay to have firm browser reqs. I'm
    doing a lot of feature sniffing and if the features aren't found, the
    app won't work.

    BTW = if you are using Google Groups, click the "options" link to reply
    with the original message quoted.
     
    EventListener, Oct 17, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Kraft
    Replies:
    1
    Views:
    405
    S. Justin Gengo
    Aug 15, 2003
  2. Amber
    Replies:
    1
    Views:
    630
    Alvin Bruney
    Oct 11, 2003
  3. beccak
    Replies:
    4
    Views:
    4,969
    beccak
    Jun 9, 2004
  4. John
    Replies:
    0
    Views:
    302
  5. Ste
    Replies:
    41
    Views:
    812
    Thomas 'PointedEars' Lahn
    Aug 1, 2007
Loading...

Share This Page