Spry Highlight Effect samples

The Highlight effect will gradually change the color between the current element background color to the one defined with the "to:" option in 1 second.

This first example will transit the element background from the default #CCCCCC color to the #FFCC33.

<script type="text/javascript">
 var first_example = new Spry.Effect.Highlight('example1', {to:'#FFCC33'});
</script>

Toggle and Duration

Toggle allows the effect to reverse itself on the second click. Duration allows you to determine the length of the change. Duration is set in milliseconds (1000ms.= 1 sec.).

<script type="text/javascript">
 var second_example = new Spry.Effect.Highlight('example2', {duration: 2000, from:'#CCC', to:'#FFCC33', toggle: true});
</script>

Restore color

There are scenarios where you will want the highlight to happen to catch the users attention, and then disappear. This is the restoreColor option. For this feature to work, toggle has to be off.

The parameters for the "from", "to" and "restoreColor" vould be sent in the CSS format: #FFCC33, short CSS format #CCC or rgb: rgb(255,204,51).

<script type="text/javascript">
 var third_example = new Spry.Effect.Highlight('example3', {from:'#CCCCCC', to:'rgb(255,204,51)', restoreColor: '#CCC'});
 </script>

Setup and Finish functions

As all the effects the Highlight allow you to specify your own custom made JS functions that are necessary to be run by the effect before or after the animation. The names of the JS functions are given to the constructor using the setup and finish parameters.

In this example before the animation to start will disable the button and the background color will change to white. These properties of the button will be than reverted to their original values when the Highlight will finish the color migration.

<script type="text/javascript">
	var start_function = function()
	{
		var button = document.getElementById('animation_button');
		if (button)
		{
			button.disabled = true;
			button.style.backgroundColor = 'white';
		}
	}

	var end_function = function()
	{
		var button = document.getElementById('animation_button');
		if (button)
		{
			button.disabled = false;
			button.style.backgroundColor = '';
		}
	}
	var fourth_example = new Spry.Effect.Highlight('example4', {from:'#CCCCCC', to:'#FFCC33', toggle: true, setup: start_function, finish: end_function});
</script>