JavaScript


Prototype element insert example 1

If you’re like me, you found the documentation on prototype’s insert method lacking much needed documentation http://www.prototypejs.org/api/element/insert . They say the format is like

insert(element, { position: content }) -> HTMLElement

What the heck does that mean? Obviously you can’t just paste it in because it’ll cause a JavaScript error. After some googling and trial and error, I have the code working and will provide it as an example. The code create a div with content and places it at the bottom of an existing page element.

//create new div
var myDiv = new Element( 'div' );
 
//put product name in the new div
myDiv.update('text inside the div');
 
//append div to page element
Element.insert($('pageElement'), {'bottom':myDiv} );

FancyUpload javascript alert error fix 3

Many of you, like me, found this great tool at http://digitarald.de/project/fancyupload/ gives you a javascript alert box that says “error” after clicking one of the “browse” links if you have Flash 10.  Flash 10 breaks all Flash-based upload solutions that control a hidden flash-object with JavaScript.  Even my wordpress blog, which uses a flash upload, doesn’t work anymore.  I will have to install an update of wordpress to make it work again.

There are two ways to fix this.  One is to back down to Flash 9 and the second is to implement the fixes Herald has come up with for this issue.  My implementation of FancyUpload deviated from Herald’s demo install, so rather than start from scratch again, I updated fixes file by file and line by line.  It’s a fairly quick fix that I’ll go over below.

Herald’s updated and fixed demo is here http://digitarald.de/project/fancyupload/2-0/showcase/photoqueue-fixed/ and the current version can be downloaded at github http://github.com/digitarald/digitarald-fancyupload/tree/master.

The changes –

  1. Replace the following files with updated versions
    • FancyUpload2.js
    • Fx.ProgressBar.js
    • Swiff.Uploader.js
    • Swiff.Uploader.swf
    • script.js
    • The xhtml will need to be updated as well. Change the following line
      <a id="demo-browse-images" href="#">Browse Only Images</a> |

      to

      <input id="demo-select-images" type="checkbox" /> Images Only |

Hope this helps others who have implemented and rely on this tool. All credit for the solution and fix goes to Herald.