simplefx.js

Simple eyecandy effects: shadows, rounding etc.

Functions

OAT.SimpleFX.shadow(element, options)

Adds a shadow to element. Available options are:

• imagePath - path to directory with shadow images
• offsetX , offsetY - horizontal and vertical offset
• rightSize, bottomSize - dimensions of shadows
• rightImage, bottomImage , cornerImage - file names

OAT.SimpleFX.roundImg(element, options)

ToBeDone? - Verify OAT.SimpleFX.roundDiv vs OAT.SimpleFX.roundImg - original documentation had this section header as roundImg -- but sample code was roundDiv

Creates rounded corners on element, using images. Available options are:

• corners - array of booleans, specifying corners to be rounded. Starting from left top clockwise.
• edges - array of booleans, specifying edges to be rounded. Starting from top clockwise.
• cornerFiles, edgeFiles - array of file names
• thickness - array of sizes, specifying thicknesses of corners. Starting from left top clockwise.

OAT.SimpleFX.roundDiv(element, optionsObject)

ToBeDone? - Verify OAT.SimpleFX.roundDiv vs OAT.SimpleFX.roundImg - original documentation had this section header as roundImg -- but sample code was roundDiv

Creates rounded corners on element, using stacked DIVs. Available options are:

• corners - array of booleans, specifying corners to be rounded, clockwise from top left.
• color, backgroundColor - colors to be used. BackgroundColor? is used only for computation of antialiasing color. Defaults to 'auto' (=inherit).
• antialias - boolean value
• size - radius. Good values are 2-8.

OAT.SimpleFX.shader(clicker, target, options)

Marks clicker as a button, which hides/shows target. Target may be an array of elements. Available options are:

• type - (toggle)
  • 0 = only hide
  • 1 = only show
  • 2 = both

Examples

Example 1, using OAT.SimpleFX.roundImg

ToBeDone? - Verify OAT.SimpleFX.roundImg vs OAT.SimpleFX.roundDiv - original code had roundDiv, but description was roundImg

OAT.SimpleFX.shadow("myDiv", {});
OAT.SimpleFX.roundImg("myDiv",{corners:[1,1,0,0]});
OAT.SimpleFX.shader("myDiv", ["myDiv1","myDiv2"], {type:2});

Example 2, using OAT.SimpleFX.roundDiv

ToBeDone? - Verify OAT.SimpleFX.roundImg vs OAT.SimpleFX.roundDiv - original code had roundDiv, but description was roundImg

OAT.SimpleFX.shadow("myDiv", {});
OAT.SimpleFX.roundDiv("myDiv", {antialias:1, size:5});
OAT.SimpleFX.shader("myDiv", ["myDiv1","myDiv2"], {type:2});

CategoryDocumentation CategoryOAT CategoryOpenSource CategoryToBeDone?