473,327 Members | 1,952 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

hiding/showing: right way?

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

Oct 14 '05 #1
2 1397
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.

Oct 17 '05 #2
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.

Oct 17 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: c.anandkumar | last post by:
Hi All - I have some problems getting a small piece of javascript working correctly for Firefox. Here is what I am trying to do - 1. I have a form (like a search form) 2. I have many groups...
5
by: gregmercer | last post by:
I have the following html sample, where I'd like to have a show and hide two divs, one replacing the other. Following these two divs is a third div (the bluediv) which I would like to have placed...
1
by: Amber | last post by:
The DataGrid allows you to make columns visible or invisible on demand - even edit and other special columns. This article will show you how it is done. Some developers have reported problems...
4
by: Tony Vitonis | last post by:
Hello. I've written an app that I want to "live" in the system tray. I want it to start up with just a tray icon showing, and if the user selects "Settings..." from the icon's context menu, to...
11
by: Alex | last post by:
Hello all, I have a main form(say "form1") .i want to display another form(say "form2") on occuring of an event (say a button click) and want to hide it after some time so that it will again...
9
by: dd | last post by:
Does anyone have a cross-browser solution for hiding scrollbars and/or disabling scroll for the whole page? When the user clicks something, I want to display a DIV that fills the whole client...
12
by: Ste | last post by:
Hi there, I've got a website with a list of Frequently Asked Questions, so there's a question and answer in a long list down the page. Can anyone recommend a simple script that would allow me...
17
by: rohitchawla | last post by:
i am trying to show and hide a div when onmouseover and onmouseover another div element. i am setting a setTimeout duration on onmouseout to delay the hiding of div for around two second The...
3
by: Anthony P. | last post by:
Hello Everyone, I'm writing an application that, so far, only has three forms: frmSplashScreen frmLicenseScreen frmConfigurationScreen Now, frmSplashScreen has a timer that sits it on...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.