====== StickyWin ====== [[http://www.clientcide.com/docs/UI/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: 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')});

===== StickyWin options ===== You can configure a //StickyWin// with a lot of options. I won't go through all of them here with examples (see [[http://www.clientcide.com/docs/UI/StickyWin|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 //[[02-iframeshim|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
});

==== StickyWin.show, .hide, .setContent, .win ==== 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). ===== Retrieving the class ===== You can also retrieve the instance of StickyWin from the popup div:


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