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:

I was reading an article on livescience.com about the internet having black holes. I would assume that since an article like this exists we all experience this occurrence, of requesting a website or page and waiting for the page to display, if it does.

It stated that a group of technologists are  researching the phenomenon to find the cause and locations, of these black holes as if somewhere in the network of wires connecting us all, there's a Bermuda triangle of sorts.

Maybe the answer is a bit more simple than a black hole, and that a simple request to a remote server gets lost and disappears.

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);

This is an awesome plugin. No more worrying about 3 different css shadow techniques for cross browser compliance or using images for shadowing.

Drop Shadow Plugin at jQuery.com

The only issue that I find is in Safari where sometimes the shadow does not take up the cordinates that you specifed for it. Example is by writing "$('.myDiv').dropShadow({left:6, top:6, blur:2});" you might find that safari will set the top to -6. Refreshing the page will sometimes fix this, are we supposed to tell our users to do that? I think not. But this Safari glitch is noted in documents for dropShadow and so they suggest you toy around with it a bit to find the fix.

One feature that I really like is with shadowing images. The default shadow color for dropShadow is black, but now for images. The shadow will actually use the colors of the image. Very cool for styling. At least this happens with jpegs and pngs. I haven't tested gifs yet.

If you haven't experienced the drag and drop bug with IE 6/7 yet, you might, and so I am posting a fix to make to the core library. The bug occurs at the offset function when trying to access the offsetParent. After dragging and dropping the first element I was getting a error in IE of "Object Required". This was not happening in FF and I originally thought it was related to an Ajax call and the onload functions not executing and assigning the drag and drop attributes after the the Ajax call was complete. I was wrong.

So I am providing a fix for the IE error that has to be applied to the jQuery core library.

If you have written some Ajax code using JavaScript you already know how much you have to write to accomplish the desired results. There's 10-15 lines of code to check for and validate the browser type (XMLHttpRequest, ActiveXObject) and all the error handling (try, catch) blocks. Then you have to verify the readyState Response values and hope you get a 4(Complete) so you can move on to manipulate and use the responseText. That's a whole lot of work, but made easy if you choose to use jQuery. What was done in a possible 40+ lines of code can be done in less that 1/2 the lines, not counting the actual jQuery Library code itself.

There are 6 different ways to make an Ajax call using jQuery, but we're going to keep it simple with the most basic of them which is .ajax()

View the working example here.

Let's get an Ajax call working with jQuery.

    $.ajax({

          url: 'url',
          dataType: 'xml',

          success: function(data) {

             // Manipulate the returned data here or elsewhere

          }
    });

That's pretty much all you need to start with. Now let's make it do something.

Fading with jQuery is a nice technique that can be used to show some dynamic content such as xml feeds, some famous quotes, or photo gallery. The basic's of fading are simply to attach a fade to div, but what does that offer without updating the content of that div. So I am going to create a fade that updates once the fade is complete and add a delay on some pictures for a smooth image gallery.

View the gallery here.

The parameters that get put into our fade() are the duration of the fade and a callback. The duration can be written using the jQuery defined speeds of "slow", "normal" or "fast", but could be replaced with milliseconds value such as 1000 = 1 second or 10000 = 10 seconds.

Let's start with the ready function and add a fade to it.

    $(document).ready(
        function() {

            $('.imageBox img').fadeOut(10000, function() {

                   alert("Fade complete.")
            });
       }
    );

So what happens in above code is the div(imageBox) with the contents of image will have the image fade out in 10 seconds and produce an alert telling us the image is 100% faded. It works but of really no use or purpose. Now let's add more dynamic content.

For our 2nd installment of jQuery accordions we're going to add some style for presentation and some custom jQuery which will handle some of the new presentation layer.

Let's go back to the 1st Accordion that we created and grab that jQuery code. Here

    $(document).ready(
                function() {
         
                   $('dd').hide();

                   $('.accordion h2').click(
                         function() {
                            $(this).next('dd').slideToggle('normal');
      
                            return false;
                         }
                   )
          }
    )

Try out the new accordion here.

Now let's have some fun and add some style(css and jQuery code) for presentation.

If your familiar with the JavaScript jQuery Library, then you know how easy it can be to get something done that works across different browsers. Here I am going to work with some simple jQuery Accordions to show how easy it can be to add this to your page. Later we will get more in depth and add a custom look and feel to the same accordions.

If you don't already have the jQuery Library, you can download it from jQuery.com. Once you have it downloaded just add it into your JavaScript directory.

Test drive it here.

Let's build it!

As I mentioned in a previous entry, I had to create dynamic select lists. But I did not mention that those lists had to be multiple selects lists. Upon having to create this functionality because a drop down menu is a select for one item,  I will show you how I did it.

From this to this:


See a working demo here: