Overview

ActiveWAFL comes with some useful tools to create smooth and modern javascript effects.

Visibility

$("ObjectId").Show();

$("ObjectId").Hide();

$("ObjectId").FadeIn();

$("ObjectId").FadeIn();

$("ObjectId").OpenVertical();

$("ObjectId").CloseVertical();

$("ObjectId").OpenHorizontal();

$("ObjectId").OpenHorizontal();

Property Animation

You can animate any css style

Animate position with acceleration

In this example, the top and left properties of 120 elements measuring 2 pixels x 2 pixels are animated to create a dot-explosion.

Press the button to see the effect.

Code used in the position animation example
  1. if ($("AnimatePositionButton").GetText() === "Reset Animation")
  2.    {
  3.       for (i = 1; i <= 120; i++)
  4.       {
  5.          $("DotElement" + i)
  6.             .AnimateProperty("top", 580, "px", 50000, 5, 10)
  7.             .AnimateProperty("left", 440, "px", 50000, 5, 10);
  8.       }
  9.       $("AnimatePositionButton").SetText("Animate");
  10.    } else {
  11.       for (i = 1; i <= 120; i++)
  12.       {
  13.          $("DotElement" + i)
  14.             .AnimateProperty("top", Math.floor((Math.random() * 800)+180), "px", 15200, 5, 35)
  15.             .AnimateProperty("left", Math.floor((Math.random() * 680)+100), "px", 15200, 5, 35);
  16.       }
  17.       $("AnimatePositionButton").SetText("Reset Animation");
  18.    }

Animate size

By animating the width and height properties an element, the element will appear to grow or shrink.

Size
animation
box
Code used in the size animation example
  1. $("GrowButton").AddClickHandler(
  2.    function()
  3.    {
  4.       $("SizeAnimationBox")
  5.          .AnimateProperty("width",200,"px");
  6.          .AnimateProperty("height",200,"px");
  7.    });
  8. $("ShrinkButton").AddClickHandler(
  9.    function()
  10.    {
  11.       $("SizeAnimationBox")
  12.          .AnimateProperty("width",100,"px");
  13.          .AnimateProperty("height",100,"px");
  14.    });

Animate color

Even RGB color properties can be animated. Here we animate the transition to blue or red.

Color
animation
box
Code used in the color animation example
  1. $("RedButton").AddClickHandler(
  2.    function()
  3.    {
  4.       $("ColorAnimationBox").AnimateProperty("background-color","rgb(170,33,33)");
  5.    });
  6. $("BlueButton").AddClickHandler(
  7.    function()
  8.    {
  9.       $("ColorAnimationBox").AnimateProperty("background-color","rgb(33,33,170)");
  10.    });

HTML Element Methods

All HTML Elements are extended with useful ActiveWAFL functionality. Here is an overview of the methods related to visual effects and animation.

Animation Methods

AnimateJsProperty

AnimateJsProperty signature
  1. HTMLElement HTMLElement::AnimateJsProperty(String propertyname, Number targetValue[, String targetValueSuffix, Number speed, Number accelerate, Number decelerate, Number accelerateCurve, Number decelerateCurve, Function callback])
AnimateJsProperty example
  1. $("SizeAnimationBox").AnimateJsProperty("scrollTop",200,"px");

AnimateProperty

AnimateProperty signature
  1. HTMLElement HTMLElement::AnimateProperty(String propertyName, String|Number targetValue[, String targetValueSuffix, Number speed, Number accelerate, Number decelerate, Number accelerateCurve, Number decelerateCurve, Function callback])
AnimateProperty example
  1. $("SizeAnimationBox").AnimateProperty("width",200,"px");
  2. $("ColorAnimationBox").AnimateProperty("background-color","rgb(170,33,33)");

CloseVertical

CloseVertical signature
  1. HTMLElement HTMLElement::CloseVertical([Number speed, Function callback])
CloseVertical example
  1. $("ObjectId").CloseVertical();

OpenVertical

OpenVertical signature
  1. HTMLElement HTMLElement::OpenVertical([Number speed, Function callback])
OpenVertical example
  1. $("ObjectId").OpenVertical();

ToggleOpenVertical

ToggleOpenVertical signature
  1. HTMLElement HTMLElement::ToggleOpenVertical([Number speed, Function callback])
ToggleOpenVertical example
  1. $("ObjectId").ToggleOpenVertical();

ToggleDisplay

ToggleDisplay signature
  1. HTMLElement HTMLElement::ToggleDisplay()
ToggleDisplay example
  1. $("ObjectId").ToggleDisplay();

CSS Methods

AddClass

AddClass signature
  1. HTMLElement HTMLElement::AddClass(String className)
AddClass example
  1. $("ObjectId").AddClass("Active");

GetCss

GetCss signature
  1. String HTMLElement::GetCss(String propertyName, Boolean useComputed)
GetCss example
  1. var opacity = $("ObjectId").GetCss("opacity");

GetCssLocation

GetCssLocation signature
  1. DblEj.UI.Point HTMLElement::GetCssLocation()
GetCssLocation example
  1. var locObject = $("ObjectId").GetCssLocation();
  2. alert("X: " + locObject.Get_X() + ", Y: "+ locObject.Get_Y());

GetCssLocation

GetCssSize signature
  1. DblEj.UI.Point HTMLElement::GetCssSize()
GetCssSize
  1. var sizeObject = $("ObjectId").GetCssSize();
  2. alert("W: " + sizeObject.Get_X() + ", H: "+ sizeObject.Get_Y());

GetCssX

GetCssX signature
  1. Number HTMLElement::GetCssX()
GetCssX example
  1. var locX = $("ObjectId").GetCssX();

GetCssY

GetCssY signature
  1. Number HTMLElement::GetCssY()
GetCssY example
  1. var locY = $("ObjectId").GetCssY();

GetCssY

HasClass signature
  1. Boolean HTMLElement::HasClass(className)
HasClass example
  1. var isPanel = $("ObjectId").HasClass("Panel");

RemoveClass

RemoveClass signature
  1. HTMLElement HTMLElement::RemoveClass(String className)
RemoveClass example
  1. $("ObjectId").RemoveClass("Hidden")

SetCss

SetCss signature
  1. HTMLElement HTMLElement::SetCss(String propertyName, String propertyValue)
SetCss example
  1. $("ObjectId").SetCss("opacity", .5);

ToggleAttribute

ToggleAttribute signature
  1. HTMLElement HTMLElement::ToggleAttribute(String attributeName, Mixed value1, Mixed value2)
ToggleAttribute example
  1. $("ObjectId").ToggleAttribute("hidden",true,null);

ToggleClass

ToggleClass signature
  1. HTMLElement HTMLElement::ToggleClass(String className)
ToggleClass example
  1. $("ObjectId").ToggleClass("Active");

ToggleCss

ToggleCss signature
  1. HTMLElement HTMLElement::ToggleCss(String cssProperty, String value1, String value2, Number animationSpeed)
ToggleCss example
  1. $("ObjectId").ToggleCss("width", "100px", "200px");

SetCssLocation

SetCssLocation signature
  1. HTMLElement HTMLElement::SetCssLocation(Number x, Number y)
SetCssLocation example
  1. $("ObjectId").SetCssLocation(100,100);

SetCssSize

SetCssSize signature
  1. HTMLElement HTMLElement::SetCssSize(Number width, Number height)
SetCssSize example
  1. $("ObjectId").SetCssSize(100,100);

SetCssX

SetCssX signature
  1. HTMLElement HTMLElement::SetCssSize(Number x)
SetCssX example
  1. $("ObjectId").SetCssX(100);

SetCssY

SetCssY signature
  1. HTMLElement HTMLElement::SetCssSize(Number y)
SetCssY example
  1. $("ObjectId").SetCssY(100);

Misc Methods

Pulse

Pulse signature
  1. HTMLElement HTMLElement::Pulse(Number speed, String color, Function callbackFunction)
Pulse example
  1. $("ObjectId").Pulse();
SetOpacity signature
  1. HTMLElement HTMLElement::SetOpacity(Number opacity)
SetOpacity example
  1. $("ObjectId").SetOpacity(.5);