StickyWin

docs

The StickyWin class helps you create in-page popups. If you want to put a box on the page floating above your content, StickyWin just helps do that for you. Examples are always best to work with, so here you go.

First, we have to have some html to use in the popup:

<div style="border: 1px solid black;background-color: #ccc; padding: 2px; width: 200px;"> Hi. I'm a StickyWin. You can <a href="javascript:void(0);" class="closeSticky">close me</a> if you want. Or you can <a href="javascript: void(0);" class="pinSticky">pin me in place</a>. </div>

Note the class="closeSticky" in the close href. The StickyWin class will attach its close function to this anchor.

new StickyWin({content: $('stickyWinContent').get('value')});

You can configure a StickyWin with a lot of options. I won't go through all of them here with examples (see the docs for a full list), but you can define callbacks for the show and hide events, specify an id and a className for the StickyWin element (a div) into which your content will be injected, width and height and z-index for the container div (which will basically be the size of your content otherwise, unless that content has a margin set), a timeout so that your popup goes away after a specified amount of time, whether or not you want to allow more than one on the page at the same time, and if it should use an IframeShim.

In addition to all these options, you can also specify the position of the StickyWin. Examples:

new StickyWin({
  content: $('stickyWinContent').get('value'),
  relativeTo: $('fxTarget'),
  /*upper left corner of fxTarget */
  position: 'upperLeft'
});

new StickyWin({
  content: $('stickyWinContent').get('value'),
  relativeTo: $('fxTarget'),
  /*upper right corner of fxTarget */
  position: 'upperRight'
});

new StickyWin({
  content: $('stickyWinContent').get('value'),
  relativeTo: $('fxTarget'),
  /*center of fxTarget */
  position: 'center'
});

new StickyWin({
  content: $('stickyWinContent').get('value'),
  relativeTo: $('fxTarget'),
  /*upper left corner of fxTarget */
  position: 'upperLeft',
  offset: {
   x: -200, /*over to the left*/
   y: 10 /*and down a little*/
  },
  useIframeShim: false
});

Each instance of StickyWin has the methods .show(), .hide() - which do what you think they do:

myStickyWin.show(); //show the popup
myStickyWin.hide(); //hide it

...and .setContent() which will replace the content of the StickyWin with what you give it. In addition to this, .win is the dom element that contains your content. You can also retrieve it with $:

$(myStickyWin) //the div of the StickyWin container

Calling .show() on a StickyWin will re-position it relative to the element again (so if the relative element is the window and the user scrolls or resizes, you can call .show() again to replace the popup where it belongs).

You can also retrieve the instance of StickyWin from the popup div:

document.getElement('.StickyWinInstance').retrieve('StickyWin');