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.

As we know align:center has been deprecated in css and html, so there are other alternative to centering. For centering a div tag the easiest way I have found is by setting the margins to 0px and auto, along with a specific width for the div your centering.

Let's write some code.

    <div class="container">

        <div class="container-inner">Centered Divs</div>

    </div>

Now for the CSS:

A friend took a look my site today and sent me an email asking about the changes I have made to it. They said that they have been busy for quite sometime and hadn't checked in to see what I have been up to with this place or small corner of the(my) world.

That brought me back to when I first started this site 2 years ago. Huh, only 2 years ago, actually it's a few months less than that. Seems like so long ago. I guess I've been a busy.

So as it started, I had some space on myspace to learn and understand the hype about it and was pretty bored with it rather quickly. I'm still pretty bored with myspace and others like and don't see the purpose(I'll explain that another time). So I decided to write myself a little application for my myspace page(for fun) in my spare time. It was a simple newsreader application for sports headline news(specifically for the News Jersey Devils hockey club) that read in an xml file and displayed a headline and article text in rotation with a fade out between articles. It allowed a click on the headline to open a new window to read the full article.

So, I was writing some drag and drop applications and everything was working smoothly, but in Internet Explorer I was experiencing some issue of jagged text on the original draggable if the drop was not completed. I did a few searches to see if I could find anyone else that had experienced this and found nothing although I have seen this happening before on other drag and drop applications.

So I started to break it down. It seems to only happens on nested divs when you have some content set with font-weight:bold and no background-color set. I was relying on the background color from the parent div. This also happens when you use css font: with defined sizes (large, x-large, etc);

So it's not a concept anymore. It's the new look of this site.

If you are visiting this site with an IE Browser of version 6 or less you probably saw my warning display. And so the site looks broken and bad to you. I'm not sorry about that(Upgrade your browser, it doesn't cost you anything). Or switch to Safari or my Preferred Browser Firefox.

This site uses png images for it's layout and there are fixes around that can handle the rendering in IE for png's, but I have not found one that works for css background images and the repeating of that image.

I have also incorporated some jQuery plugins and some custom code to have it the way that I envisioned. I have to say, that it turn out slightly better than I thought it would, but I have other changes to implement as well for the new design. Such as the entry images and logos don't look right now with a black background.

So I have been working and playing around with a new design for this blog and have a pretty nice concept(I think). I'm not sure if I'm going to use it cause, I don't think it fits in with some aspects of this blog.

It also fails because of png images as CSS backgrounds and a minor layout glitch in browser IE6 and less. But seems to work well in IE7, Firefox, and Safari on a PC.

I am debating on whether I should adapt it for IE6 and actually put it to use.

I have used the jQuery Plugin Drop Shadow to help with the design concept.