Apr
26
2012

jqFloat.js Floating elements with jQuery

jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be “floating” on your web page. It helps create simple floating animation and make your websites come alive with these little “floating” object. Have fun with Floating


Demo    Download

You can have several “floating” objects with different attributes within your web page. Also, you might make these floated objects “landing” through plugin’s method, and vice versa of course. See below for more details about this.

How It Works


jqFloat.js uses  jQuery .animate() method with infinity loop to animate object’s to different positions, thus it make the object appears to be floating on the web page. Beside, it uses jQuery .data() method to store and keep track of each object’s attributes and status.

jqFloat.js works well in corss-browsers: IE6 and above, Firefox and Webkit browsers.

 

How to Use


1. First, of course, you need to include jQuery and jqFloat.js script files inside <head> tag.


It should work well with jQuery 1.7.1 (haven’t tested for lower version).

2. Next, you can make your HTML objects “floating” by calling .jqFloat() function on jQuery object like this:

$(document).ready(function() {
	$('object').jqFloat();
});

Well, try define own floating setting rather than using default value. Refer to configuration section for more detail.

3. Enjoy Floating ~!!!

 


 

Configuration:


.jqFloat( [Method] [, Options] )

Method: Used to control floating object.
Options: An array to configure floating animation.


 

Method:


Currently only two methods available:

Play (or no method specified)
Start floating animation.

Stop
Start landing animation (stop floating animation).

Options

There are few options can be used to configure floating animation.

width
Type: Int     Default: 100
Maximum horizontal floating area. The value will be divided by 2 and append to object left and right.

height
Type: Int     Default: 100
Maximum vertical floating area. The value will be divided by 2 and append to object top and bottom.

 

Example of Configuration


$(document).ready(function() {
	//if no method and options specified
	//start the floating animation with defaults settings
	$('object').jqFloat();
	//if only options specified
	//start the floating animation with specified settings
	$('object').jqFloat({
		width: 300,
		height: 300,
		speed: 100
	});
	//stop the floating animation or
	//start landing animation
	$('object').jFloat('stop');
	//start the floating animation
	$('object').jFloat('play');
});

License


jqFloat.js is licensed under the GNU General Public License version 2 or later. You can do whatever you like to the source code. =)

 

Demo    Download

Related Posts

About the Author: Vrushank Brahmakshatriya

I am Vrushank Brahmakshatriya a 24 year old Entrepreneur blogger, Founder and Editor of "WebDeveloperGeeks". I spend too much time in front of the computer and find myself telling my wife', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. I love jQuery, PHP, MYSQL, CSS, AJAX - pretty much anything. You can follow me on @twitter and @facebook

2 Comments + Add Comment

  • I found this jqFloat very useful :) Thanks for sharing it.

  • really great jquery plugin. floating elements you want!!! Thanks!!

Leave a comment


GeeksLabs Network

Subscribe To My Blog

Enter your email address:

Delivered by FeedBurner

Donate


If you like what I do, please consider donating a token of your appreciation.

Tag Cloud

Ajax (2)
Android (4)
Blackberry (1)
Brochures & Cards (4)
Charts (1)
CMS News (1)
CSS (9)
CSS3 (9)
database (1)
Design (1)
Drupal (1)
Editors (1)
Flash (1)
Font (2)
Form (1)
HTML (6)
HTML5 (8)
Icon (3)
Illustration (7)
Infographics (2)
Insipration (9)
Inspiration (4)
iphone & ipad (1)
Java (1)
JavaScript (3)
Joomla (1)
Jquery (13)
Jquery (9)
Logo (3)
Magento (1)
Mobile News (4)
Open Source (6)
Photography (1)
PHP (6)
PHP (4)
PSD (3)
Resources (3)
SEO (1)
Template (15)
Text Effect (1)
Textures (4)
Tools (5)
Tutorial (1)
Typography (3)
Uncategorized (1)
Vectors (1)
Wallpapers (1)
Web Apps (4)
Web Development (1)
Wordpress (4)

WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.

Buffer