InfoCaptor

  1. Home
  2. Docs
  3. InfoCaptor
  4. How to add bells and whistles to any dashboard
  5. Motion Effects on widgets

Motion Effects on widgets

Please check the visual Effects section before proceeding further. That is the foundation upon which this article is built upon Within the javascript section you can access the object properties using the “this” operator The html div is also accessible using this mechanism. so “this.div” refers to the jquery div object. To this you can use the following jquery effects. 

Example 

if (glb["_new"]<20)
{
this.textColor='red';
       
this.div.effect("bounce", { direction:'left', times:5 }, 300);
}
else if (glb["_new"]<40)
{
this.textColor='green';
}
else if (glb["_new"]<80)
this.textColor='blue';
else if (glb["_new"]<110)
this.textColor='yellow';
else
this.fillColor='red';

 If you notice, the first if condition is “if less than 20 then change color to red and also shake the widget with a bounce effect.” The effects can be applied only to the this.divMore more effectsReference : http://docs.jquery.com/UI/Effects Effects that can be used with Show/Hide/Toggle: 

  • Blind – Blinds the element away or shows it by blinding it in.
  • Clip – Clips the element on or off, vertically or horizontally.
  • Drop – Drops the element away or shows it by dropping it in.
  • Explode – Explodes the element into multiple pieces.
  • Fade – Fades the element, by gradually changing its opacity.
  • Fold – Folds the element like a piece of paper.
  • Puff – Scale and fade out animations create the puff effect.
  • Slide – Slides the element out of the viewport.
  • Scale – Shrink or grow an element by a percentage factor.

Effects that can be only used stand-alone
Bounce – Bounces the element vertically or horizontally n-times.
Highlight – Highlights the background with a defined color.
Pulsate – Pulsates the opacity of the element multiple times.
Shake – Shakes the element vertically or horizontally n-times.
Size – Resize an element to a specified width and height.
Transfer – Transfers the outline of an element to another.

Was this article helpful to you? Yes No

How can we help?