Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

Where did I go, I do not know.

jQuery Date Navigation Bar

I know it's been awhile since I've posted anything, but I've been a very, very busy bee. Hopefuly, I will get some time to start making some updates to some of my jQuery plug-ins soon, but in the meantime I would like to share something new. It's not fancy, but I required it for some of my client projects as of late and I thought I would share.

read full article...

HTML5 Drag And Drop File Uploader

Teaser: Drag and Drop File Uploads with jQuery and ColdFusion

I've been a busy little bee as of late, but I wanted to let you know I've been working on something that I think you might enjoy. A way to incorporate file uploads using drag and drop!

jQuery handles the UI and ColdFusion handles back-end magic. Drawbacks of course being that this only works with HTML5 enabled browsers (i.e. all modern browsers, accept Internet Explorer). It also uses the form "PUT" method, so I'm not 100% sure which versions of ColdFusion it's compatible with (I'm using the latest Railo and I've tested it on CF9).

Anyway, I've slapped together a quick video of it in action, so check it. Hopefully I will be able to get around to releasing the code on how I'm doing this soon, but I need to wrap a few things up first. Enjoy!

Click the "read more" link to watch the video...

read full article...

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

Problems Combining jQuery Draggable, Droppable and Sortable

Combining jQuery UI Draggable, Droppable and Sortable Functionality

I was having some issues trying to incorporate jQuery UI's droppable, draggable and sortable on a project I'm currently working on. I was receiving some weird errors and I'm still not 100% what was going on, but I broke out the code and simplified it to get it working and I figured I would share.

Essentially, my project calls for a navigation bar that has psuedo-buttons (div's) which need to be dragged upon multiple areas that in turn, need to be sortable. I've illustrated a layout, so you can better understand what I was trying to do (Fig. 1).

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...
Page: 123