pax.box

This class creates boxes for various purposes; it’s a base class for window, and widget classes

Author

Mikkel Bergmann, http://www.pointful.com

Summary
pax.boxThis class creates boxes for various purposes; it’s a base class for window, and widget classes
Functions
pax.box.showShows a box at given position
pax.box.appendShows a box at given element, appending it into the dom, rather than showing it at a specific position
pax.box.setPositionSets the position and size of a box, plus size & position of the iFrame for IE.
pax.box.showOnRightShows a box 5 pixels to the left of an element, optionally fading it out after timeout seconds.
pax.box.hideThis will hide the given box, using the (optional) given function

Functions

pax.box.show

pax.box.show = function(id,
message,
className,
x,
y,
target)

Shows a box at given position

Parameters

idDOM pointer for the window element
messageThe contents to put into the box (HTML)
classNameThe CSS class name to assign to the box
xHorizontal (left) position for the box
yVertical (top) position for the box
targetDOM element to append the box to; if not specifed, we use the body element

Example

<input type='text' id='pax.box.show.example'>
[:.
    var pos = pax.util.getPosition( $('pax.box.show.example') );
    pax.box.show( 'myWindow', '^ Hello world!', 'hintMessage', pos.x, pos.y + pos.height + 5 );

    exampleCleanup = function() { pax.box.hide( 'myWindow' ); };
:]

This will create a box below the input box.  It uses pax.util.getPosition to find the position of the element.  Also note that exampleCleanup is just a hook for the example, that hides the window again, when you’re done with it.

pax.box.append

pax.box.append = function(id,
message,
className,
target,
location)

Shows a box at given element, appending it into the dom, rather than showing it at a specific position

Parameters

idDOM pointer for the window element
messageThe contents to put into the box (HTML)
classNameThe CSS class name to assign to the box
targetwhich element to append the box to
locationone of N, E, S, W

Example

<input type='text' id='pax.box.append.example'>
[:.
    pax.box.append( 'myWindow', 'Hello world!', 'hintMessage',  $('pax.box.append.example'), 'E' );
    exampleCleanup = function() { pax.box.hide( 'myWindow' ); };
:]

This will create a box to the right of the input box.  Note that exampleCleanup is just a hook for the example, that hides the box again, when you’re done with it.

pax.box.setPosition

pax.box.setPosition = function(box,
x,
y)

Sets the position and size of a box, plus size & position of the iFrame for IE.

pax.box.showOnRight

pax.box.showOnRight = function(id,
message,
className,
element,
timeout,
distance)

Shows a box 5 pixels to the left of an element, optionally fading it out after timeout seconds.

Parameters

idDOM pointer to the window element
messageThe contents to put into the box
classNameThe CSS class name to assign to the box
elementThe element to place the box near
timeoutOptionally specify in seconds how long the box is visible, 0 = don’t hide
distanceOptionally specify in pixels how far away, defualt = 5px

Example

<input type='text' id='pax.box.showOnRight.example'>
[:.
    pax.box.showOnRight( 'myBox', '<- Hello world!', 'hintMessage', $('pax.box.showOnRight.example'), 7 );
:]

This will create a box to the right of myElement, and remove it after 7 seconds, (default = 5 seconds).

pax.box.hide

pax.box.hide = function(box,
func)

This will hide the given box, using the (optional) given function

Parameters

idDOM pointer to the window element
functionOptionally specify a function to be used to hide a box, such as a fading function, etc...

Example

<input type="button" onclick="pax.box.hide($('myBox'), pax.fx.fadeOut );" value="Hide!">
<input type='text' id='pax.box.hide.example1'>
[:.
    pax.box.showOnRight( 'myBox', '<- Hello world!', 'hintMessage', $('pax.box.hide.example1') );
:]

This will hide a box, using the pax.fx.fadeOut method.

pax.box.show = function(id,
message,
className,
x,
y,
target)
Shows a box at given position
pax.box.append = function(id,
message,
className,
target,
location)
Shows a box at given element, appending it into the dom, rather than showing it at a specific position
pax.box.setPosition = function(box,
x,
y)
Sets the position and size of a box, plus size & position of the iFrame for IE.
pax.box.showOnRight = function(id,
message,
className,
element,
timeout,
distance)
Shows a box 5 pixels to the left of an element, optionally fading it out after timeout seconds.
pax.box.hide = function(box,
func)
This will hide the given box, using the (optional) given function
pax.util.getPosition = function(element,
excludeParent)
Locates position and dimensions of an object
pax.fx.fadeOut = function(ele,
time)
Fades out an element in optional time miliseconds
Close