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:

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.

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.

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!

In my posting regarding Multiple Select Drop Down Menus I took a single select drop down menu and appended a dynamic multi select directly underneath it which appeared when an onclick event occurred to the single select drop down.

This time we are going to get a little bit fancy and create a custom drop down menu, that's similar to the other posting but slightly different and can be used in the same fashion.

There are a couple different ways I have seen to swap css files using javascript but I have yet to see one as simple as the way I have written it to work. Someone else must have come up with this idea at sometime or some where before.

Although, I haven't seen or had many uses or reasons to do this.

On with the show!

At the top of your document you have the head contents containing your css files and JavaScript code. Before the JavaScript is the css file include.

    <link href="layout.css" rel="stylesheet" type="text/css">

Since every element/object on a web page can be retrieved using JavaScript because they reside inside of the DOM, you can add an id to the css declaration, like so.

    <link href="layout.css" rel="stylesheet" type="text/css" id="css_page">

Now you can easily obtain the link object using getElementById("css_page").

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: