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 I mentioned in my last post regarding Javascript and Query strings, the use of the search property returning everything that comes after the question mark(?) will be used here to retrieve the data we need from the query.

For example by obtaining the document.location objects chained with the search property and the substring() string function on the following query string we will only return what is after the question mark, since that's all we need.

The Query string:

    http://www.2whoa.com/dominate/index.php?name=2whoa&user=puck
        &item=javascript

The code and results:

    var query =  document.location.search.substring(1);

    alert(query); // results , "name=2whoa&user=puck&item=javascript"

That's useful and good to know. Now what?

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:

If you have one variable that you need to pass from one page to another via a query string, the simplest way to do it is to attach it to the url as "?querystring".

http://www.someplace.com?querystring.

There is no assignment needed as you would normally write by using the equals sign. For example: http://www.someplace.com?str=querystring.

If you want to remove a few lines of Javascript which would do the parsing of the returned string, this is the way to go. But keep in mind this is only beneficial if using one single variable.Otherwise I would do the whole assignment(name=value) and parsing of a querystring to keep things in order.

Now, if we had the url:

    http://www.someplace.com?querystring.

How would we get the value querystring?

I find myself using Safari(ver 3.0.4) on a PC more and more and shrugging off any IE(6 or 7) browser.

Safari is pretty nice. It's sleek looking, the color qualities and images look clear, and I like the way it displays form elements. With those features, since I am a Senior UI Developer and primarily develop the front end of applications, I needed to add Javascript handling to Safari which isn't defaulted to display errors or exceptions. It would be nice to have a Developers Kit, like what Firefox offers, but that's a far reach. Most code that I have written has worked great in Firefox and Safari, but this one time recently it was failing on me in Safari.

So to add Javascipt error catching in Safari on a PC. You have to open file Preferences.plist in a test editor.

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

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:

The Web Developer extension for Firefox is an invaluable tool when you are writing JavaScript that dynamically changes the HTML on a Web page. The feature I use most often is:

Web Developer > View Source > View Generated Source

This shows you the HTML as it is at this moment in time, rather than the original HTML that came down the pipe.

The trick for IE is to paste the following line of code in it's entirety into the address bar and voila!

javascript:void(window.open("javascript:document.open(\"text/plain\");
document.write(opener.document.body.parentNode.outerHTML)"))

Good stuff!!!

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.

I hear this discussion to often, "What if JavaScript isn't enabled" or "What do you do if a user doesn't have JavaScript Enabled?" Some call it unobtrusive JavaScript.

Seriously! Come one. If someone does not have JavaScript enabled then they are not(to me) a customer that I feel that I need to retain. Sorry, if I offend anyone, but with JavaScript turned off, your not allowing yourself the ability to live and experience the Web 2.0 world.

It's statistically proven that only 5% of users on the internet have JavaScript turned off, which leaves 95% of the users experiencing the full dynamics that the web has to offer. I can't think of any other place that can offer you an opportunity of making a customer, client, or potential client say "Wow", with what you have to offer them.

So, my question is, for what percentage of users are you developing for?

Here is a list of JavaScript Stats going back to 2002.

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

Yes, Ajax is a powerful household and industrious cleaner, but it has also become a powerful and dynamic part or our web surfing and web environment world. AJAX stands for Asynchronous JavaScript and XML. What is that? It's not a language, but it is considered more to be an array of web environment tools and or languages. JavaScript gives us the ability to work with and modify the Object model and XML gives us a delivery of content for our documents. When using Ajax applications in your web pages you are using not only using JavaScript and XML, but your using all resources that are available to you in your browser environment and/or server configuration. CSS is used for the styling and placement while HTML can be used the same way as CSS(if need be). Other languages(php, asp, java) are also used to handle server side requests and responses. These other languages do not understand that a request is being being from an Ajax application. They just see that a request has been made, so there isn't any additional configuration that needs to be implemented

JavaScript can be and is mostly used as asynchronous web tool already, but what makes JavaScript an Ajax application is the use of the XMLHttpRequest object. The XMLHttpRequest Object permits your web pages or users to to fetch server side content while still playing with or reading the web page that they are currently on.

The term Ajax is a generalization of the technologies that allow this interaction with server side content. Huh? An XMLHttpRequest does not only have to fetch XML docs. It can fetch any type of content(Video, Audio, XML, DB content, etc).

So let's make an XMLHttpRequest connection:

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:

Javascript used to be my enemy. It was a language that was boring and I felt that it had nothing to offer but form validation and a couple other things like rollover images and popup windows. Now, if you know javascript, XML, and the DOM, "May the Force be with you"! Your power to manipulate your internet/intranet sites is huge. From adding dynamic data to your site without a reload of your browser to, well, to being able to do pretty much anything with an onmouseover or any of the events(1) javascript offers.

But, know when and why to use Ajax. Ajax has become a buzzword, as was Flash and Java. People have asked for Ajax applications when there is really no need or purpose for it. Other languages and or technologies would be much more useful to use. Such as one person asking for her e-commerce site to be written in Ajax. Certainly suggested to not do that. E-commerce is not something you want to run with Ajax. Leave that to the server to handle. Agree?

I haven't had any time to write anything recently, cause that stuff called "work" has had me so busy. But, I have found a bit of time to share with ya'll. I am in the process of creating a prototype application that runs on a bit of html, css, and all javascript. Oye!! My main file for this application is over 38 printed pages of javascript/ajax right now, and still growing. All the data/content is written into javascript arrays.

I am going to share with you a useful code practice I like to use when working with arrays and large files.

Let's cover the basics of an array first. Let's create one.

Here are a couple ways to create an array object.

var myArray = new Array(5);
var myArray1 = new Array();

Now let's populate the array's;

myArray[0] = "Michael";
myArray[1] = "Larisa";
myArray[2] = "Mark";
myArray[3] = "Patrik";
myArray[4] = "Scott";

myArray1 = ["Hockey", "Baseball", "Football", "Basketball", "Soccer", "Tennis", "Golf"];

Both of these methods will work. I almost never use the first example because as you can see we declared the size of the array "myArray(5). I just don't see the a purpose of doing that. Not that it makes a big difference though. I just find that the second array "myArray1" is much easier, quicker, and simpler to understand.

Now lets read our arrays that we just created.

Asynchronous: of, used in, or being digital communication (as between computers) in which there is no timing requirement for transmission and in which the start of each character is individually signaled by the transmitting device.

Synchronous: of, used in, or being digital communication (as between computers) in which a common timing signal is established that dictates when individual bits can be transmitted and which allows for very high rates of data transfer.

So what does this mean for me and my websites. It's a difference of time. Take for instance fast food and cooking a meal. Fast food is already prepared and just needs to be formatted or slapped between two pieces of bread and put into some type of wrapper before it can be enjoyed (If you enjoy fast-food). Cooking a meal can be considered synchronous because you have to prepare and cook the meal before you can enjoy it. A time difference of Asynch (5-10 minutes) or Synch (30-60 minutes). With website content an asynchronous action is content that is being retrieved and loaded to your document behind the scenes. Your user does not have to wait long or take further action for the requested content to be displayed. Your user can continue to read your web page while the request is being processed. A synchronous action takes a user to either refresh(f5) or click a link to go to a different page.

The this keyword is used to refer to the originating object or function that it belongs to or is executed from. Such as  in the function myFunction(this).

    Example:

    function myFunction(item) {

          alert(item);

    }

    <a href="somelink" onclick="myFunction(this.id)" id="mylink">link</a>

The alert that will be displayed will read mylink, because the this keyword refers to the element <a href> and the id of that element is mylink.

When using events and forms, you will find that the this keyword offers you great control over your DOM. Let's try a form example with using the this keyword.

There are Object properties and Standard properties for your DOM Elements. The properties listed below are your Standard Element properties.

className: Gets/sets the class name of your Element.

    Syntax: object.className = className

    Example:
   

	<body id="myid" class="mystyle">

	<script type="text/javascript">
	x=document.getElementsByTagName('body')[0];
	document.write("Body CSS class: " + x.className);
	document.write("<br />");
	document.write("An alternate way: ");
	document.write(document.getElementById('myid').className);
	</script>