JavaScript

HTML5 Canvas Image Randomizer

I wanted to decrease the sizes of my pages on my blog with out changing my design. I had been using css sprites and gziped css + with base64 encoded images but due to my design my page size was 1500k on an empty cache.  My blog was like this for over a year. But in the past few months my pages started to seem like they were loading slower and slower. So I decided to write a small script that randomly places images on an html5 canvas.  It can also rotate, add color overlay and scale the images. You might find it useful to create a randomly generate header or footer to your site.

Changing the background color of a ckeditor instance

ckeditor is great once you get past the steep learning curve. Lately I have been looking for a way to change the background color of the editor / where you enter in the content on the fly. If you google "ckeditor change background color" you will find that most results suggest changing the background color using a theme stylesheet witch works for most cases. For my use case this wasn't going to fly. So after exploring my ckeditor instance in firebug I stumbled across this.

Create your Instance

Data Registry, Simple Data Caching for JavaScript

In most of the web apps I have written I have had to track / cache simple. It might a jQuery selector or a small group of objects in an array.  In some form or another I end up doing something like this to get / set data.

appname.data.user[appname.data.state.activeUser].username;

Enter dataReg! Its a simple data caching object that allows you to simplify this process. You can turn that fragment of code into

Internet Explorer Bug: readyState on empty cache slow to == complete

Recently I ran in to a small bug in Internet Explorer where on an empty cache it would take minutes for script.readyState to equal 'complete' after the script had been successfully loaded  from the server. But if you refreshed the page , script.readyState would equal complete on page load.

Using Regular Expressions to Test Variable values

Tags:

When creating a function in javascript its a good idea to check object the object type(s) of the arguments pasted to function.  Lots of times you end up with code looking like this to do this

JW player with SWFObject

Recently i was working on a project that required a flash media player.  I was trying to integrate JW FLV Media Player using SWFObject.  After losing a few hours of my life trying to pass a variable in a query string to a php script that generated a XML play list, I stumbled upon/discovered this solution.

the JW FLV Media Player documentation currently reads like this