dfFlexiGrid - Liquid Javascript Grid Layout

52 Comments

Javascript , Resources

The dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML. This is another cool resource for web designers.

dfFlexiGrid

Features

Variety of Layouts from 100% liquid to a custom defined stage.
Extremely smooth transition.
Retains the layout on all pages of the site (cookie based)
Miniature stand-alone JS ( 5555 bytes )
Very simple integration with any site.

Usage

<body onload=”mygrid=new dfGrid(’wrapper’,'left_column_id’,'right_column_id’,fadeSpeed,swipeSpeed);”>

mygrid - The new javascript object to control the grid specified
‘wrapper’ - ID of the wrapper div the mygrid object controls.
‘left_column_id’ - ID of the left column that is within the ‘wrapper’ DIV
‘right_column_id’ - ID of the right column that is within the ‘wrapper’ DIV
fadeSpeed - the number of milliseconds it takes to fade in/out a DIV from start to end
swipeSpeed - the number of milliseconds it takes to swipe in/out a DIV from start to end

You can use the grid object to toggle divs within the document. If you ned to toggle a DIV on click of a button/anchor then add the below to the element.

<a href=”#” onclick=”mygrid.toggleBlock(’block1′);”>

where block1 is the ID of the DIV that is to be toggled.