Playing web pages as music

One of my favorite blogs has a crazy piece today about playing the NY Times web site, musically.

All the magic happens with a Firefox extension called Lily, which takes its inspiration from modular audio patching software like Max/MSP.

When the patch starts, the browser enters a DOM inspection mode and mousing over a DOM element highlights the node. Clicking on a node writes the element’s data (its innerHTML value if it’s a text element or the binary data if it’s an image) as a sound file and the file is then loaded in a quicktime player in the patch. The sounds can then be triggered using OSC messages.

Finally found a use for the NY Times from Bill Orcutt on Vimeo.

Some other great video examples are on the Lily blog, including this interesting SVG audio sequencer.


SVG Midi Sequencer from Bill Orcutt on Vimeo.



seth, Sat, 26 Jan 2008 00:28:00 GMT
no comments

DHTML and AJAX Scripts

Using StumbleUpon for the first time today I came across a really cool resource for DHTML scripts that I hadn’t seen before.

Some great stuff in there though including a JS / SVG chart library. Sick.

Here’s another nice resource of DHTML libraries as well.

Too bad they didn’t include subModal though…haters.

seth, Mon, 18 Jun 2007 04:29:00 GMT
no comments

Cashboard Timer Widget Drops

Entering your time into Cashboard just got a lot easier.

Cashboard Timer lets you log time without keeping a web browser open.

Cashboard Timer Widget

This was my first widget, and a lot of fun. It took longer than I expected (around three days) but I’m really happy with the results.

There were some quirks debugging with dashboard widgets that I didn’t expect, like errors being logged to the console.

At least the rails part was easy using ActionWebService...

Could a Cashboard open API be coming soon? Hrm….........

seth, Fri, 13 Apr 2007 08:15:00 GMT
no comments

Finally, official prototype.js docs!

If you’re unaware, prototype.js is the javascript library that ships with Ruby on Rails. It provides a lot of convenience features for the DHTML / front-end developer.

I’ve been using this resource for my prototype.js doc needs to date.

Found out today that there’s now an official prototype.js doc reference. Hell yeah.

Update

Forgot to mention this dope set of enhancements to prototype as well. Adds a ton of cool stuff like the ability to trigger event handlers programmatically.

seth, Fri, 19 Jan 2007 22:08:00 GMT
no comments

SubModal v1.4

Continuing the love for subModal today, I released version 1.4.

Took the time to fix a nasty IE/centering bug that was effecting 1.3. Whoops…Thanks go out to bhaidar on the subModal google group for spotting and reporting the problem.

Spotted in the wild…

A friend of mine directed me towards MyHeritage.com yesterday. You know the site where you can upload your face and see what celebrities you look like? It’s all over MySpace… Pretty funny stuff.

Anyhow, I was interested to see that it looks like they’re using the subModal in their code. Always nice to see things you’ve written being used.

seth, Fri, 12 Jan 2007 21:02:00 GMT
3 comments

Using a callback function with subModal

I get a lot of questions regarding the use of a callback function with my subModal code. The following is an except from a response I posted over at the subModal google group.

  1. Define the function that’ll be called on the opening page.
  2. Pass the function you’d like to call into ‘showPopWin’.
  3. Assign any return value on the modal page itself, if necessary
  4. Call the hidePopWin function passing true

It might be easier to grok in code, so as an example…

On the subModal opening page

// returnVal can get passed in from the modal page itself...
//....see below for info
function returnRefresh(returnVal) {
  window.document.reload();
}

// Open the modal, passing in the refresh function 
// as a reference NOT a string.
showPopWin('mymodal.html', 500, 500, returnRefresh);

From inside the subModal window

// If you plan to pass a return value assign it
var returnVal = "something";

// When you're ready to close the pop window 
// call this...Passing true makes sure the return 
// function gets called.
window.top.hidePopWin(true);
seth, Thu, 11 Jan 2007 23:06:00 GMT
no comments

DHTML Color Picker - ColorJack

Just stumbled across this cool DHTML color picker. I haven’t jumped into the source yet, but the functionality is insane for a web control.


Hrm….might be useful for an upcoming project or two.

seth, Tue, 19 Dec 2006 08:00:00 GMT
no comments

Cross Browser DHTML Modal Dialogs For Web Apps

Support

Please don’t email us using our contact form for support of SubModal. I’ve created a Google Group for SubModal. All your questions should be answered there.

Now on with the show…

I develop a lot of DHTML technology that’s pretty cool. Unfortunately I never really have time to document and share it with the world.

In my former professional life I created DHTML libraries for other developers working with the Kenamea messaging platform.

Running this blog has inspired me to make some of my code available to the public, so today I present you with a way to generate cross browser modal dialogs. I call my technique the subModal.

the subModal in action
The subModal in action

History of the subModal

A couple years ago IE was all the rage. I was doing a lot of heavy DHTML work on IE-only web applications. Microsoft did a really cool (some would say really evil) thing with IE when they added a lot of functionality to the browser. One of my favorites was always showing modal dialogs.

As the years marched on new browsers like FireFox and Opera emerged and I kept working on DHTML applications. Sadly for me some of IE’s functions were thrown out the window since my code had to be cross browser compatible.

Of course modal dialogs aren’t required in the design of a web application, and other ways appeared to deal with this design challenge, but in some cases they’re a nice tool to have at your disposal.

I kept running into situations in which a modal dialog would be such a handy tool, but I had to change my design when the technology dictated that it was impossible.

One thing I don’t like about modal windows and modal dialogs is that you’re able to move the window around, possibly losing association with your main window. This technique binds the two together. You’re never going to lose the modal or it’s parent window.

If you want a browser based application that behaves like a rich client modal dialogs are a great thing. I use them frequently in creation wizards where breaking someone’s frame of reference is generally a bad idea for cognitive reasons.

How does it work?

The subModal works by placing a semi-transparent div over the browser, blocking access to the content below while still providing visibility. This maintains state and doesn’t make someone feel disoriented or lost by moving them completely to another page. Their frame of reference is kept while allowing them to perform a new task (usually closely associated with the content below).

Another div is layered and centered on top of the mask. This div contains an iframe which defaults to a “now loading” page. In my applications I usually place an animated gif inside of this page to make it appear the server is doing something while the user waits.

Finally the iframe’s source is swapped with the page you wish to display. When this page is loaded into the iframe it’s title is swapped with our fake title bar and displayed.

Note that this works best when used in concert with a scrollable div underneath. All of my apps make use of this layout technique. It’s rare that the browser window scrolls. This code supports scrolling the entire browser window, but I don’t recommend it.

Where does it work?

I’ve personally tested this technique with IE 6, FireFox 0.9+, and Opera 7. A good friend of mine tested it on Safari and also reports it works there. In theory it should work with IE 5.5, but I don’t have a 5.5 machine to test on currently.

UPDATE

Opera 7 works but with a hack. Since Opera’s css support doesn’t include opacity I’m using a 24 bit transparent PNG file for the demo. If you don’t care about Opera you can comment this out and it will still work in FireFox, IE, and Safari. I like that method better since you have full control over the mask color and opacity right from the CSS file.

View a demo

How do I use it?

First you might want to download the code. After that it’s as easy as including references to a couple files and inserting some HTML into your page.

At the head of your file you’ll want to add the following references…

<head>
    <link rel="stylesheet" type="text/css" href="subModal.css" />
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript" src="subModal.js"></script>
</head>

The css contains sizing and display styles for the popup elements.

Common.js contains standard functions I find useful such as attaching event handlers and obtaining the browser’s dimensions.

subModal.js is where all the action happens. Inside event handlers are attached for the load and resize events of the browser. The load event initializes dhtml objects that are reused when showing, hiding, or resizing the window.

The javascript file also inserts any HTML necessary for the subModal.

Now that everything’s in place all you have to do is add something that’s going to call the function to show the modal.

This is accomplished by doing the following

showPopWin('your_url_here.html', width, height, callback_function);

The first argument is the file to load, followed by width and height (integers). Any content that overflows these dimensions will scroll inside the modal, like a real window.

The fourth argument allows you to pass a javascript function that will be called when the window is closed – by calling hidePopWin(true). hidePopWin will not call the return function by default. This is useful for cancel button functions.

Conclusion

I’ve sort of glossed over the the DHTML, so if you have questions check out the code or ask me a question on the google group. In real-world implementations I usually wrap everything inside of a div that throws a shadow over the transparent mask, which adds to the floating effect.

I’m sure some of you are already thinking about how you can put this to use and modify it. Go right ahead! Please just drop me a line if you use it.

I hope it’s as useful to you as it is to me.

Bonus round, the callback function

Updated on 1/11/07

I’ve added a quick write-up about how to use the subModal callback function here.

seth, Mon, 02 Jan 2006 01:57:00 GMT
no comments