ZoomGrid

Description

ZoomGrid is a grid which can zoom its cells. In other words, it's a two-dimensional accordion menu inside a fixed rectangle.

Alternatives:

• Recently Chris Coyier did something very similar: the Nine Image Expander Thing.

• If you're looking for a traditional accordion that expands both vertically and horizontally, you should have a look at InfoGrid.

• Another great alternative are Rotating Blocks (almost pure CSS 3).

Download

Latest version: ZoomGrid.js.

Extensions:

• ZoomGridTransparency.js - make cells transparent

• ZoomGridHighlight.js - add highlighting

• ZoomGridFrame.js - add ornament frames around each cell

• ZoomGridMaxChildWidth.js - maximize width of child elements

• ZoomGridDisableFoldedLinks.js - disable links in folded cells

• ZoomGridUnfocusedHide.js - hide contents of unfocused cells

• ZoomGridRestoreButton.js - show a button to unfocus all cells

• ZoomGridContainerFade.js - fade out unfocused grid when mouse is inactive

Those files are uncompressed. To get production libraries, use a compressor.

The development version is available on GitHub.
You may easily clone the project by running:

$ git clone git://github.com/markusfisch/ZoomGrid

How to use

1. Copy ZoomGrid.js (along with any optional extension) into your web folder and add a corresponding <script/> tag for each file to the <head/> element of your page.

   <script type="text/javascript"
   	src="path/to/ZoomGrid.js"></script>
   <script type="text/javascript"
   	src="path/to/ZoomGridTransparency.js"></script>
   ...

2. Then invoke the grid:

   <script type="text/javascript">
   <!--
   var z = new ZoomGrid(
   	{ container: document.getElementById( "Contents" ) } );

   In this case, you should have a <div id="Contents"/> somewhere on your page, of course.

3. After that, you need to activate the extensions you want to use. For example, to activate the transparency extension do:

   z.addTransparency();
   -->
   </script>

   Some extensions may require attributes. Just look at the corresponding source file. For a full sample see DemoZoomGrid.js.

Compatibilty

Works with the latest versions of Opera, Firefox, Chrome, Safari and Internet Explorer.

License

ZoomGrid is Public Domain.