Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

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) {
                callback.call(elems, 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 http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
                this.src = blank;
                this.src = src;
            }
        });
    };
}(jQuery));

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

ColdFusion: Unable to create temporary file

GetTempDirectory Needs To be Added To Your SandBox Security

Over the past few weeks I have been seeing a nice little error message coming from a few of my customers shared hosting sites. It seems to happen whenever I am using CFIMAGE to read or resize an image. I did a little digging on Google and came across a nice thread discussing the problem. I'm posting it here so I have easy access to it, but you might find a need for it as well.

http://forums.adobe.com/message/3060530
http://www.cfexecute.com/post/coldfusion-verity-unable-to-create-temporary-file

"If you are using Sandbox Security you'll need to add the value of the GetTempDirectory function to your Sandbox with read and write permissions and it will start working again."

I'll keep you updated on the response from the ISP.

read full article...

CSS3 Webfonts

This post is primarily a reminder for myself, but it might be useful for others as well. One of the cool new features of CCS3 is the ability to use customer fonts by declaring @font-face. I've been using some of the cool @Font-Face Kits from Font Squirrel on some of my new sites. One of the things I just discovered is that some of there included .eot files do not seem to work as expected on Internet Explorer (.eot fonts are what IE is supposed to use).

Anyway, I fixed the problem, by converting the included TrueType (.ttf) file into an .eot font using the ttf2eot service and everything seems to be working correctly now.

read full article...

A Great HTML5 Website Template Called Boilerplate

A Rock-Solid Default for HTML5 Awesomeness

If you're looking for some examples of website development "best" practices, then look no further the the HTML5 Bolierplate by Paul Irish (As well as a slew of other contributors). The site says that this thing is "badass" and I couldn't agree more. I personally have been using a slightly modified version (Made it ColdFusion compatible) of this for the past few websites I've created and a few older sites that I converted. I'm quite impressed.

Why am I impressed? Well, for starters, Google Analytics is showing that the traffic on the sites that I converted jumped 500%. This is essentially telling me I had some problems with the way I was structuring my sites.

One of the really cool features of this collection, is that it includes something called an Ant Build script. I'm still not 100% everything this thing does, but in a nutshell, it optimizes everything in your site. It will minimize JavaScript, CSS, HTML and reduce the size of JPGS, PNG's. Very cool indeed. To use, all you have to do is open terminal (I know, but it's not that hard) and then CD to the build directory (located inside the bolierplate framework) and type ant build. Then sit back while it does its thing.

Don't just take my word for it, check it out yourself and see the awesomeness.

read full article...
Page: 12345678