Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > hiding/showing: right way?

Reply
Thread Tools

hiding/showing: right way?

 
 
EventListener
Guest
Posts: n/a
 
      10-14-2005
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[i].nodeType == "1" )
{
var newChild = this.buildTree( children[i], 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

 
Reply With Quote
 
 
 
 
Joshie Surber
Guest
Posts: n/a
 
      10-17-2005
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-Scripte...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.

 
Reply With Quote
 
 
 
 
EventListener
Guest
Posts: n/a
 
      10-17-2005
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-Scripte...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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamic Menu Items is not right aligned with Right to Left documen =?Utf-8?B?QmlzaG95?= ASP .Net 0 12-28-2006 11:39 AM
Right-Click With Mouse and Toolba Buttonsr Don't Work Right Bigfoot It Is Computer Support 0 10-30-2006 06:08 PM
Tool to enable Right click on pages where Right click is disabled tsteinke@gmail.com Computer Support 4 08-28-2005 11:53 PM
Tool to right click image in windows explorer and rotate image right or left 90 degrees siliconpi Digital Photography 2 11-29-2004 12:56 PM
pass the right form input to the right control Tom ASP .Net 0 12-11-2003 03:07 AM



Advertisments