24
Mar
dfFlexiGrid - Liquid Javascript Grid Layout
The dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML. This is another cool resource for web designers.
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.
Browser Compatibility
- Internet Explorer 6, 7
- Firefox 1.5 +
- Opera 9.1 +
- Netscape 8.1 +
- Safari 3
Here it is…
This file has been downloaded 7189 times.
Please don’t include dfFlexiGrid_inc.js if you go with MooFx on your site…
Please do report us if any bugs on this script and thanks for all the support again…
End of Article
