stickyWin.js

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.

Dependencies

MooMoo.js, Common.js, Utility.js, Element.js, Function.js, Dom.js, Array.js, Window.Base.js, Window.Size.js, <Events.js>
CNETelement.shortcuts.js, element.dimensions.js, element.position.js, element.pin.js, IframeShim.js

Author

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

Summary
stickyWin.jsCreates a div within the page with the specified contents at the location relative to the element you specify; basically an in-page popup maker.
StickyWinCreates a div within the page with the specified contents at the location relative to the element you specify; basically an in-page popup maker.
Properties
showShows the popup.
hideHides the popup.
setContentReplaces the content of the popup with the content passed in.
pinAffixes the stickywin to a fixed position, even if the window is scrolled.
unpinAffixes the stickywin to a fixed position, even if the window is scrolled.
togglepinToggle the pinned state of the Sticky;
destroyRemoves the popup element.
Change Log$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/stickyWin.js,v $ $Log: stickyWin.js,v $ Revision 1.24 2007/05/29 22:01:53 newtona Split element.cnet.js into seperate files; updated docs in files to note this Changed element.visible to element.isVisible (left old namespace for legacy support) Fixed Element.empty in prototype.compatibility.js Removed as many dependencies in common code to element.*.js as possible (espeically element.shortcuts.js)

StickyWin

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.

Arguments

optionsan object with key/value options

Options

onDisplayfunction to execute when the popup is shown
onClosefunction to execute when the popup is closed
closeClassNameclass name of the element(s) in your popup content that, when clicked, should close the window; defaults to “closeSticky”
pinClassNameclass name of the elements(s) in your popup content that, when clicked, should pin the sticky in place; defaults to “pinSticky”
contentthe content of your popup; this should be layout html and your message or a dom element
zIndexthe zIndex of the popup; defaults to 10000
idthe id of the wrapper div that gets created that will contain your content; defaults to ‘StickyWin’ + the date (so it’s unique)
classNameoptional class name for the wrapper dive that gets created that will contain your content
position”center”, “upperRight”, “bottomRight”, “upperLeft”, “bottomLeft”; the point in the popup that is positioned; defaults to ‘center’
edgesame options as position (center, upperRight, etc.) but specifies the edge of the stickyWin to position to the point specified in position. see Element.setPosition for details.  Optional; defaults to the Element.setPosition default state.
offsetobject containing {x: # and y: #} (integers) the top and left offset from the element in the page that the popup is relative to; this offset is applied to the center of the popup or the corner, depending on the value you specify in the ‘position’ option.
relativeToa dom element to position the popup relative to; defaults to document.body (i.e. the window)
widthan optional width for the wrapper div for your popup
heightan optional height for the wrapper div for your popup
timeout(integer) an optional timeout interval to hide the popup after a specified time
allowMultiple(boolean) allow multiple instance of StickyWin on the page; defaults to true
allowMultipleByClass(boolean) allow multiple popups that share the same className as specified in the className option; defaults to false
showNowdisplay the popup on instantiation; defaults to true
useIframeShimuse an IframeShim to mask content below the element; defaults to true.
iframeShimSelectorthe css selector to find the element within your popup under which the iframe shim should be placed to obscure select lists and the like (see IframeShim)

Example

var myWin = new StickyWin({
content: '<div id="myWin">hi there!<br><a href="javascript:void(0);" class="closeSticky">close</a></div>'
});
//popups up a box in the middle of the window with "hi there" and a close link(end)
Summary
Properties
showShows the popup.
hideHides the popup.
setContentReplaces the content of the popup with the content passed in.
pinAffixes the stickywin to a fixed position, even if the window is scrolled.
unpinAffixes the stickywin to a fixed position, even if the window is scrolled.
togglepinToggle the pinned state of the Sticky;
destroyRemoves the popup element.

Properties

show

Shows the popup.

hide

Hides the popup.

setContent

Replaces the content of the popup with the content passed in.

Arguments

htmlthe new content

pin

Affixes the stickywin to a fixed position, even if the window is scrolled.  See Element.pin.

unpin

Affixes the stickywin to a fixed position, even if the window is scrolled.  See Element.unpin.

togglepin

Toggle the pinned state of the Sticky;

destroy

Removes the popup element.

Change Log

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/stickyWin.js,v $ $Log: stickyWin.js,v $ Revision 1.24 2007/05/29 22:01:53 newtona Split element.cnet.js into seperate files; updated docs in files to note this Changed element.visible to element.isVisible (left old namespace for legacy support) Fixed Element.empty in prototype.compatibility.js Removed as many dependencies in common code to element.*.js as possible (espeically element.shortcuts.js)

Revision 1.23 2007/05/11 00:10:48 newtona syntax fix

Revision 1.22 2007/05/11 00:05:29 newtona adding clearfix css to all sticky win instances

Revision 1.21 2007/05/04 01:22:47 newtona added togglepin

Revision 1.19 2007/05/04 00:32:39 newtona stickwinHTML: added the ability for buttons to not close the sticky (className option) stickyWin: added .pin (see Element.pin.js)

Revision 1.18 2007/04/13 19:06:11 newtona dependency update in the docs

Revision 1.17 2007/03/30 19:32:20 newtona changing .flush to .empty

Revision 1.16 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.15 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.14 2007/03/23 20:19:48 newtona Iframeshim: added className; updated docs StickyWin: added edge support (see Element.setPosition)

Revision 1.13 2007/03/08 00:06:13 newtona stickyWin now empties it’s content before setContent adds new stuff

Revision 1.12 2007/02/21 00:24:56 newtona no change, but cvs says it’s different. maybe a space?

Revision 1.11 2007/02/08 22:54:00 newtona removed a comment

Revision 1.10 2007/02/08 20:50:54 newtona fixed a bug where .show repositioned the window every time

Revision 1.9 2007/02/08 01:29:51 newtona fixed syntax error

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

Revision 1.7 2007/01/26 18:24:41 newtona docs update

Revision 1.6 2007/01/26 05:49:10 newtona syntax update for mootools 1.0

Revision 1.5 2007/01/23 20:54:24 newtona a little better position handling

Revision 1.4 2007/01/22 22:00:15 newtona numerous bug fixes to modalizer, stickywin, and popupdetails updated for mootools 1.0 fixed date validation in form.validator

Revision 1.3 2007/01/19 01:22:32 newtona fixed a few syntax errors

Revision 1.2 2007/01/11 20:55:23 newtona changed the way options are set, split up stickywin into 4 files, refactored popupdetails to use stickywin and modalizer

Revision 1.1 2007/01/09 02:39:35 newtona renamed addons directory to “common” directory

Revision 1.2 2007/01/09 01:26:04 newtona docs syntax fix

Revision 1.1 2007/01/05 19:29:30 newtona first check in

My Object Oriented javascript.
Contains common implementations for custom classes.
Contains Utility functions
function $(el)
returns the element passed in with all the Element prototypes applied.
Contains useful Element prototypes, to be used with the dollar function $.
Contains Function prototypes and utility functions .
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Css Query related function and Element extensions
function $A(array,
start,
length)
returns a copy of the array.
Same as Array.copy, but as function.
function $each(iterable,
fn,
bind)
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
Contains Array prototypes, $A, $each
Contains Window.onDomReady Authors:
Window cross-browser dimensions methods.
Extends the Element object with some basic shortcuts (like .hide and .show).
Extends the Element object.
Extends the Element object.
Cross browser methods to get the window size, onDomReady method.
Extends the Mootools Window and Element classes to allow fixed positioning for an element.
Iframe shim class for hiding elements below a floating DOM element.
Sets the location of an element relative to another (defaults to the document body).
There are two types of elements that (sometimes) prohibit you from positioning a DOM element over them: some form elements and some flash elements.
Affixes an element at its current position, even if the window is scrolled.
Un-pins an element at its current position (see <Element.pin>).