Setting margin, padding and designMode enable a javascript created iframe in Firefox

It was a little bit tricky to designMode enable and change the style of a javascript created iframe in firefox.

Anyway, the trick seems to be to wait a little with a setTimeout before setting designMode='on' and changing the style of the javascript created iframe.

My successfull code looks like this [Firefox only, not IE]:

function addEditableField(parent, iframeId){
  // Create the iframe, give it an id and attach it to an existing dom-element
  var newIFrame = document.createElement('iframe');
  newIFrame.id = 'iframeId';
  document.getElementById(parent).appendChild(newIFrame);
  // Wait a little for the iframe document to be prepared before doing stuff to it
  setTimeout("enable('"+iframeId+"')",20);
}

function enable(id){
  // Now some time has passed, so now we can play with the iframe:
  document.getElementById(id).contentWindow.document.designMode='on';
  document.getElementById(id).contentWindow.document.body.style.margin = '3px';
  document.getElementById(id).contentWindow.document.body.style.padding = '3px';
}

addEditableField('parentDiv','testField');

And that's it. (Btw, sorry for the long title, but I prefer to know what I'll get when I go somewhere using google).

Easy to use Javascript Image Cropper UI with Prototype.js

I just found this great javascript library that is an user interface for cropping images. It depends on both prototype.js and scriptaculous, which I like since I'm using them on all my projects.
The code is easy to use, and I integrated it into my Zend Framework with a couple of hours work (most of the work was actually not related to the cropping ui, but with the actual file handling and image cropping).

Anyway, it's great, big thanks to David Spurr! Use it, love it, tip it!