Design Chemical

Examples

Scroll down to see the floating animation.

Example 1 – Default Options

$('#floater-1').dcFloater();

Example 2

$('#floater-2').dcFloater({
			width: 180,
			location: 'top',
			align: 'right',
			offsetLocation: 10,
			offsetAlign: 10,
			speedFloat: 1500,
			speedContent: 400,
			tabText: 'Floater 2',
			autoClose: true,
			easing: 'easeOutQuint',
			event: 'hover'
	});

Example 3

$('#floater-3').dcFloater({
			width: 150,
			location: 'top',
			align: 'left',
			offsetLocation: 250,
			offsetAlign: 10,
			speedFloat: 1500,
			speedContent: 400,
			tabText: 'Floater 3',
			autoClose: true,
			easing: 'easeOutQuint',
			event: 'click'
	});

Example 4

	$('#floater-4').dcFloater({
			width: 180,
			location: 'bottom',
			align: 'left',
			offsetLocation: 10,
			offsetAlign: 10,
			speedFloat: 1500,
			speedContent: 400,
			tabText: 'Floater 4',
			autoClose: false,
			easing: 'easeOutBounce',
			event: 'click'
	});

Example 5

	$('#floater-5').dcFloater({
			width: 180,
			location: 'bottom',
			align: 'right',
			offsetLocation: 10,
			offsetAlign: 10,
			speedFloat: 1500,
			speedContent: 400,
			tabText: 'Floater 5',
			autoClose: true,
			easing: 'easeOutBounce',
			event: 'hover'
	});

Example 6

	$('#floater-6').dcFloater({
			width: 150,
			location: 'top',
			align: 'right',
			offsetLocation: 250,
			offsetAlign: 10,
			speedFloat: 2000,
			speedContent: 600,
			tabText: 'Floater 6',
			autoClose: true,
			easing: 'easeOutQuint',
			event: 'hover'
	});

Also see the plugin in action on our WordPress demo pages – WordPress Floating Menu Plugin and the WordPress Floating Tweets Plugin