A javascript hack to have Spry CollapsiblePanels remember their state

Adobe Dreamweaver uses the Spry CollapsiblePanel plugin to create boxes that expand and collapse when a heading is clicked.

The following code allows the open/close state of the panels on a page to be remembered when the page is reloaded, or when history is accessed. It can also be used to share the open/close state between many pages containing the same panels.

A quick javascript hack to fake adjusting HTML5 audio elements' timeupdate event frequency

I was trying to make a bunch of elements change position as an audio file played, using a snippet something like:

$(audiohtml).bind("timeupdate", onAudioUpdate);
$(audiohtml).bind("play", onAudioUpdate);
$(audiohtml).bind("pause", onAudioUpdate);

function onAudioUpdate() {
	// Move the elements here
}

But the trouble was that the audio element's timeupdate event only fires once every 200ms or so on my browser (this is set by the HTML5 audio specification and isn't modifiable as far as I know).

200ms was slow enough that the animation of the elements looked jerky (5 fps).

Instead, I used a 10Hz setInterval clock to trigger the movement functions, and used the audio's play and pause events to create and destroy the clock: