StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>this is an error in binding and removeEvent.</p> <p><code>this.animate.bind(this)</code> returns a function that is NOT the same as <code>this.animate</code> which you compare against when you removeEvent.</p> <p>if you bind event callbacks that you need to remove, you should store them: <a href="http://jsfiddle.net/yLhHG/" rel="nofollow">http://jsfiddle.net/yLhHG/</a> (incomplete but it does first shrink. read more:</p> <p>basically:</p> <pre><code>this.boundEvents = { click: this.animate.bind(this) }; </code></pre> <p>...</p> <pre><code>this.dDiv.removeEvent('click', this.boundEvents.click); </code></pre> <p>or:</p> <pre><code>this.dDiv.addEvent('click', this.boundEvent = this.animate.bind(this)); </code></pre> <p>...</p> <pre><code>this.dDiv.removeEvent("click", this.boundEvent); </code></pre> <p>and finally:</p> <p>you can totally rewrite this to have a single method but pass a different object. will update it in a moment.</p> <p>there: <a href="http://jsfiddle.net/yLhHG/1/" rel="nofollow">http://jsfiddle.net/yLhHG/1/</a></p> <pre><code>var F = new Class({ Implements: [Options, Events], myFX: null, dDiv: null, options: { container: null, width: '250px', background: '#ccc', fx: { animate: { props: { height: 200, width: 500 }, html: "hello world" }, deanimate: { props: { height: 20, width: 250 }, html: "bye world" } } }, initialize: function(options) { this.setOptions(options); this.container = this.options.container || document.body; this.addDemoDiv(); }, addDemoDiv: function() { this.element = new Element('div', { 'class': 'myClass', html: 'Click me!', styles: { padding: '20px', border: '1px solid #999', width: this.options.width, background: this.options.background }, events: { click: this.animate.bind(this) }, morph: { link: "cancel", onComplete: function() { }.bind(this), onStart: function() { this.element.set("html", this.options.fx[this.action].html); }.bind(this), onCancel: function() { // } } }).inject(this.container); }, animate: function(e) { this.action = this.action == "animate" ? "deanimate" : "animate"; this.element.morph(this.options.fx[this.action].props); } }); new F({ cntainer: 'container', background: '#ddd', width: '250px' }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload