Comments on: Useful Utility Functions in mootools http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/ Working smarter, not harder Sat, 19 Jul 2008 19:06:37 +0000 http://wordpress.org/?v=2.0.4 by: Steve http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-7652 Mon, 16 Jul 2007 12:35:12 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-7652 In prototype in the PeriodicalUpdater function, there is an option called decay that lets the call frequency "decay" if the result does not change from one call to the next. Is anyone aware whether this functionality exists in mootools Periodical? I just discovered mootools and js frameworks on the whole, and i'm keen to use mootools due to everything mentioned above... In prototype in the PeriodicalUpdater function, there is an option called decay that lets the call frequency “decay” if the result does not change from one call to the next. Is anyone aware whether this functionality exists in mootools Periodical?

I just discovered mootools and js frameworks on the whole, and i’m keen to use mootools due to everything mentioned above…

]]> by: airtonix http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-368 Sat, 07 Oct 2006 17:52:20 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-368 wow, [runs off to change pants] [looks at mate] did you see those response times? freakin awesome!!!! wow, [runs off to change pants]

[looks at mate] did you see those response times? freakin awesome!!!!

]]> by: Nigel http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-350 Wed, 04 Oct 2006 16:26:12 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-350 Cory, please keep up with the articles, I like the look of mootools as a route into learning OO JS rather than trad functional programming, but documentation is a bit thin so far so your pieces are very welcome. You obviously know what you are talking about so maybe you could explain something very simple to me (it's the abstract of OO vs the specifics of functional programming that is confusing me). If, as in one of Valerio's tutorials which I've copied some of below, a div is created which has its properties defined in a stylesheet, I can fx.Background = Class.create(); fx.Background.prototype = Object.extend(new fx.Base(), { initialize: function(el, options) { this.el = $(el); alert( ... ); this.setOptions(options); this.now = 0; }, ... ); window.onload = function() { myNewEffect = new fx.Background('examplescrolling', {duration: 500}); } I added the alert box there. I can get some properties there eg this.el.offsetHeight will return the correct value, but none of the style properties are available, eg this.el.style.top doesn't return anything. I can set style properties there but not read them (ie from the stylesheet declarations). It is such a fundamental problem I'm assuming the answer is really simple.. ;-) Cory, please keep up with the articles, I like the look of mootools as a route into learning OO JS rather than trad functional programming, but documentation is a bit thin so far so your pieces are very welcome.

You obviously know what you are talking about so maybe you could explain something very simple to me (it’s the abstract of OO vs the specifics of functional programming that is confusing me).

If, as in one of Valerio’s tutorials which I’ve copied some of below, a div is created which has its properties defined in a stylesheet, I can

fx.Background = Class.create();
fx.Background.prototype = Object.extend(new fx.Base(), {
initialize: function(el, options) {
this.el = $(el);
alert( … );
this.setOptions(options);
this.now = 0;
}, …
);

window.onload = function() {
myNewEffect = new fx.Background(’examplescrolling’, {duration: 500});
}

I added the alert box there. I can get some properties there eg this.el.offsetHeight will return the correct value, but none of the style properties are available, eg this.el.style.top doesn’t return anything. I can set style properties there but not read them (ie from the stylesheet declarations). It is such a fundamental problem I’m assuming the answer is really simple.. ;-)

]]> by: Valerio Proietti http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-212 Wed, 20 Sep 2006 14:15:05 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-212 @Yaroslaff "Inviz" Fedin: The function is now there, and its called pass. Its a shortcut to create anonymous functions that contains calls to actual functions with parameters. example: before: <code> $('myelement').onclick = function(){ $('myElement').addClassName('myClass'); }; </code> after: <code> $('myElement').onclick = $('myElement').addClassName.pass('myClass'); </code> @Yaroslaff “Inviz” Fedin: The function is now there, and its called pass. Its a shortcut to create anonymous functions that contains calls to actual functions with parameters. example:

before:

$('myelement').onclick = function(){
$('myElement').addClassName('myClass');
};

after:


$('myElement').onclick = $('myElement').addClassName.pass('myClass');

]]> by: Steffen http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-165 Fri, 15 Sep 2006 15:51:05 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-165 try this: [code] var $break = new Object(); try{ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].each( function(x){ if(x 8) throw $break; alert(x);}) }catch(e){ if(e != $break) throw e; } [/code] This alert all numbers from 5 to 8, but won't run the function for the value 10, cause using "throw $break" we've finished looping earlier... This is, what Prototype uses whenever you call .each... we may make it more readable: [code] var $break = new Object(); function break(){ throw $break; } Array.prototype.myEach = function(fn, bind){ try{ this.each(fn, bind); }catch(e){ if(e != $break) throw e; }} //and finally write: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].myEach( function(x){ if(x 8) break(); alert(x); }); [/code] Now you may use .myEach, if you need looping with break and each if you don't need to break out of a loop... try this:
[code]
var $break = new Object();
try{
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].each(
function(x){
if(x 8) throw $break;
alert(x);})
}catch(e){
if(e != $break) throw e;
}
[/code]
This alert all numbers from 5 to 8, but won’t run the function for the value 10, cause using “throw $break” we’ve finished looping earlier…
This is, what Prototype uses whenever you call .each…
we may make it more readable:
[code]
var $break = new Object();
function break(){ throw $break; }
Array.prototype.myEach = function(fn, bind){
try{ this.each(fn, bind); }catch(e){ if(e != $break) throw e; }}

//and finally write:
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].myEach(
function(x){
if(x 8) break();
alert(x);
});
[/code]
Now you may use .myEach, if you need looping with break and each if you don’t need to break out of a loop…

]]> by: Yaroslaff "Inviz" Fedin http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-150 Thu, 14 Sep 2006 22:26:46 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-150 you cant emulate break, but continue. return will act only as continue. You can set a check, but it wont be the same. you cant emulate break, but continue. return will act only as continue.
You can set a check, but it wont be the same.

]]> by: Steffen http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-149 Thu, 14 Sep 2006 22:15:35 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-149 [quote] What, you’re not using break and continue statements? They can really help you cut down on loop iterations. There is no way to use break or continue in an each loop in mootools, so keep that in mind. You’ll have to use the good old-fashioned for loop for that one. [/quote] You don't realy need to use the for loop in that case... If You wan't to "emulate" the continue statement just use "return" inside your function (since .each uses a function and not a block this feels more natural for me and using "throw $break" feels kinda stupid) If you need a break statement you can easily emulate it using try/catch like prototype does (writing an extra function to abstract the try/catch block away will be very easy) e.g. [1, 2, 3].each( function(x){ if(x == 2) return; else alert(x);}) [quote]
What, you’re not using break and continue statements? They can really help you cut down on loop iterations. There is no way to use break or continue in an each loop in mootools, so keep that in mind. You’ll have to use the good old-fashioned for loop for that one.
[/quote]
You don’t realy need to use the for loop in that case…
If You wan’t to “emulate” the continue statement just use “return” inside your function (since .each uses a function and not a block this feels more natural for me and using “throw $break” feels kinda stupid)
If you need a break statement you can easily emulate it using try/catch like prototype does (writing an extra function to abstract the try/catch block away will be very easy)
e.g.
[1, 2, 3].each(
function(x){
if(x == 2) return;
else alert(x);})

]]> by: Yaroslaff "Inviz" Fedin http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-148 Thu, 14 Sep 2006 21:53:51 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-148 Yeah, Cory, It looks like Valerio removed define method from function.js. He prolly had a good reason for this. But without eval i'd do it like this: <code> define: function(a,b,c,d,e,f,g,h,i,j) { return (function(){this(a,b,d,c,d,e,f,g,h,i,j);}); } </code> which just does dirty job for you. Yeah, Cory, It looks like Valerio removed define method from function.js. He prolly had a good reason for this. But without eval i’d do it like this:


define: function(a,b,c,d,e,f,g,h,i,j) {
return (function(){this(a,b,d,c,d,e,f,g,h,i,j);});
}

which just does dirty job for you.

]]> by: Cory Hudson http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-146 Thu, 14 Sep 2006 18:40:12 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-146 @Yaroslaff: The define function looks handy. It looks like it's for binding arguments to a function, like currying and partial application. Is this correct? I've looked through the latest mootools release and can't find the define method anywhere. Is this a feature coming soon? It would really come in handy. @Yaroslaff: The define function looks handy. It looks like it’s for binding arguments to a function, like currying and partial application. Is this correct? I’ve looked through the latest mootools release and can’t find the define method anywhere. Is this a feature coming soon? It would really come in handy.

]]> by: Yaroslaff "Inviz" Fedin http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-140 Thu, 14 Sep 2006 11:51:34 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-140 Cory, there's also a define function, that allows to use delay & function with arguments without lambda function myfunc(f) { alert(f); } myfunc.define('sup').delay(600); not sure in syntax right now. Cory, there’s also a define function, that allows to use delay & function with arguments without lambda

function myfunc(f) {
alert(f);
}
myfunc.define(’sup’).delay(600);

not sure in syntax right now.

]]> by: Bruno Figueiredo http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-138 Thu, 14 Sep 2006 09:59:38 +0000 http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/#comment-138 Nice post. Very useful. I've also posted on how to create a <a href="http://www.brunofigueiredo.com/archive/2006/09/14/88.aspx" rel="nofollow">simple lightBox example</a> using the new mooTools. Nice post. Very useful. I’ve also posted on how to create a simple lightBox example using the new mooTools.

]]>