jQuery Label Effects

Default Settings

The label effect functionality can easily be added to a control containing text with appropriate default settings.
You can also remove the label effect functionality if it is no longer required.

Default effect (floating): Floating text   Remove

$('#defaultEffect').labeleffect();

$('#removeEffect').toggle(function() {
		$(this).text('Re-attach');
		$('#defaultEffect').labeleffect('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultEffect').labeleffect();
	}
);

You can override the defaults globally as shown below:

$.labeleffect.setDefaults({effect: 'sunken'});

Processed fields are marked with a class of hasLabelEffect and are not re-processed if targetted a second time.

Preset Effects

Several preset effects can be invoked via a single option that provides values for most of the other settings.

Raised text: Raised text

$('#raisedEffect').labeleffect({effect: 'raised'});

Sunken text: Sunken text

$('#sunkenEffect').labeleffect({effect: 'sunken'});

Echoed text: Echoed text

$('#echoedEffect').labeleffect({effect: 'echoed'});

Floating text: Floating text

$('#floatingEffect').labeleffect({effect: 'floating'});

Shadow text: Shadow text

$('#shadowEffect').labeleffect({effect: 'shadow'});

Customised Effects

You can customise any of the settings to achieve your own effect. There are two aspects to the effects - a highlight and a shadow. Each can have its own colour, direction, and distance. You can also have the effect fill the intervening space and even blend from the main colour to the effect colour.

Text:

Highlight: UPLEFT UPUPRIGHT LEFTNONE RIGHTDOWNLEFT DOWNDOWNRIGHT 12 34 56 78 910 Fill Blend

Shadow: UPLEFT UPUPRIGHT LEFTNONE RIGHTDOWNLEFT DOWNDOWNRIGHT 12 34 56 78 910 Fill Blend

 

Sample: Customised text

 

$('#customEffect').labeleffect();
		
$('#custom input, #custom select').change(function() {
	$('#customEffect').labeleffect('change',
		{color: $('#customColour').val(),
		hiColor: $('#customHiColour').val(),
		hiDir: $('#customHiDir').val(),
		hiOffset: $('#customHiOffset').val(),
		hiFill: $('#customHiFill').is(':checked'),
		hiBlend: $('#customHiBlend').is(':checked'),
		shadowColor: $('#customShadowColour').val(),
		shadowDir: $('#customShadowDir').val(),
		shadowOffset: $('#customShadowOffset').val(),
		shadowFill: $('#customShadowFill').is(':checked'),
		shadowBlend: $('#customShadowBlend').is(':checked')});
});

Apply to Anything with Text

You can apply the effects to anything that contains text.

$('.anythingEffect').labeleffect({shadowOffset: 10});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).labeleffect({
	color: '', // Main text colour
	hiColor: 'silver', // The highlight colour
	hiDir: this.NONE, // The highlight direction
	hiOffset: 0, // The highlight offset
	hiFill: false, // True to fill from main text to highlight
	hiBlend: false, // True to blend from main color to highlight
	shadowColor: 'silver', // The shadow colour
	shadowDir: this.DOWNRIGHT, // The shadow direction
	shadowOffset: 5, // The shadow offset
	shadowFill: false, // True to fill from main text to shadow
	shadowBlend: false, // True to blend from main color to shadow
	effect: '' // A preset effect
});

$.labeleffect.setDefaults(settings) // Change settings for all instances

$.labeleffect.addEffect(id, settings) // Add a new named effect
$.labeleffect.getEffects() // Retrieve a list of named effects

$(selector).labeleffect('change', settings) // Change the instance settings
$(selector).labeleffect('change', name, value) // Change a single setting

$(selector).labeleffect('destroy') // Remove the label effect functionality