Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add destroy, stop, start methods

  • Loading branch information...
commit 959b89e17bd8025c4b8dd1884007edcaf4ef04be 1 parent eb4df59
@bbarakaci authored
View
45 README.md
@@ -1,10 +1,11 @@
# fixto
-A jQuery plugin for sticky positioning. Fix containers to the viewport relative to an ancestor. To see it in action you can see the [demo page][demo] or development pages [development page 1][dev1], [development page 2][dev2].
+A jQuery plugin for sticky positioning. Fix containers to the viewport relative to an ancestor. To see it in action you can see the [demo page][demo] or development pages [development page 1][dev1], [development page 2][dev2], [development page 3][dev3].
[demo]: http://bbarakaci.github.com/fixto
[dev1]: http://bbarakaci.github.com/fixto/dev1.html
[dev2]: http://bbarakaci.github.com/fixto/dev2.html
+[dev3]: http://bbarakaci.github.com/fixto/dev3.html
## Getting Started
Download the [production version][min] or the [development version][max].
@@ -38,7 +39,7 @@ Passing options
mind: '#header'
});
-Usage without jQuery. This is the only way to have a reference to the instance, as yet.
+Instantiate without jQuery:
var sticky = fixto.fixTo(domElementToFix, domElementToBeFixed, options);
@@ -68,14 +69,50 @@ Example
mind: '#header'
});
-Selector can be in any form that jQuery can handle. You can pass multiple elements.
+Selector can be in any form that jQuery can handle. You can pass multiple elements.
+
+## Public Methods
+
+Following methods can be called directly on the instance or with jQuery.
+
+### destroy
+
+Destroys the instance:
+
+ instance.destroy();
+
+jQuery:
+
+ $('#nav').fixTo('destroy');
+
+### stop
+
+Stops the instances behavior without destroying the instance.
+
+ instance.stop();
+
+jQuery:
+
+ $('#nav').fixTo('stop');
+
+### start
+
+Starts the instances behavior.
+
+ instance.start();
+
+jQuery:
+
+ $('#nav').fixTo('start');
## Features
- Responsive
+- Handles multiple instances
+- Start, stop, destroy
## Browser support
-Modern browsers, >= ie8 are supported. Touch devices are not supported.
+Modern browsers, ie8+ are supported. Touch devices are not supported.
## Known issues
View
56 dev3.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>fixto, a jQuery plugin for sticky positioning</title>
+ <script src="libs/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
+ <script src="src/fixto.js" type="text/javascript" charset="utf-8"></script>
+
+ <style>
+
+ body {
+ height: 2000px;
+ }
+
+ .sticky {
+ background-color: red;
+ }
+
+ </style>
+
+
+</head>
+<body>
+
+<div class="sticky">
+ sticky
+
+ <button class="stop">Stop</button>
+ <button class="start">Start</button>
+ <button class="destroy">Destroy</button>
+
+</div>
+
+
+
+
+
+
+<script>
+var child = $('.sticky')[0];
+var parent = $('body')[0];
+var instance = new window.fixto.FixToContainer(this.child, this.parent);
+$('.stop').click(function () {
+ instance.stop();
+});
+$('.start').click(function () {
+ instance.start();
+});
+$('.destroy').click(function () {
+ instance.destroy();
+});
+
+
+
+</script>
+</body>
+</html>
View
103 src/fixto.js
@@ -100,6 +100,17 @@ var fixto = (function ($, window, document) {
_heightOffset : function(){
return this.element.offsetHeight + 'px';
+ },
+
+ destroy: function () {
+ $(this.replacer).remove();
+
+ // set properties to null to break references
+ for (var prop in this) {
+ if (this.hasOwnProperty(prop)) {
+ this[prop] = null;
+ }
+ }
}
};
@@ -133,12 +144,24 @@ var fixto = (function ($, window, document) {
if(this.options.zIndex) {
this.child.style.zIndex = this.options.zIndex;
}
- $(window).scroll($.proxy(this._onscroll, this));
- $(this._toresize).bind('resize', $.proxy(this._onresize, this));
+
this._saveStyles();
+
+ // Create anonymous functions and keep references to register and unregister events.
+ this._proxied_onscroll = this._bind(this._onscroll, this);
+ this._proxied_onresize = this._bind(this._onresize, this);
+
+ this.start();
}
FixToContainer.prototype = {
+
+ // Returns an anonymous function that will call the given function in the given context
+ _bind : function (fn, context) {
+ return function () {
+ return fn.call(context);
+ };
+ },
// at ie8 maybe only in vm window resize event fires everytime an element is resized.
_toresize : $.browser.msie && $.browser.version === '8.0' ? document.documentElement : window,
@@ -242,7 +265,56 @@ var fixto = (function ($, window, document) {
_onresize: function () {
this._unfix();
this._onscroll();
+ },
+
+ // Public method to stop the behaviour of this instance.
+ stop: function () {
+
+ // Unfix the container immediately.
+ this._unfix();
+
+ // remove event listeners
+ $(window).unbind('scroll', this._proxied_onscroll);
+ $(this._toresize).unbind('resize', this._proxied_onresize);
+
+ this._running = false;
+ },
+
+ // Public method starts the behaviour of this instance.
+ start: function () {
+
+ // Start only if it is not running not to attach event listeners multiple times.
+ if(!this._running) {
+
+ // Trigger onscroll to have the effect immediately.
+ this._onscroll();
+
+ // Attach event listeners
+ $(window).bind('scroll', this._proxied_onscroll);
+ $(this._toresize).bind('resize', this._proxied_onresize);
+
+ this._running = true;
+ }
+ },
+
+ //Public method to destroy fixto behaviour
+ destroy: function () {
+ this.stop();
+
+ // Remove jquery data from the element
+ this._$child.removeData('fixto-instance');
+
+ // Destroy mimic node instance
+ this._replacer.destroy();
+
+ // set properties to null to break references
+ for (var prop in this) {
+ if (this.hasOwnProperty(prop)) {
+ this[prop] = null;
+ }
+ }
}
+
};
var fixTo = function fixTo(childElement, parentElement, options) {
@@ -263,11 +335,28 @@ var fixto = (function ($, window, document) {
// Let it be a jQuery Plugin
$.fn.fixTo = function (targetSelector, options) {
- var childs = this,
- targets = $(targetSelector);
- for (var i = 0, l = childs.length; i < l; i++) {
- fixTo(childs[i], targets[i], options);
- }
+
+ var $targets = $(targetSelector);
+
+ var i = 0;
+ return this.each(function () {
+
+ // Check the data of the element.
+ var instance = $(this).data('fixto-instance');
+
+ // If the element is not bound to an instance, create the instance and save it to elements data.
+ if(!instance) {
+ $(this).data('fixto-instance', fixTo(this, $targets[i], options));
+ }
+ else {
+ // If we already have the instance here, expect that targetSelector parameter will be a string
+ // equal to a public methods name. Run the method on the instance without checking if
+ // it exists or it is a public method or not. Cause nasty errors when necessary.
+ var method = targetSelector;
+ instance[method].call(instance);
+ }
+ i++;
+ });
};
/*
View
1  test/fixto.html
@@ -10,7 +10,6 @@
<script src="../libs/qunit/qunit.js"></script>
<!-- Load local lib and tests. -->
- <script src="../libs/computed-style.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/fixto.js" type="text/javascript" charset="utf-8"></script>
<script src="fixto_test.js"></script>
<!-- Removing access to jQuery and $. But it'll still be available as _$, if
View
6 test/mimic-node_test.js
@@ -46,6 +46,12 @@
this.md.hide();
equal(this.md.replacer.style.display,'none', 'hide');
});
+ test('destroy', function() {
+ var replacer = this.md.replacer;
+ this.md.destroy();
+ equal(replacer.parentNode, null);
+ equal(this.md.replacer, null);
+ });
}(window.jQuery));

0 comments on commit 959b89e

Please sign in to comment.
Something went wrong with that request. Please try again.