CNET JS Code Documentation

Class: 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.

Author: Aaron Newton

Implements

Syntax

new StickyWin(options);
 

Arguments

  1. options - (object) an object with key/value options

Options

  • closeClassName - (string, optional) class name of the element(s) in your popup content that, when clicked, should close the window; defaults to "closeSticky"
  • pinClassName - (string, optional) class name of the elements(s) in your popup content that, when clicked, should pin the sticky in place; defaults to "pinSticky"
  • content - (mixed) the content of your popup; this should be layout html and your message or a DOM element (or its id)
  • zIndex - (integer, optional) the zIndex of the popup; defaults to 10000 (ten thousand)
  • id - (string) the id of the wrapper div that gets created that will contain your content
  • className - (string, optional) class name for the wrapper div that gets created that will contain your content
  • position - (string) "center", "upperRight", "bottomRight", "upperLeft", "bottomLeft"; the point in the popup that is positioned; defaults to 'center'. see Element.setPostion
  • edge - (string, optional) same options as position (center, upperRight, etc.) but specifies the edge of the stickyWin to position to the point specified in position. see Element.setPostion for details; defaults to the Element.setPostion default state.
  • offset - (object) object 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.
  • relativeTo - (mixed) a DOM element to position the popup relative to; defaults to document.body (i.e. the window)
  • width - (integer, optional) width for the wrapper div for your popup
  • height - (integer, optional) height for the wrapper div for your popup
  • timeout - (integer, optional) timeout interval to hide the popup after a specified time
  • allowMultiple - (boolean, optional) allow multiple instance of StickyWin on the page; defaults to true
  • allowMultipleByClass - (boolean, optional) allow multiple popups that share the same className as specified in the className option; defaults to false
  • showNow - (boolean, optional) display the popup on instantiation; defaults to true
  • useIframeShim - (boolean, optional) use an IframeShim to mask content below the element; defaults to true
  • iframeShimSelector - (string) the css selector to find the element within your popup under which the IframeShim should be placed to obscure select lists and the like (see IframeShim)

Events

  • onDisplay - (function) callback to execute when the popup is shown
  • onClose - (function) callback to execute when the popup is closed

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
 

StickyWin Method: show

Shows the popup.

Syntax

myStickyWin.show();
 

Returns

StickyWin Method: hide

Hides the popup.

Syntax

myStickyWin.hide();
 

Returns

StickyWin Method: setContent

Sets the content of the popup.

Syntax

myStickyWin.setContent(content);
 

Arguments

  1. content - (mixed) either the html to insert as the body of the StickyWin or a DOM Element (or its id) to inject inside as the content.

Returns

StickyWin Method: position

Repositions the popup (incase it has moved or the document has been altered).

Syntax

myStickyWin.position();
 

Returns

StickyWin Method: pin

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

Syntax

myStickyWin.pin();
 

Returns

StickyWin Method: unpin

Sets the StickyWin to an absolute position. See Element.unpin.

Syntax

myStickyWin.unpin();
 

Returns

StickyWin Method: togglepin

Toggle the pinned state of the Sticky.

Syntax

myStickyWin.togglepin();
 

Returns

StickyWin Method: destroy

Destroys this instance.

Syntax

myStickyWin.destroy();
 

Native: Element

Extends the native Element object with a reference to its IframeShim instance.

Element property: shim

Syntax

myElement.retrieve('shim'); //the instance of IframeShim for the element
 

Native: Element

Extends the native Element object with a reference to its StickyWin instance.

Element property: StickyWin

Syntax

myElement.retrieve('StickyWin'); //the instance of StickyWin for the element
 

Notes

In the example myElement.retrieve('StickyWin'), myElement is the containing div, the same one as if you called $(myStickyWinInstance) or myStickyWinInstance.win. This div always has the class "StickyWinInstance". So:

var myStickyWin = new StickyWin(...);
$E('div.StickyWinInstance') == myStickyWin.win == $(myStickyWin);
myStickyWin == $E('div.StickyWinInstance').retrieve('StickyWin');