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

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

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.

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: