Register to post in forums, or Log in to your existing account
 

Post new topic  Reply to topic     Home » Forums » Website or Forum problems
Zugg
MASTER


Joined: 25 Sep 2000
Posts: 23377
Location: Colorado, USA

PostPosted: Fri Feb 23, 2007 4:05 am   

Looking for Javascript treeview navigation control
 
OK, I think I found my own answer to this, but if anyone has any other suggestions for the following situation, please let me know.

Here is what I want to do: You all know about the Knowledge Base, right? On the left is a semi-hierarchical view of the documentation. When you click on a topic, the help page is shown, and the contents on the left are updated.

It's a really really crude implementation. What would be more ideal would be a real "treeview" control where you could expand and collapse the help topics and then select the topic you wanted.

In other words, I'd like the online application to work more like the built-in help within CMUD itself.

Now, there have been DHTML and Javascript tree views for a long time. However, I also want to use AJAX to load the help topic. There is no sense in downloading the entire contents menu for each help topic. Instead, when you click on a topic in the tree view, it can just generate an asynchronous query to the server and display the appropriate help topic text on the right side of the screen.

So I don't want to use frames and all of that crap. And a free treeview control would be best of course.

Well, after much searching, I came across a gem of a site. Maybe everyone already knows about it and I'm just slow to all of this new web 2.0 stuff. But the site is the Yahoo! UI Library (YUI). They have developed a large collection of very interesting Javascript/Ajax components, including a Treeview!

I was just amazed at looking through this list. They even have a new component that should solve the browser history issue with Ajax. For example, when you click on a help topic in the tree view, your browser doesn't normally know that you have displayed a new page. So nothing gets entered into the Back/Forward history for the browser.

But with the new Yahoo! component, I could add a history entry whenever you click a new help topic, allowing the back/forwards functions in the browser to still work as expected!

This is really cool stuff! Since the Knowledge Base is already 90% of my own custom code, it seems like a good place to start with learning how this Ajax and Javascript stuff works. And then we'll have a real showcase help system on this web site.

Anyway, if you know of any other really good components like the Yahoo! set, please let me know. I'm really excited about the possibilities!
Reply with quote
Darker
GURU


Joined: 24 Sep 2000
Posts: 1237
Location: USA

PostPosted: Fri Feb 23, 2007 5:52 pm   
 
Their Event class absolutely rocks too... http://www.dustindiaz.com/yahoo-event-utility/
_________________
Darker
New and Improved, for your Safety.
Reply with quote
Zugg
MASTER


Joined: 25 Sep 2000
Posts: 23377
Location: Colorado, USA

PostPosted: Fri Feb 23, 2007 6:09 pm   
 
That's a great article, thanks for the link! That's very exciting because I was trying to figure out how to implement a nice interface for "tagging" posts. I want to have a list of all current keywords on the right side of the screen and let the user select the keywords to add to the post. So each keyword would be a checkbox. But I also wanted to have a normal text field where you could just list the keywords you wanted (which is how you create new keywords).

What I was trying to figure out how to do was set up onClick events for all of the keyword checkboxes so that clicking a checkbox would add or remove the keyword from the text field automatically. I was thinking that it would be really nice if I could just assign a CSS class to each checkbox and then somehow assign a single onClick event to the entire class. And it looks like I can do that easily with the Yahoo Event class. Very sweet.

I know this must seem pretty mundane to people like Darker who do web design for a living, but I'm pretty amazed by all of the progress just in the last year since I spent time writing our online shopping cart system. I was just learning CSS back then and getting comfortable with it. But it seems that Javascript has come a long way in that year, or at least more people are giving it some serious attention (finally) and the cross browser issues are being dealt with better.

The HelpSpot help desk system that we use for all of our support email (and for the CMUD crash dump organization) uses a *lot* of Javascript and Ajax code and is a really great application. It achieves nearly desktop-like performance, and yet allows us to do our help support from any web browser on any computer. Five years ago I would have never thought it was possible without annoying browser-specific ActiveX controls.
Reply with quote
Seb
Wizard


Joined: 14 Aug 2004
Posts: 1241

PostPosted: Sat Feb 24, 2007 2:52 am   
 
Sweet! Thanks for the links. I started looking at this after Zugg's post and came across their Event class, and it looked pretty cool (along with lots of other stuff), so thanks for the link with more info.

I agree with Zugg. It is amazing how far JavaScript has come in the past few years, even with no language enhancements since Dec 1999 being used. Although that does go to show how unobvious these applications are to create from scratch in JavaScript (and still work cross-browser) and why it took so many years to come up with them (the nice ones)!
Reply with quote
Display posts from previous:   
Post new topic   Reply to topic     Home » Forums » Website or Forum problems All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
© 2009 Zugg Software. Hosted on Wolfpaw.net