The company that I work for asked me to develop a dynamic tree application, in which you could add, edit, and delete nodes. So after doing some research and a couple failed attempts using yahoo developer and dojo JavaScript tree libraries, I went with what I know (jQuery).

Let me say thanks to Jörn Zaefferer, for his jquery treeview plugin which gave me the framework for the working tree and Chris Domigan for his jquery contextMenu plugin which saved me from writing a right click popup menu with controls.

You can view and play around with my tree application here.

Keep in mind that this is just a javascript/jQuery demo of how the application works.

Sometimes you want to indent the options of a select element to display a tree or a hierarchy of items.

Example:
Original:                                              Text Indenting:



There are two indenting techniques that I am going to use here, because of "Cross Browser" related issues. Internet Explorer does recognize attributes or styles attached to the options of a select element whereas Firefox does allow it.

I still have not found an indenting technique for Safari, and if you find this to work or not work in your browser of choice. Let me know.

First I'm going to make this work for Firefox2 (Not tested in FF3).

My previous entries regarding Multiple Drop Down Menus were for a basic working model and designed to work with Internet Explorer 6 and Firefox 2.

After making some refinements and enhancing the functionality for use with Safari, I have come up with a better functioning model.

Safari was not performing properly when I was using the onclick event. I guess it's a design thing within Safari that does not work right with click events attached to select elements. So, the onclick event got replaced by onfocus. Also instead of using the html events for focus (onfocus), the event handling was handed over to jquery. They state on their site that the event handling with in jquery is some percent faster than using HTML events and it certainly shows.


So, now I shall write some code for all this.

Someone asked me recently "How can make something on a page show and hide with a mouseover event using jQuery?". I  looked at the jQuery documentation and quickly came up with this example and code. It turned out to be exactly what they were looking for.

I looked at a few of the events and effects like the mouseover() and mouseout() functions but that seemed to be to much for something this simple. This was basically the same thing as using the css(hover) property, So there is was, listed right under the jQuery events docs, hover().

Try my working demo. Here.

I started with two items that I could hover over and out on to make sure I got that part working right. Here's the code I started with:

    jQuery ready function and hover event:

Acid tests are the tests that browsers are put through to test basic web standards. To date there are 3 tests.

Named aptly:

    Acid1.
    Acid2.
    Acid3.

Acid 1 was first developed in 1998 by Todd Fahrner and was important in establishing a simple standard in early browser, especially related to CSS1 rendering and specs.

Acid 2 was released in April of 2005. This test is still being used to test CSS2 rendering and specs. Later that year in October, Safari 2.0.2 became the first browser to pass the test. Soon to follow was Opera and Konqueror. To no surprise IE has not past the test, but a big surprise is that FireFox, still has yet to get a passing grade. Although IE8 which is in Beta testing and FireFox 3 are both said to be close to passing.(We'll see).

Acid 2 test for these web standards:

Web Slices is a new and  pretty cool feature in the soon to be released IE8. Yes, I said IE8.

Anyway, Web Slices are like a small pop up div in a web page, that's called a Tool Tip. Except that a Web Slice does work in a Web page but, instead works on the browser.

We all have Web Sites that we visit a few or several times per day and have those sites bookmarked for easy. access. So instead of actually visiting the site you can click or hover over the bookmark in your browser to see what's new on that site. Any content can be in the Web Slice such as stock figures, Weather/Temp Reports, or the newest News Headlines. If you choose to visit the site then you can click on the Web Slice and go directly to the page that's serving up that content.

I have provided two Screen Shots of what I am trying to describe. A before and after.

Arrrgg!!! Why is this such a problem? I see way to often in websites that I visit, an improper DOCTYPE statement in the website/pages. When I visit a website and see something that I like in regards to a style, JavaScript, layout, or an aspect of that page that's not related to the content(content is just reading material). I will view the source code to see how it was accomplished. More often than not the page looks good but follows no Web 2.0 standards or compliance at all.

The first mistake I will see is the doctype statement which will look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transistional//EN">

This declaration has no meaning and absolutely no purpose. I might as well start creating my own HTML tags in my documents if this is how to do things.

    <div class="content">
        <circle>Round things</circle>
          <hamburger>A hamburger is sometimes a circle.</hamburger>
          <puck>A hockey puck is a circle.</puck>
          <friends>A circle of friends.</friends>
    </div>

Using a document type properly is a way of following a form and a standard for Web 2.0 compliance. The proper way of declaring a DOCTYPE in your web pages is by referencing a .dtd(document type definition) like this.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transistional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This declaration is actually calling a cross-browser and standards based Web 2.0 infrastructure of style, layout, and functionality.

The 2nd thing I will notice is the use of HTML Tables. Ouch!!

What is the DOM? The DOM is an object oriented view of HTML documents. HUH?

An HTML page is a document, within that page exists tags such as:

<body></body>, <h2></h2>, <div></div>, <span></span>

These html tags could be referred to in a few ways, such as, tags, elements, or even objects. When working with or manipulating the dom you will mostly refer to the items as elements, like when using getElementById(). But when standing back and viewing you document in greater detail these elements represent more of a life as an object. If your familiar with OOP programming you will know and an object is related to another object as are it's attributes and so on. We refer to this as a hierarchy.

In an HTML document there are elements that are on top of other elements that cause the characteristics of that element. For instance:

HyperText Markup Language 4 as we know it has not changed since 1999, but as we know from being a part of the internet culture and development of it, that things have evolved in the past 8 years. CSS, JavaScript, and XML have really changed what we can accomplish and create for the world to read, use, or play with.

Back in 2004 the next phase of HTML was being pioneered by the WHATWG (Web Hypertext Application Technology Working Group). Oh yeah, them you say. In 2007 the W3C passed HTML5 on to the HTML working group and made it their primary focus. For the past few month quite a few documents have been created outlining the new and forth coming HTML5.

When will HMTL5 be ready for use or be finished? Your guess is as good as mine and it may never reach a completed or finished phase, but some features of HTML5 can already be used. One such tag is <canvas>. Here's a Mozilla Tutorial for the <canvas> tag. It's an element that can work together with JavaScript for rendering images and animations in a specified canvas size. See the example link above.

Other new elements expected for HTML5 are - section, video, progress, nav, meter, time, aside. You can get a run down of what these elements are and there purpose at the W3C. Reference it here.

Read more here:
wiki HTML5
New Elements

To explain:

onclick() != onClick().

They both work the same as does onmouseout() and onMouseout() and the other JavaScript events but are they the same? Yes, they both serve their purpose but syntax wise, no. They are not equal. If you find yourself using camel type text for a precoded , event your validation will fail with the W3C compliances. I am sure many people are used to this, as I am. When I write a function, I use camel type text such as myFunction() which is ok to do and out of habit we do it with events like onMouseover, but like I said, it doesn't pass validation.

Whether you're using a strict or loose dtd, you'll see the error: 'there is no attribute "onClick"' or likewise for the event type.

What I find interesting is that most references will show you the function as onClick(), but when it's used in an example, sometimes it's coded as onclick().