English: TreeView

The TreeView

You have a new Browser? You wonder why I am using techniques on my page that do only work with the newest browsers (IE4+/NN4+)? On this page you will learn that this is not correct. You will learn how tho use the cool, new navigation-tree, where to get it and how it is possible to redirect some browsers to another page using JavaScript.

Where do I have the tree?

Ok. The tree is not written by me. I have not the time to write about 500 lines of code only to make my homepage looking a bit better... The Scripts are written by the webmaster of the best, german JavaScript-Page in the web: javascript.seite.net. The project was described in a german Internet-Magazine (Internet Professionell).
But I could not use the script like I downloaded it. I hade to change some details:

Bugfix. The Script crashed the browser if it reloaded the page
All the Pics were non-transparent on a white background. Changed.
Reprogramming the links, to get the Language-selection to wirk
....

Internals

I have not examined every detail of the source yet (as I said: I do not have the time), but I will try to explain how it works and how to implement the tree on your page.

The tree is absolutely object-oriented: You can add items in the tree with creating objects. cool. To manage the data, a third, invisible Frame is used (on the top of the root, within the yellow frame).

The tree itself is in a small file in which it is written:

  doc.open('text/html', 'replace');

Now the data of the tree is written over the script. This causes Netscape not to display the HTML-Source of the tree, but the full source of the script, but for me, this is no problem.

Here a sample of creating an entry to the menu:

  var menu = new Menu();
  menu.addItem(new MenuItem("Home", "/pilif/index.html", "_top",""));
  menu.addItem(new MenuItem("Newscast", 0, "", ""));
  menu.addItem(new MenuItem("Applications", 0, "",""));
  menu.addItem(new MenuItem("Delphi Samples", 0, "",""));
  menu.addItem(new MenuItem("Services", 0, "",""));
  menu.addItem(new MenuItem("Other Stuff", 0, "",""));
  menu.addItem(new MenuItem("About this tree", "/pilif/index.html", "_top",""));

Compatibility

As I said 1000 times before: The script works with all browsers (also with software that does not support frames, but this is described on another subpage). How I have created this compatibility to older browsers, you can see here:

Note

I documented the sourcecode, but possibly, it is better to open the full Sourcecode from my homepage with JavaScript turned off. Then you have the full code and can see, how tricky my HTML is sometimes.

Tip:If you look at the source with Netscape, you will have Syntax-Highlighting!

1. Index

On the first page, new browsers are redirected:

    <script language="JavaScript">
      <!--
      if(navigator.appVersion.substring(0,1) >= '4')
       if(navigator.appCodeName == "Mozilla")
        window.location.href = '/pilif/frametools/bestbrowser.html';
      //-->
    </script/>

All browsers that support JavaScript, have the codename Mozilla (IE also) and a version-number bigger than 4, will be redirected to a new page.
Other browsers see the frameset on the index, which loads the old, text- and table-only navigation-bar. Older browsers see a non-frame-version of the page (see Whitepaper about frames):

    <frameset  cols="181,*" frameborder="0" framespacing="0" border="0">
       <frame name="xcfg65j" src="frametools/navbar.html" scrolling="Auto" noresize>
       <frame name="asdf45k" src="frametools/welcome.html" scrolling="Auto" noresize>	
    </frameset>
    <noframes>
    <BODY background="/pilif/pics/hiterg.jpg" bgcolor="#FFFFFF">

    ...

2. bestbrwoser.html

This is quite similar to the index (but has no <noframes>-Tag. Note the third, invisible frame.

<frameset cols="150,*" frameborder="0" framespacing="0" border="0">
 <frameset rows="0,*" border=0 frameborder="no" framespacing=0>
  <frame name="idfh32o" src="/pilif/scripts/code.html" scrolling="No"> 
  <frame name="xcfg65j" src="/pilif/scripts/menu.html" noresize>
 </frameset>
 <frame name="asdf45k" src="welcome.html" noresize>
</frameset>

All the differences to index in one list:

There is an invisible Frame named idfh23o
The cool Navbar is in xcfg65j
The welcome-page is the same.

If you are interested, why I am using so stupid names for my frames, please refer to the Frames-Whitepaper

--This page was last modified on: 26.03.99 21:11:40 MET--

Related Topics

Internet Links