Creative Juices Bo. Co.

It's Like script.aculo.us and moo.fx, but Half the Calories

Right before I left on my vacation I came across a very nice JavaScript Animation class called Animator.js. In the past, I've switched between using script.aculo.us and moo.fx for various projects, but at times it seemed I would run into problems. Their frameworks sometimes interfere with the latest version of prototype.js, or they were overkill for whatever task I was trying to perform. I think that's why I kind of like Animator.js. It's a self contained class that allows you to perform various animation task. It's lightweight and extremely easy to implement.

I recommend checking out the authors site [BernieCode] to find out more and also, I've created a little demo (edit: deactive) that duplicates one of WebKit's new CSS animations. Check it out and let me know what you think.

Note: It wasn't really explained on Bernie's website, but you need to return window[Animator][Control Function] after you call new Animator() to get the animation to work.

function AnimatorTest() {
   ani = new Animator({duration: 1500})
      .addSubject(new NumericalStyleSubject($('CB'), 'opacity', 0, 1));
   return window['ani']['play'](); // return the ani window variable and intiate "play"
}
window.addEventListener?window.addEventListener("load", AnimatorTest,false):window.attachEvent("onload", AnimatorTest);

WYSIWYG Cross Browser Editor

I came across this pretty nifty in-page HTML editor tonight called openWYSIWYG. The claim it was the ultimate cross-browser editor, but it didn't support Apple's Safari browser. Go figure. I liked it though. It's small and light and so far it seems like you can modify it fairly easily. Compared to FCKEditor or TinyMCE, which seems like brain surgery whenever I poke around in their code.

Well as of tonight, the Safari limitation has been changed. I have successfully modified the source to allow my brethren to enjoy it as well.

I fixed the bugs, now what?

Well, I'm back, relaxed and dove straight into working on the Safari fix for openWYSIWYG. I figured out the issue when attempting to insert a new TABLE into a blank editor window. That little bug has been squashed. You can grab the the Safari version by visiting this CJBoCo Brew House.

So, what next? Well, that's a darn good question. I still think this editor needs some improvements to make it more cross-browser friendly, make improvements on the some of the core functions (especially some of the node functions), improve how it handles the HTML code and a few other things that I think it needs help on.

Safari Caching Problem

Boy, I don't know how long this one has been a thorn in my side, but if you have ever tried dynamically creating or changing the content of an iFrame and you use Apple's Safari browser, then I'm sure you have run into this issue. For what ever reason, Safari caches the source (url) of an iFrame and whenever you try to change it's content, it wants to use the old data.

Well, not anymore. I came across a great little trick tonight and I though I would share. All you have to do is change the ID of the iFrame and Safari will update it with no problems. So if you're creating iFrames on the fly, just use this little JavaScript snippet:

iFrame.id = "IF_" + new Date().getTime(); // prevent Safari from using old data.

This can easily be modified for other languages. And if needed, you can update the SRC and then change the ID back to another name. (Useful if your using a custom CSS style for the element).

Hope this saves you a headache!

Prototyping the Element's Dimensions

I was browsing through my utility scripts today and I came across these two little gems and I thought I would share them with you. These functions will determine an elements width or height and return it's value. Very useful if you ever plan on doing any animation or dynamic user interaction on your web page.