24 Mar

dfFlexiGrid - Liquid Javascript Grid Layout

Javascript , Resources

(38 votes, average: 4.55 out of 5)

Loading ...

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.