Bitstructures — Simon Bates

Open Web Podcast

September 4, 2008
Tags: ajax

This weekend I finished up some code that I'd started a little while ago but hadn't had the chance to complete: a function, that can be used in the progressive enhancement style, for showing and hiding parts of a web page on demand.

Example

Source for example:

<script type="text/javascript" src="dojo/dojo.js"></script>
<script type="text/javascript" src="ondemand.js"></script>
<script type="text/javascript">
    dojo.addOnLoad(function(){
        ondemand("ondemand1", "Show Details", "Hide Details");
    });
</script>

<div id="ondemand1">
<form id="form1" action="#">
<p><label for="tags">Tags:</label><br>
<input id="tags" type="text"></p>
<p><label for="description">Description:</label><br>
<textarea id="description" rows="5" cols="30"></textarea></p>
<p><button type="submit">Save</button></p>
</form>
</div>

Usage

ondemand(elem, showLabel, hideLabel)

elem: the element to make on demand (either an element object reference or an id)
showLabel: the label for the button to show the element
hideLabel: the label for the button to hide the element

The function hides the specified element and inserts a button into the document to show and hide the element again. To use in a progressive enhancement style, include the part of the web page that you'd like to be shown and hidden on demand as static content, and then call the ondemand function on it. If JavaScript is turned off, the content will always be shown and there will be no button to hide or show the content.

Source code

ondemand.js

Progressive enhancement and flicker

Due to the page being reworked after loading you may see flicker as the content is initially shown and then quickly hidden. One approach for minimizing the flicker is to add a document.write statement that inserts a CSS rule to hide the content to be made on demand before it appears in the document. For example:

document.write('<style type="text/css">#ondemand1 {
    display: none }</style>');

The document will still change after the page is loaded, as the button is inserted, but the change will be smaller than before and it will be additive rather than subtractive.

Firefox 3 released!

June 17, 2008
Tags: mozilla

Congratulations Mozilla! Firefox 3 is out today.

Some highlights, for me:

faster performance
Mac OS X integration
the awesome Awesome bar and new Places database
goodbye modal remember password dialog, hello modeless goodness
the new site information user interface makes it very easy to access security information for the site that you are currently using
and, of course, the updated ARIA implementation

Mike Beltzner has put together a nice screencast introducing some of the new features, including the awesome bar, site information, malicious site block, and new features for the download window and add-ons dialog.

Installing Accerciser on Ubuntu 7.10

March 1, 2008
Tags: accessibility

I recently installed the awesome Accerciser accessibility testing tool on my Ubuntu 7.10 virtual machine. I installed the trunk version from subversion and needed these packages:

subversion
gnome-common
libglib2.0-dev
libgconf2-dev
ipython

I checked out, built, and installed Accerciser with:

$ svn co http://svn.gnome.org/svn/accerciser/trunk accerciser
$ cd accerciser
$ ./autogen.sh
$ make
$ sudo make install

The "make install" installs a binary called "accerciser".

Ajax Pub Nite #1

January 15, 2008
Tags: ajax

Last night I went to the first Toronto Ajax Pub Nite at The Rhino on Queen West. It was clearly the right location for a JavaScript get together as not only is the rhino the animal featured on the cover of David Flanagan's JavaScript: The Definitive Guide ("the Rhino book") and the name of a JavaScript engine, but they also have free wifi! We'll be meeting at The Rhino on the second Monday of each month (February 11 is next up). If you're doing cool web stuff and you're in Toronto, come along!

← Newer | Older →

Open Web Podcast

ondemand.js