Skip to Content

Jan 18, 2010

Prevent the loss of unsaved data with OnBeforeUnload

Sometime last year I learned about the onUnload event, which is available on the "window" object. Today I thought I could use it to prevent a user from leaving a web page if, for example, there is unsaved data that will be lost. I quickly realized that it would not work. The "onunload" event happens after the user has already "unloaded" the page. I needed an event that fired before the user action and naturally came upon, "onBeforeUnload."

The onBeforeUnload event is Microsoft specific and is not included in the W3C specification but fortunately seems to be a de facto standard in the modern web browsers. Support is in the latest versions of FireFox, Safari, Chrome and Internet Explorer. Below is a code example and screenshots of resulting dialog boxes in Safari and Google Chrome.

window.onbeforeunload = function() { return "There is unsaved data on this page."; }

Safari Dialog
Safari

Chrome Dialog
Chrome

Safari's dialog default formatting is close to an exact match of all other browsers. Google Chromem however, displays a much smarter dialog. It didn't take much thought to realize that they did this for their web applications. If for example, you try to reload an unsaved e-mail in Gmail you will trigger an "onBeforeUnload" event.

To clear the beforeUnload event just set the value of it to null as follows:

window.onbeforeunload = null;

See the example.

JavaScript

Oct 4, 2009

The Billion Dollar Gram

Great visualization of what is being spent where.

Highlights:

  • Walmart revenues ($352b) vs. Walmart Profits (11b)
  • Total cost of financial crisis to US government to date ($2800b) vs. The New Deal ($500b)

May 3, 2009

It only took several years

I've finally redesigned and relaunched CreativeBOX (everything isn't perfect yet - but if I waited until then this relaunch would never happen.) I can't even count how many years this has been delayed. A lot has changed since my last real updates to the site, the most significant being my graduation from college (woot!) and my job at OHO Interactive.

This site used to be my GUI playground back in the golden age of Mac interface customization (raise your hand if you can vividly remember MacPlaza, MacOSZone, GUI Junky, ResExcellence, IconFactory's PixelPalooza etc.) It was a fun time and was what partially inspired me to go into the design field. On CreativeBox I offered custom desktop pictures, startup screens, Kaleidoscope schemes, icons, and even software developed by my younger brother. I loved the GUI community so much that I even ran a site called MacCommunity for a while that reported on the releases of new GUI goodies. Yea, I was very much a Mac geek. As a matter of fact I still am but my priorities have changed.

I eventually got exhausted creating icons and desktop pictures but I never tired of running web sites. While trying to re-imagine CreativeBox I ran several web sites during college for student organizations. I just couldn't stay away from the marketing, analyzing web analytics, brainstorming, designing and development that was involved. There is a beautiful complexity in building and running a web site and with this, the new CrativeBox, I hope to share some of it.

Jan 28, 2009

Open During Construction

Yup. I am back and ready for another go at running the Creative[BOX]. While under construction I will be posting, designing, configuring, and learning how to manage this Drupal system. It should be a fun ride.

thebox
Syndicate content