Stalker plugin will allow you to keep elements at a fixed position "floating" but at +* the same time, keeping those elements embeded to the layout of the page. The general idea +* is that an element can control it's own position within the layout in order to keep its +* area within the viewport boundaries. +* +*
To use the Stalker Plugin, simply pass a reference to the plugin to a
+* Node instance's plug method.
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-stalker". This will
+* // load the script for the Stalker Plugin and all of
+* // the required dependencies.
+*
+* YUI().use("gallery-stalker", function(Y) {
+*
+* Y.one('#mytarget').plug(Y.Plugin.Stalker);
+*
+* });
+*
+* </script>
+*
plug method of Node and
+ * should not be instantiated directly.
+ * @namespace Y.Plugin
+ * @class NodeStalker
+ */
+NodeStalker = function() {
+
+ NodeStalker.superclass.constructor.apply(this, arguments);
+
+};
+
+NodeStalker.NAME = "NodeStalker";
+NodeStalker.NS = STALKER;
+
+NodeStalker.ATTRS = {};
+
+Y.extend(NodeStalker, Y.Plugin.Base, {
+
+ // Protected properties
+ /**
+ * @property _root
+ * @description Node instance representing the target node to follow.
+ * @default null
+ * @protected
+ * @type Node
+ */
+ _root: null,
+ _eventHandlers: [],
+
+ // Public methods
+ initializer: function(config) {
+ var fn = Y.bind(this.refresh, this);
+ if ((this._root = this.get(HOST))) {
+
+ this._root.addClass(CLASS_STALKER);
+
+ // Wire up all event handlers
+ this._eventHandlers.push(Y.on('scroll', fn));
+ this._eventHandlers.push(Y.on('windowresize', fn));
+
+ }
+ },
+
+ destructor: function() {
+ if (this._root) {
+ this._root.removeClass(CLASS_STALKER);
+ }
+ Y.Array.each(this._eventHandlers,
+ function(handle) {
+ handle.detach();
+ });
+ },
+
+ /**
+ * @method refresh
+ * @description Refreshing the position of the element in every scroll/resize event
+ * @public
+ */
+ refresh: function() {
+ Y.log ('Refreshing the target', 'info', STALKER);
+
+ var top = Y.DOM.docScrollY(),
+ left = Y.DOM.docScrollX(),
+ n = this._root,
+ r = n.get('parentNode').getXY(),
+ c = ["marginTop", "marginLeft", "borderLeftWidth", "borderTopWidth"];
+
+ // viewport computations
+ r[1] = Math.max(0, r[1] - top);
+ r[0] = r[0] - left;
+ // node size computation
+ Y.Array.each(c,
+ function(v) {
+ r[v] = parseInt(n.getStyle(v), 10) || 0;
+ });
+ n.setStyles({
+ top: r[1] - r.borderTopWidth - r.marginTop,
+ left: r[0] - r.borderLeftWidth - r.marginLeft,
+ position: 'fixed'
+ });
+ },
+
+ // Protected methods
+ /**
+ * @method _IE6Fix
+ * @description Adding a CSS expression to workaround the lack of "position:fixed" in IE6
+ * @protected
+ * @return {boolean} whether or not is this fix needed
+ */
+ _IE6Fix: function() {
+ var targetID,
+ parentID,
+ css;
+ if (UA.ie == 6) {
+ Y.log('Appliying IE6 fix for static position.', 'info', STALKER);
+ targetID = this._root.get('id');
+ parentID = this._root.get('parentNode').get('id');
+ css = "#" + targetID + " {top:expression((ignore = document.documentElement.scrollTop>document.getElementById('" + parentID + "').offsetTop) ? document.documentElement.scrollTop : document.getElementById('" + parentID + "').offsetTop + 'px' );}";
+ // adding CSS to the page
+ Y.on('domready',
+ function(e) {
+ Y.log('Inserting IE6 fix in the page: ' + css, 'info', STALKER);
+ // TODO
+ });
+ return true;
+ }
+ }
+
+});
+
+Y.namespace('Plugin');
+
+Y.Plugin.NodeStalker = NodeStalker;
\ No newline at end of file