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

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.