Find Motive

SWFUpload is a flash/javascript solution for uploading files VIA the web. I've always thought that uploading files via a form has been clunky. I was excited when I found this script that fixes this area. Not only can you limit which file types that show in the choose file dialog, it will also report on the progress of the upload. I've been using my own Flash based file uploader for Indiefy for sometime now and its great to see it packaged in an easy-to-use way for others.

Features
* Only display chosen filetypes in dialog
* Upload multiple files at once by ctrl/shift-selecting in dialog
* Trigger javascript functions on start, cancel, progress and complete
* Get file information/size before upload starts
* Style upload buttons any way you want
* Do progress-bars/information using valid XHTML and CSS
* No page reloads, display uploaded files as they are finished
* Works on all platforms/browsers that has Flash support.
* Degrades gracefully to a normal html upload form if Flash or javascript isn't available

Example

Check it out!

Back when I first started doing web development I used Javascript Image objects and onMouseOver and onMouseOut to make image rollovers for web pages. This worked well, but was kind of clunky and required 2 separate images.

Now I use CSS with only one image to do these same rollovers. You are basically just shifting the background image's X coordinate to give the rollover effect.

The following browsers support this:
IE 5.5+, Firefox 1.07+, Opera 7.23+, Mozilla 1.7.12+, Netscape 6.02+, Safari 2.0+, Konqueror 3.4.3+

Example

The Image

CSS

HTML

My friend Jeff over at Big Trapeze has posted a great code snippet to prevent users from accidentally double submitting forms or refreshing the page and getting an annoying alert box.

Alert box shown when you try to refresh a page that was posted to.

Lately, while developing sites, I’ve started to deal with a lot of form submissions, and I’m finding that it takes extra steps to prevent people from accidentally submitting a form twice. Double-posting (hitting the Submit button more than once, or refreshing a page where data has been processed) can lead to all sorts of bad problems. - Big Trapeze

Check it out! Big Trapeze

I've been using my Lightbox using iFrames hack with some of my current projects, but I was having an issue with flash randomly not rendering with Lightbox in Firefox. So when I searched for an alternative I came across the Prototype Window Class.

The Prototype Window Class works on Safari, Camino, Firefox and IE6. It also features skinnable windows and integration with the script.aculo.us library for effects.

Example

Screenshot

So far I've had no problems with this class and I have found it easier to work with than Lightbox.

Check it out here

This is a follow up post to an article I wrote a few weeks ago about Lightbox Using iFrames Instead of AJAX.

That article described how to use an iFrame to display content in a Lightbox without using AJAX. There are advantages to this and you can read about them at the link above.

Traditionally a Lightbox could be closed using the code below:

This code will only work if the link is being called from the same window that the lightbox is defined in, which presents a problem with our iFrame Lightbox because the iFrame is a separate window and knows nothing about the Lightbox defined in the parent.

Two parts are required to achieve closing a Lightbox from an iFrame. The first is a JavaScript function in the parent that can be called from the child window(iframe).

Parent Code

The second is the call in the child window to the parent function closeLightbox

iFrame(child) Code

Throw the above code into a link or button click and the Lightbox will be closed.

Download Complete Source (includes demo)
lightbox-iframe2.zip (15k)

Special thanks to Manuel Ribeiro. This code is based off of his implementation.