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.visibilit y.
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.create Element( "div" );
elem.style.top = 0;
if( curNode.nodeNam e == "folder" )
{
elem.id = "FolderElement" ;
var children = curNode.childNo des;
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.pu sh( newChild );
}
}
var folderName = curNode.attribu tes[0].nodeValue;
var isEmpty = subTreeItems.le ngth > 0 ? false : true ;
var line = this.makeFolder Line(folderName , myHeight, myIndent,
isEmpty );
elem.appendChil d( line );
Event.observe( line, "mouseup", this.__neh_togg leFolder_closur e,
false);
elem["subTreeDat a"]= subTreeItems;
}
else if( curNode.nodeNam e == "item" )
{
elem.id = "ItemElemen t";
elem.className = "item";
var itemObj = new this.ItemObject ( curNode );
var line = this.makeItemLi ne( itemObj, myHeight, myIndent );
elem.appendChil d( line );
Event.observe( line, "mousedown" , this.__neh_sele ctItemDown_clos ure,
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 2 1427
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.
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 of searchable fields in the fields
3. Each group can be expanded/collapsed by clicking on a link
"(Fewer|More) Options" which sits right next to the group title.
|
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 right up
directly below to the first or second div, depending on which is
showing.
If you load the html in Firefox, and then click on the "Edit" link you
can see that the first div is hidden, the second div is shown, however
the third div is...
|
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 controlling the visibility of
columns in the DataGrid control. The problem usually comes down to one
fact. The DataGrid has a property called AutoGenerateColumns. The
default value is "True". This means that when AutoGenerateColumns is
set to True,...
|
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 display a
window that will allow him to change settings. When he hits "OK" or
"Cancel", the window should hide again.
At first, I tried putting a "Me.Visible = False" in the form's Load
event, but apparently that code runs before the command can...
|
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 displays while occuring of the
same event.I develop it by creating an object of the form2 and
displays it in the event by calling form2.Show() and hide it by calling
form2.Hide().
the problem is that while displaying the form2 the memory usage of...
| |
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 area. While this DIV
is displayed, they can close it by clicking the close
button on the DIV. During the time this DIV is visible
though, I don't want them to be able to scroll (and
they usually can scroll because the page itself is
typically...
|
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 to hide each
answer when the page loaded, but then made them individually
appear/disappear when clicking the question?
I'm after a solution that will degrade gracefully if a page doesn't
|
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 problem is that when i mouseover an element and then onmouseout it and then back again mouseovers that element before the timeout, the element still gets hidden
so i put a flag=1 when i mouseover the element and flag=0 at mouseout and checked the value...
|
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 screen for 2 seconds
then executes the following commands:
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |