stickyWinFx.js

Extends StickyWin to create popups that fade in and out and can be dragged and resized (requires stickyWinFx.Drag.js).

Author

Aaron Newton (aaron [dot] newton [at] cnet [dot] com)

Dependencies

mootoolsFx.Base.js
cnetstickyWin.js and all its dependencies.
optionalstickyWinFx.Drag.js and Drag.Base.js
Summary
stickyWinFx.jsExtends StickyWin to create popups that fade in and out and can be dragged and resized (requires stickyWinFx.Drag.js).
StickyWinFxCreates a StickyWin that optionally fades in and out, is draggable, and is resizable (requires stickyWinFx.Drag.js).
Change Log$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/stickyWinFx.js,v $ $Log: stickyWinFx.js,v $ Revision 1.13 2007/03/29 23:12:00 newtona confirmer now checks for a bg color in IE6 to use crossfading (see Element.fxOpacityOk) fixed an IE7 css layout issue in stickyDefaultHTML StickyWin now uses Element.flush StickyWinFx.Drag now temporarily shows the sticky win (with opacity 0) to execute makeDraggable and makeResizable to prevent a Safari bug

StickyWinFx

Creates a StickyWin that optionally fades in and out, is draggable, and is resizable (requires stickyWinFx.Drag.js).

Arguments

optionsan object with key/value options

Options

see StickyWin; inherits all those options in addition to the following.

fade(boolean) fade in and out; defaults to true
fadeDuration(integer) the duration of the fade effect; defaults to 150
fadeTransitionan Fx.Transitions to use for the fade effect; defaults to Fx.Transitions.sineInOut

Additional Options

These options depend on stickyWinFx.Drag.js and Drag.Base.js; so they don’t do anything if those files are not included in your environment.

draggable(boolean) make the popup draggable, defaults to false
dragOptions(object) optional options to pass to the drag effect
dragHandleSelectoroptional css selector to select the element(s) within in your popup to use as a drag handle.
resizable(boolean) make the popup resizable or not; defaults to false
resizeOptions(object) optional options to pass to the resize effect
resizeHandleSelectoroptional css selector to select the element(s) within in your popup to use as a resize handle.

Example

var myWin = new StickyWinFx({
content: '<div id="myWin">hi there!<br><a href="javascript:void(0);" class="closeSticky">close</a></div>',
fadeDuration: 500, //slow it down
draggable: true, //make it draggable
dragHandleSelector: 'img.handle' //get the img with the class "handle" for the handle
});
//fades in a box in the middle of the window with "hi there" and a close link(end)
//window is draggable using the image(s) with the class "handle"

Change Log

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/stickyWinFx.js,v $ $Log: stickyWinFx.js,v $ Revision 1.13 2007/03/29 23:12:00 newtona confirmer now checks for a bg color in IE6 to use crossfading (see Element.fxOpacityOk) fixed an IE7 css layout issue in stickyDefaultHTML StickyWin now uses Element.flush StickyWinFx.Drag now temporarily shows the sticky win (with opacity 0) to execute makeDraggable and makeResizable to prevent a Safari bug

Revision 1.12 2007/03/23 23:01:16 newtona stickywin: implemented current options options method (no functional change) stickywinFx: removed an old function that was empty; should have been gone a long time ago (getDefaultOptions)

Revision 1.11 2007/03/08 02:42:15 newtona fixed an error where the handle was being assigned before the content

Revision 1.10 2007/02/27 21:46:43 newtona docs update; fixing references

Revision 1.9 2007/02/22 18:20:18 newtona fixed bug where the element faded out, but wasn’t set to display-none

Revision 1.8 2007/02/21 00:26:52 newtona added a default drag handle

Revision 1.7 2007/02/08 01:30:07 newtona fixed syntax error

Revision 1.6 2007/02/07 20:51:41 newtona implemented Options class implemented Events class StickyWin now uses Element.position

Revision 1.5 2007/01/26 05:50:58 newtona added footer cvs tags

Creates a div within the page with the specified contents at the location relative to the element you specify; basically an in-page popup maker.
Creates a StickyWin that optionally fades in and out, is draggable, and is resizable (requires stickyWinFx.Drag.js).
Implements drag and resize functionaity into StickyWinFx.
Base class for the Mootools Effects (Moo.Fx) library.
Contains Fx.Base and two Transitions.
Creates a div within the page with the specified contents at the location relative to the element you specify; basically an in-page popup maker.
Modify two css properties of an element based on the position of the mouse.
Makes an element resizable (by dragging) with the supplied options.
Contains Drag.Base, Element.makeResizable
A collection of transition equations for use with the Fx.Base Class.