Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

jQuery UI Dialog Stopped Working

A Fun Bug Hunt with jQuery UI and My JavaScript Libraries

As I was trying to wrap up a client's website this morning, I started getting some weird errors that took me the better part of the day to figure out. It all started when I began working on their contact <form>. As I began bulding out the validation checks, I noticed my nice jQuery UI dialog box was not triggering. I pulled up the console and saw the following errors...

Safar: TypeError: 'undefined' is not an object (evaluating 'this._handles.mouseover')
FireFox: this._handles is undefined

Not very helpful. And as you may know from your own experience, anytime you see generic messages like these, be prepared to scan through a lot of code and have some coffee handy.

read full article...

A Fix for Paul Irish's imagesLoaded jQuery Plug-In

Quick Fix For Getting Called Twice

Paul Irish has a great jQuery plug-in to detect when images are loaded, called imageLoaded. If you've experienced problems detecting cached image loads, then you probably need to check out this great script. I have been experiencing a few quirks with it though. And one of the those seems to be that it gets called twice on occasion. But I think I figured out why.

I think what's happening, is it's firing the load event on both the data uri (for the blank gif) and then for the real image source. To stop this from happening, all we need to do is check the image src before we handle the callback. Here's the fix I came up with:

The Code
(function ($) {
    $.fn.imagesLoaded = function (callback) {
        var elems = this.filter('img'),
            len = elems.length,
            // data uri bypasses webkit log warning (thx doug jones (cjboco))
            blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        elems.bind('load', function () {
            // check image src to prevent firing twice (thx doug jones (cjboco))
            if (--len <= 0 && this.src !== blank) {
      , this);
        }).each(function () {
            // cached images don't fire load sometimes, so we reset src.
            if (this.complete || this.complete === undefined) {
                var src = this.src;
                // webkit hack from
                this.src = blank;
                this.src = src;

By the way, who is that cool guy Doug Jones that recommended the data uri in the first place!

Edit: I merged the src check for the callback with the len check for simplicity. Paul has also updated his version as well.

read full article...

Oops, I broke JSLint

I think I just discovered a bug in JSLint, Cool!

You would think I would be used to breaking things by now, but I just discovered a weird bug in JSLint! How cool is that?!?

Anyway, the bug most likely isn't really a bug, it's more like a weird error result based on my screwed up JavaScript. I was working on one of my scripts and I kept getting a weird error result that looked like this:

JSLint Bug 2/9/2011

read full article...

U.S. Currency Conversion Using Javascript

A Small JavaScript U.S. Dollar Formatter

If you're like me and work on a lot of e-commerce sites, I'm sure you have come across the need to have a simple function to convert a number to a U.S. Dollar formatted string. If you have scoured Google looking for something, I'm sure you've come across the plethora of "currency" formatting libraries/functions out there. The problem is (at least with me) is that all these functions seem to be large, complicated, monstorous libraries that give you the ability to convert a number into a gazillion different localized currencies. That's fine and dandy if your customer plans on going global, but what if they just want to sell things in the U.S.? That pretty much sums up the majority of my customers.

I've come up with a very simple JavaScript prototype that will convert a number into a nice U.S. Dollar formated string. This function will add the thousands seprator (comma), add the dollar sign ($), add two decimal places and handle negative numbers.

read full article...

Easily Detect iPad, iPhone or iPod Using Javascript

An Simple Way Of Device Detection

I'm currently working on a website and one of the jQuery plug-ins I'm using is really just for eye candy and it only works with mouse overs (or mouse hover events). The problem is mouse over events don't work on the multitude of "touch" devices out there. I needed a quick little script to determine the device in order to stop this plug-in from activating, but also needed an easy way to add other devices down the line (like Android) when needed. Here's what I came up with...

// detect touch devices to turn off any mouseover only functions
window.is_touch_device = (/iPhone|iPod|iPad/i).test(navigator.userAgent);

We are using a regular expression (ignoring case) to determine if our product name is located in the navigator user agent string. If it is, then we set our touch variable to true. This method should be compatible with all major browsers (old and new)

I'm not 100% sure if I like using the userAgent to detect the device, but I couldn't think of an easier way of doing this. If you have some thoughts let me know.

read full article...
Page: 123456