24 Mar

dfFlexiGrid - Liquid Javascript Grid Layout

59 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.

Browser Compatibility

Internet Explorer 6, 7
Firefox 1.5 +
Opera 9.1 +
Netscape 8.1 +
Safari 3

Here it is…

Download

This file has been downloaded 6521 times.

Please don’t include dfFlexiGrid_inc.js if you go with MooFx on your site…

Demo

Please do report us if any bugs on this script and thanks for all the support again…

End of Article

02 Jan

PHP + Javascript Image Replacement

35 Comments

Some of you would have already used this but we thought to review this for those who haven’t put their hands on it.

This method is basically to get smooth font over your headings/titles. The package comes with a PHP and a Javascript file which replaces all the specified tags with images (dynamic). This can be applied to IDs/Classes/Tags on your site.

A few options over this:

Line Breaks (enable/disable)
Custom Fonts
Font Size / Color
Transparency
Image flickering (enable/disable)
more…

Customization

ifr.js

replaceSelector(” h2 “,” ifr.php “,false);
var testURL = “ test.png ” ;

h2 - Tag to be replaced with the image

ifr.php - the URL of the PHP file which generates the images.

false - Enable/Disable line breaks (splits each word into an image so it floats below and goes on)

test.png - the test image which loads to check if images are enabled on the browser (if not… the php will not generate the images)

ifr.php

$font_file = ‘futura.ttf’ ;
$font_size = 30 ;
$font_color = ‘#000000′ ;
$background_color = ‘#ffffff’ ;
$transparent_background = true ;
$cache_images = true ;
$cache_folder = ‘cache’ ;

The above is very much self explanatory…

Here is a working demo for download:

Download

This file has been downloaded 3489 times.

All the files from the download has to be placed in the PHP server (localhost of your system). After you make the above changes you will look at index.php from your localhost for your new image replaced titles…