tag:blogger.com,1999:blog-86405969862732160892019-03-30T02:52:09.251-03:00Ariel FleslerMy jQuery plugins, and other scripts.Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.comBlogger44125Fleslerhttps://feedburner.google.comSubscribe with My Yahoo!Subscribe with NewsGatorSubscribe with My AOLSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with PageflakesSubscribe with Live.comtag:blogger.com,1999:blog-8640596986273216089.post-21721449234348350152014-07-27T15:47:00.001-03:002014-07-27T15:47:30.311-03:00This blog is oficially closed<h4>This blog is officially closed</h4><br />
It's been quite some years since I last posted on this blog. At some point the amount of daily inquires in the comments became overwhelming for the time I had available so I locked them.<br />
<br />
If someone has a doubt or an issue with a plugin I'd advice you to ask on sites like StackOverflow.<br />
If you think you found a bug or have a feature request feel free to create an issue on the appropriate project on <a href="https://github.com/flesler/">Github</a>. I try to reply fast but there's no guarantee.<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=v7WEvFCHKnQ:GQXTBMUNobc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=v7WEvFCHKnQ:GQXTBMUNobc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=v7WEvFCHKnQ:GQXTBMUNobc:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=v7WEvFCHKnQ:GQXTBMUNobc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=v7WEvFCHKnQ:GQXTBMUNobc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=v7WEvFCHKnQ:GQXTBMUNobc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=v7WEvFCHKnQ:GQXTBMUNobc:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/v7WEvFCHKnQ" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com0http://flesler.blogspot.com/2014/07/this-blog-is-oficially-closed.htmltag:blogger.com,1999:blog-8640596986273216089.post-64219717992721084952009-06-14T13:47:00.003-03:002012-09-13T12:32:01.104-03:00jQuery.SerialScroll 1.2.2 released<h4>Enhancements</h4><ul><li>Removed the check that avoids re-scrolling to the same index, this might be desirable sometimes.</li>
<li>The settings object is exposed in the onBefore as the this.</li>
</ul><h4>Links</h4><ul><li><a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">Main Post</a></li>
<li><a href="https://github.com/flesler/jquery.serialScroll" target="_blank">Github Repo</a></li>
<li><a href="http://demos.flesler.com/jquery/serialScroll/" target="_blank">Demo</a></li>
<li><a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">jQuery.ScrollTo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/" target="_blank">jQuery.ScrollTo's demo</a></li>
<li><a href="http://demos.flesler.com/jquery/serialScroll/changes.txt" target="_blank">Changelog</a></li>
</ul><h4>Downloads</h4><ul><li><a href="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.2.js">jQuery.SerialScroll 1.2.2 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.2-min.js">jQuery.SerialScroll 1.2.2 Minified</a><span class="dw-tip">(recommended)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1.js">jQuery.ScrollTo 1.4.3.1 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js">jQuery.ScrollTo 1.4.3.1 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=cA6Lu0Ywm3E:f3XING-yG-8:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=cA6Lu0Ywm3E:f3XING-yG-8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=cA6Lu0Ywm3E:f3XING-yG-8:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=cA6Lu0Ywm3E:f3XING-yG-8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=cA6Lu0Ywm3E:f3XING-yG-8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=cA6Lu0Ywm3E:f3XING-yG-8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=cA6Lu0Ywm3E:f3XING-yG-8:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/cA6Lu0Ywm3E" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com53http://flesler.blogspot.com/2009/06/jqueryserialscroll-122-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-81729663179984414892009-06-06T21:13:00.003-03:002009-06-06T21:29:27.867-03:00Moving my plugins to Google Code<h4>Google Code</h4>
<p>I decided to move my plugins from my private svn to <a href="http://code.google.com/hosting/" target="_blank">Google Code</a>. This means the code being developed is now public and can be viewed and reviewed by anyone.</p>
<p>I'm also trying to automate the building process with a makefile in order to make deploys less tedious (thus more frequent :)).</p>
<p>Everyone's invited to check the code, review it, comment and report bugs. The repository has a few plugins that I actually never released. It doesn't contain non-jQuery scripts yet. I haven't moved them yet and won't do yet.</p>
<br />
<h4>Links</h4><ul>
<li><a href="http://code.google.com/p/flesler-plugins/" target="_blank">Project Home</a></li>
<li><a href="http://code.google.com/p/flesler-plugins/source/browse/trunk" target="_blank">Trunk</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=1vU4DuwOjI0:H5NTP7Mw8mc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1vU4DuwOjI0:H5NTP7Mw8mc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1vU4DuwOjI0:H5NTP7Mw8mc:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1vU4DuwOjI0:H5NTP7Mw8mc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=1vU4DuwOjI0:H5NTP7Mw8mc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1vU4DuwOjI0:H5NTP7Mw8mc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=1vU4DuwOjI0:H5NTP7Mw8mc:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/1vU4DuwOjI0" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com1http://flesler.blogspot.com/2009/06/moving-my-plugins-to-google-code.htmltag:blogger.com,1999:blog-8640596986273216089.post-42980377414141010302009-05-30T17:19:00.009-03:002009-05-30T18:07:47.146-03:002 Ajax plugins for jQuery +1.3<h4>Introduction</h4>
<p>I never actually posted about 2 tiny plugins I made, once jQuery 1.3 was nearing.</p>
<p>Both are somehow related, they are related to Ajax (jQuery.ajax) and they provide sort of a manager to allow multiple implementations of the same feature.</p>
<p>Needless to say, both plugins only work under jQuery 1.3 or higher. The packages(zips) include jQuery 1.2.7pre because that's the version I used to test them when I made them. You obviously don't need to use that version.</p>
<br />
<h4>XHR</h4>
<p>Since jQuery 1.3. The default XHR "factory" function can be overriden by passing an 'xhr' setting to jQuery.ajax with a new function</p>
<p>This tiny plugin provides a simple registry for different xhr implementations to co-exist.</p>
<p>To provide a new implementation, you need to do something like this:
<pre class="js">
jQuery.xhr.register( <span class="string">'my_xhr'</span>, <span class="keyword">function</span>( settings ){
<span class="keyword">return new</span> MyXhrImplementation( settings );
});
</pre>
</p>
<p>The argument settings is the object passed to jQuery.ajax.</p>
<p>To use it, you do:
<pre class="js">
jQuery.ajax({
url:<span class="string">'...'</span>,
transport:<span class="string">'my_xhr'</span>,
<span class="comment">// ...</span>
});
</pre>
</p>
<p>The built-in implementation is used by default (unless it's overriden with jQuery.ajaxSetup) and it's called 'xhr'.</p>
<h5>Links & Downloads</h5><ul>
<li><a href="http://jquery.com/plugins/project/XHR" target="_blank">Project Page</a>
</li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.xhr-1.0.0.zip">jQuery.XHR 1.0.0 Zip</a></li>
</ul>
<br />
<h4>AjaxFilter</h4>
<p>This plugin lets you store multiple functions to sanitize ajax responses.</p>
<p>If you want to provide a new implementation, you need to do something like this:
<pre class="js">
jQuery.ajaxFilter.register(<span class="string">'js_in_href'</span>,<span class="string">'html'</span>,
<span class="keyword">function</span>( data ){
<span class="keyword">return</span> data.replace(<span class="regex">/href="javascript:[^"]+"/g</span>, <span class="string">''</span>);
});
</pre>
</p>
<p>or
<pre class="js">
jQuery.ajaxFilter.register(<span class="string">'eval'</span>,<span class="string">'script html json'</span>,
<span class="keyword">function</span>( data ){
<span class="keyword">return</span> data.replace(<span class="regex">/eval\(.+?\);?/g</span>, <span class="string">''</span>);
});
</pre>
</p>
<p>Arguments for jQuery.ajaxFilter.register() are:<ol>
<li>Name for the filter, used as 'filter' when calling jQuery.ajax.</li>
<li>One or more dataTypes to handle. Can be any combination of ajax, html, json and xml separated by spaces.</li>
<li>The filter function. Will receive 2 arguments: the data and the type. The 'this' will reference the settings object.</li>
</ol>
</p>
<p>To use it, you do:
<pre class="js">
jQuery.ajax({
url:<span class="string">'foo.html'</span>,
filter:<span class="string">'js_in_href'</span>,
<span class="comment">// ...</span>
});
</pre>
</p>
<p>The filter can also parse the response.<br />
That means it can (for example) provide an alternative way of eval'ing json. This is specially useful for Adobe AIR apps.
If the filter returns something else than a string, it's assumed to be the final response.</p>
<h5>Links & Downloads</h5><ul>
<li><a href="http://jquery.com/plugins/project/AjaxFilter" target="_blank">Project Page</a>
</li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.ajaxFilter-1.0.1.rar">jQuery.AjaxFilter 1.0.1 Zip</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=BGT-TsM34nU:JITyhZj2ST4:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=BGT-TsM34nU:JITyhZj2ST4:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=BGT-TsM34nU:JITyhZj2ST4:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=BGT-TsM34nU:JITyhZj2ST4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=BGT-TsM34nU:JITyhZj2ST4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=BGT-TsM34nU:JITyhZj2ST4:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=BGT-TsM34nU:JITyhZj2ST4:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/BGT-TsM34nU" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com2http://flesler.blogspot.com/2009/05/2-ajax-plugins-for-jquery-13.htmltag:blogger.com,1999:blog-8640596986273216089.post-60723232375978178652009-05-25T16:47:00.002-03:002014-04-06T23:57:35.773-03:00jQuery.ScrollTo 1.4.2 released<h4>Notice</h4>I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.<br />
<br />
<h4>Fixes</h4><ul><li>Fixing max calculations for regular DOM elements.</li>
</ul><h4>Features</h4><ul><li>The plugin support percentages as target ('50%' or {top:'50%', left:'45%'}).</li>
<li>Exposed the max() calculation as $.scrollTo.max.</li>
</ul><h4>Enhancements</h4><ul><li>Renamed $.fn.scrollable to $.fn._scrollable to avoid conflicts with other plugins.</li>
</ul><h4>Links</h4><ul><li><a href="https://github.com/flesler/jquery.scrollTo/releases" target="_blank">Downloads</a></li>
<li><a href="https://github.com/flesler/jquery.scrollTo" target="_blank">Github Repo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/" target="_blank">Demo</a></li>
<li><a href="https://github.com/flesler/jquery.scrollTo/blob/master/changes.txt" target="_blank">Changelog</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=shpe20FjN-U:WOqFvFhxiM0:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=shpe20FjN-U:WOqFvFhxiM0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=shpe20FjN-U:WOqFvFhxiM0:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=shpe20FjN-U:WOqFvFhxiM0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=shpe20FjN-U:WOqFvFhxiM0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=shpe20FjN-U:WOqFvFhxiM0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=shpe20FjN-U:WOqFvFhxiM0:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/shpe20FjN-U" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com245http://flesler.blogspot.com/2009/05/jqueryscrollto-142-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-87251078969898671682009-03-11T21:12:00.008-02:002014-04-06T23:59:31.612-03:00jQuery.LocalScroll 1.2.7 released<h4>Notice</h4>I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.<br />
<br />
In this release I cleaned up the code a little and added some features. Also removed a few old (aka deprecated) stuff that were still hanging around. <h4>Enhancements</h4><ul><li>Added some misc enhancements and cleanup the code.</li>
<li>Updated the plugin to take advantage of recent scrollTo additions.</li>
</ul><h4>Changes</h4><ul><li>The element that triggered the scroll cannot be accessed anymore from within the onBefore, you can bind your own click (or w/e) to them in order to add a class or things like that.</li>
<li>settings.persistent is no longer supported (was deprecated).</li>
</ul><h4>Features</h4><ul><li>The set of settings can be accessed from within the onBefore as the 'this'.</li>
<li>The hash (#foo) is set to the URL before scrolling, so the back button works accurately (when scrolling the window).</li>
<li>The option 'hash' doesn't make the window jump when scrolling overflown elements</li>
<li>$.localScroll.hash now resets the element scroll to (0,0) by default. You can set the setting 'reset' to false to avoid this.</li>
</ul><center>Enjoy!</center><h4>Links</h4><ul><li><a href="https://github.com/flesler/jquery.localScroll/releases" target="_blank">Downloads</a></li>
<li><a href="https://github.com/flesler/jquery.localScroll" target="_blank">Github Repo</a></li>
<li><a href="http://demos.flesler.com/jquery/localScroll/" target="_blank">Demo</a></li>
<li><a href="https://github.com/flesler/jquery.localScroll/blob/master/changes.txt" target="_blank">Changelog</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=Wq52CvVGXJI:xaIZUHwi95g:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Wq52CvVGXJI:xaIZUHwi95g:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Wq52CvVGXJI:xaIZUHwi95g:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Wq52CvVGXJI:xaIZUHwi95g:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=Wq52CvVGXJI:xaIZUHwi95g:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Wq52CvVGXJI:xaIZUHwi95g:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=Wq52CvVGXJI:xaIZUHwi95g:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/Wq52CvVGXJI" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com210http://flesler.blogspot.com/2009/03/jquerylocalscroll-127-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-33880092968467980292009-03-09T21:40:00.005-02:002014-04-06T23:53:44.340-03:00jQuery.ScrollTo 1.4.1 released<h4>Fixes</h4><ul><li>The plugin accepts floating numbers.</li>
<li>Using jQuery.nodeName where neccessary so that this works on xml+xhtml.</li>
<li>The max() internal function wasn't completely accurrate, now it is 98% (except for IE on quirks mode but it's not too noticeable).</li>
</ul><h4>Features</h4><ul><li>The target can be 'max' to scroll to the end while keeping it elegant.</li>
<li>The plugin works on quirks mode.</li>
</ul><h4>Enhancements</h4><ul><li>Default duration is 0 for jquery +1.3. Means sync animations.</li>
<li>Rewrote $.fn.scrollable() again. The plugin works on all major browsers (FF, IE, Safari, Opera, Chrome), on all versions, compat & quirks modes, even for iframes.</li>
<li>In addition to window/document, if html or body are received, the plugin will choose the right one.</li>
</ul><h4>Links</h4><ul><li><a href="https://github.com/flesler/jquery.scrollTo/releases" target="_blank">Downloads</a></li>
<li><a href="https://github.com/flesler/jquery.scrollTo" target="_blank">Github Repo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/" target="_blank">Demo</a></li>
<li><a href="https://github.com/flesler/jquery.scrollTo/blob/master/changes.txt" target="_blank">Changelog</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=9Lcd6yUIWu8:UcDrCmO5AVM:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=9Lcd6yUIWu8:UcDrCmO5AVM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=9Lcd6yUIWu8:UcDrCmO5AVM:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=9Lcd6yUIWu8:UcDrCmO5AVM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=9Lcd6yUIWu8:UcDrCmO5AVM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=9Lcd6yUIWu8:UcDrCmO5AVM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=9Lcd6yUIWu8:UcDrCmO5AVM:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/9Lcd6yUIWu8" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com11http://flesler.blogspot.com/2009/03/jqueryscrollto-141-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-42787589223048335162008-11-17T23:28:00.014-02:002009-10-28T16:44:10.629-03:00Haskell Functions for Javascript<h4>Introduction</h4>
<p>I've been doing a small <a href="http://haskell.org/" target="_blank">Haskell</a> project for the Uni and got really interested in this language and the <a href="http://en.wikipedia.org/wiki/Functional_programming" target="_blank">Functional paradigm</a> in general.</p>
<p>I suddenly felt like porting some of this cool functionality to Javascript.</p>
<h4>Currying</h4>
<p>I started by allowing functions to be <a href="http://en.wikipedia.org/wiki/Currying" target="_blank">curried</a>. <a href="http://demos.flesler.com/Curry/" target="_blank">Here's a demo</a> showing the script I made.</p>
<p>This is quite a fun way of making functions that derive from other functions.</p>
<h4>Haskell functions</h4>
<p>I then felt like porting Haskell's functions. Seemed doable considering Javascript has <a href="http://en.wikipedia.org/wiki/Higher-order_function" target="_blank">Higher Order Functions</a> and we now can curry them.</p>
<p>I ported many <a href="http://www.zvon.org/other/haskell/Outputprelude/index.html" target="_blank">Prelude's methods</a> as well as <a href="http://www.zvon.org/other/haskell/Outputchar/index.html" target="_blank">Char methods</a>.</p>
<h4>Special features</h4>
<p>Apart from currying, these functions can also work on strings, the same way as they do for lists (arrays). You don't need to worry about splitting(before) or joining(after). I added this because that's how Haskell's functions work.</p>
<p>These functions also work on maps/object/associative arrays. This might not be true for some functions where this was too complicated. This was the best adaptation of Haskell's <a href="http://en.wikipedia.org/wiki/Tuples" target="_blank">Tuples</a> that I could think of. A couple of functions like fst and snd don't have a concrete application for now.</p>
<p>In case I didn't make myself clear on this one, all the functions I made can be automatically curried. They're all contained in one namespace, that is, window.hs. I added a method called: hs.global() that will import all the functions to the global namespace. The magic currying function is available as hs.curry.</p>
<h4>Operators</h4>
<p>Haskell's operators are regular functions. I did imitate this adding most operators as methods. The only problem is that to reference them, you need to use something like hs['+'] instead of hs.+ as one would like.</p>
<p>To defeat this, I made hs a function, it provides a small shortcut for these cases. As an example: hs['+'](1,2) == hs('+',1,2).</p>
<p>I think the second option does look better. These functions can also be curried. hs._ will work the same as hs, but inverting the (2) arguments.</p>
<p>I added the dot operator for <a href="http://en.wikipedia.org/wiki/Function_composition" target="_blank">function composition</a>, it's quite a powerful function.</p>
<p>&nbsp;</p>
<p>That's it, the script is licensed under BSD, check the demo and play with it!</p>
<h4>Links</h4><ul>
<li><a href="http://demos.flesler.com/HS/" target="_blank">Demo</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/hs-1.0.0.js">HS 1.0.0</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=HlJciBqMHIY:FnDKJwwAOa0:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=HlJciBqMHIY:FnDKJwwAOa0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=HlJciBqMHIY:FnDKJwwAOa0:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=HlJciBqMHIY:FnDKJwwAOa0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=HlJciBqMHIY:FnDKJwwAOa0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=HlJciBqMHIY:FnDKJwwAOa0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=HlJciBqMHIY:FnDKJwwAOa0:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/HlJciBqMHIY" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com12http://flesler.blogspot.com/2008/11/haskell-functions-for-javascript.htmltag:blogger.com,1999:blog-8640596986273216089.post-63180368936604147672008-11-03T21:46:00.028-02:002008-11-06T11:22:07.478-02:00Fast Trim Function for Javascript<h4>Introduction</h4>
<p>Following <a href="http://blog.stevenlevithan.com/archives/faster-trim-javascript" target="_blank">Steven Levithan's old post</a> about string trimming.</p>
<p>I decided to give it another try after my <a href="http://blog.stevenlevithan.com/archives/faster-trim-javascript#comment-6808">first proposal</a>.</p>
<p>I made a trim version, based on my aforementioned first attempt. It seems to be much faster on any browser and with different (string) lengths and whitespaces.</p>
<br />
<h4>First of all...</h4>
<p>I want to make clear that this version doesn't trim the exact same characters that other versions do.</p>
<p>In my first version, I simply tried to improve Steven's version without really giving it a deep thought.</p>
<p>This time I thought:<em>Are all those characters really relevant?</em>.</p>
<p>After thinking about this for a while I decided that, whatever /\s/ matches, should be trimmed.</p>
<p>Why ? because most major js libraries use the regex version. If their users are content, then those are the needed characters. Also, if my function would actually do better than others, it could go directly to jQuery's core (there's a ticket for that).</p>
<p>So I created a <a href="http://benchmarker.flesler.com/whitespace-charcodes/run/" target="_blank">test page</a>. The results weren't equal for all browsers, IE and Safari 3 yielded far less charCodes. I decided these are the ones I want to trim.</p>
<br />
<h4>My Trim function</h4>
<p>So, the basic modification I made to my previous version, was to check whether the charCode is lower than 33 instead of the whole map/object.</p>
<p>This one takes much less code and is quite faster, I humbly named it "myBestTrim", here it is:</p>
<pre class="js" style="letter-spacing:-0.05em;">
<span class="comment">// Licensed under BSD</span>
<span class="keyword">function</span> myBestTrim( str ){
<span class="tab">&nbsp;</span><span class="keyword">var</span> start = <span class="number">-1</span>,
<span class="tab">&nbsp;</span><span class="tab">&nbsp;</span>end = str.<span class="method">length</span>;
<span class="tab">&nbsp;</span><span class="keyword">while</span>( str.<span class="method">charCodeAt</span>(--end) &lt; <span class="number">33</span> );
<span class="tab">&nbsp;</span><span class="keyword">while</span>( str.<span class="method">charCodeAt</span>(++start) &lt; <span class="number">33</span> );
<span class="tab">&nbsp;</span><span class="keyword">return</span> str.<span class="method">slice</span>( start, end + <span class="number">1</span> );
};
</pre>
<br />
<h4>The Benchmark</h4>
<p>If you want to try the benchmark, <a href="http://benchmarker.flesler.com/trim/run/">get in here</a>. The number should you care about (in my opinion) is the minimum. That's probably the one that ran a lower CPU level.</p>
<p>That test uses a string with 10K characters. Sounds like a lot but this blog's homepage has 55K of html. As oposed to a regex-based trim, this one should scale pretty well, because it doesn't need to check all the string.</p>
<p>That's actually why I removed any regex-based approach from this test, because they'd take too long.</p>
<p>If you have Firebug, I'd advice you to <strong>turn it off</strong> before getting into this test.</p>
<p>I made a <a href="http://benchmarker.flesler.com/trim(short)/run/" target="_blank">similar test</a> with small strings. It uses a string of 30 characters with 3 whitespaces on each side. In this case, the difference was smaller but still noticeable.</p>
<p>The only situation where another function was faster was on IE, with a small string WITH whitespaces. In this situation, jQuery's trim (the typical regex-based trim) was slightly faster, my trim got 2nd place.</p>
<p>Most situations don't really require much trimming and critical situations have very large strings, so I think this function scales well on those 2.</p>
<br />
<h4>Conclusion</h4>
<p>If all goes well, I'll put this function into jQuery's core. I'd like though, to get some results from other users, to verify my trim is really fast and effective.</p>
<p>Here's the ticket requesting a faster trim for jQuery: <a href="http://dev.jquery.com/ticket/2279">#2279</a>.</p>
<h5 class="setting">11/6/08</h5>
<span class="small">Removed a dispensable check, thanks Andrea Giammarchi.</span><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=Unc0xDXnNAA:xlZ3PgEdEc8:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Unc0xDXnNAA:xlZ3PgEdEc8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Unc0xDXnNAA:xlZ3PgEdEc8:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Unc0xDXnNAA:xlZ3PgEdEc8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=Unc0xDXnNAA:xlZ3PgEdEc8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Unc0xDXnNAA:xlZ3PgEdEc8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=Unc0xDXnNAA:xlZ3PgEdEc8:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/Unc0xDXnNAA" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com17http://flesler.blogspot.com/2008/11/fast-trim-function-for-javascript.htmltag:blogger.com,1999:blog-8640596986273216089.post-61620295515046096112008-09-11T00:32:00.007-03:002014-04-06T23:53:52.357-03:00jQuery.ScrollTo 1.4 released!<h4>Fixes</h4><ul><li>Fixed the problem when scrolling the window to absolute positioned elements on Safari.</li>
<li>Fixed the problem on Opera 9.5 when scrolling the window. That it always scrolls to 0.</li>
</ul><h4>Features</h4><ul><li>Added the settings object as 2nd argument to the onAfter callback.</li>
<li>The 3rd argument of scrollTo can be just a function and it's used as the onAfter.</li>
<li>Added full support for iframes (even max scroll calculation).</li>
<li>Instead of $.scrollTo, $(window).scrollTo() and $(document).scrollTo() can be used(even for iframes).</li>
<li>Added $().scrollable() that returns the real element to scroll, f.e: $(window).scrollable() == [body|html], works for iframes too.</li>
</ul><p>I rewrote the scroll limit calculations part, in order to fix the 2 bugs. If you notice any problem, please report.</p><p>This version should be perfectly compatible with the latest versions of <a target ="_blank" href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">SerialScroll</a> and <a href="http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html" target="_blank">LocalScroll</a>.</p><p>I tested this only with jQuery 1.2.6 (from trunk) but it should work well even with pretty old versions of jQuery.</p><p>Tested my demos and some iframe experiments on IE 6/7, FF 2/3, Safari 3 and Opera 9.2/5. All worked as expected. Enjoy!</p><h4>Links</h4><ul><li><a href="https://github.com/flesler/jquery.scrollTo/releases" target="_blank">Downloads</a></li>
<li><a href="https://github.com/flesler/jquery.scrollTo" target="_blank">Github Repo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/" target="_blank">Demo</a></li>
<li><a href="https://github.com/flesler/jquery.scrollTo/blob/master/changes.txt" target="_blank">Changelog</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=eARmQFUQudw:0pziZPU47gY:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=eARmQFUQudw:0pziZPU47gY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=eARmQFUQudw:0pziZPU47gY:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=eARmQFUQudw:0pziZPU47gY:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=eARmQFUQudw:0pziZPU47gY:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=eARmQFUQudw:0pziZPU47gY:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=eARmQFUQudw:0pziZPU47gY:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/eARmQFUQudw" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com115http://flesler.blogspot.com/2008/09/jqueryscrollto-14-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-7213315280766743752008-07-26T04:08:00.008-03:002008-07-28T21:29:21.904-03:00Moving demos to demos.flesler.com<h4>New host</h4>
I just wanted to point out that I'm slowly migrating the demos from freewebs.com to demos.flesler.com.<br />
I bought the domain a week ago or so, but didn't have the time to move them all.<br />
I'm also "PHPizing" them a bit, so it takes some extra time.
<br /><br />
<h4>Moved Demos</h4>
I'll update existing links on the blog and will redirect the demos from freewebs(eventually).
<br />
If you want to know which ones are ready, here's a list
<br />
<h5>jQuery Plugins</h5><ul>
<li><a href="http://demos.flesler.com/jquery/scrollTo/" target="demo">ScrollTo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/old/" target="demo">ScrollTo Old</a></li>
<li><a href="http://demos.flesler.com/jquery/localScroll/" target="demo">LocalScroll</a></li>
<li><a href="http://demos.flesler.com/jquery/localScroll/ajax/" target="demo">LocalScroll - AJAX Demo</a></li>
<li><a href="http://demos.flesler.com/jquery/serialScroll/" target="demo">SerialScroll</a></li>
<li><a href="http://demos.flesler.com/jquery/preload/link/" target="demo">Preload - Link Mode</a></li>
<li><a href="http://demos.flesler.com/jquery/preload/rollover/" target="demo">Preload - Rollover Mode</a></li>
<li><a href="http://demos.flesler.com/jquery/preload/url/" target="demo">Preload - URL Mode</a></li>
<li><a href="http://demos.flesler.com/jquery/preload/placeholder/" target="demo">Preload - Placeholder Mode</a></li>
<li><a href="http://demos.flesler.com/jquery/listen/" target="demo">Listen</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollShow/" target="demo">ScrollShow</a></li>
</ul>
<h5>Regular Scripts</h5><ul>
<li><a href="http://demos.flesler.com/jsBash/" target="demo">jsBash</a></li>
<li><a href="http://demos.flesler.com/jsDump/" target="demo">jsDump</a></li>
<li><a href="http://demos.flesler.com/Rotator/" target="demo">Rotator</a></li>
<li><a href="http://demos.flesler.com/Translator/" target="demo">Translator</a></li>
<li><a href="http://demos.flesler.com/XMLWriter/" target="demo">XMLWriter</a></li>
</ul>
<h4>What else ?</h4>
I also plan to have the blog on blog.flesler.com.<br />
I tried for 5 minutes, but something went wrong in the middle. The redirection didn't work, so I reverted. I will try soon, after I do some research.
<br /><br />
I'll try to be very careful not to break the demos while I add some more to the mix, if you see a failure please let me know. You can fall back to freewebs for now.<br />
Don't forget to update your bookmarks :D .<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=6VPNVy0GOns:v8Z8rBTAbCc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=6VPNVy0GOns:v8Z8rBTAbCc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=6VPNVy0GOns:v8Z8rBTAbCc:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=6VPNVy0GOns:v8Z8rBTAbCc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=6VPNVy0GOns:v8Z8rBTAbCc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=6VPNVy0GOns:v8Z8rBTAbCc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=6VPNVy0GOns:v8Z8rBTAbCc:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/6VPNVy0GOns" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com14http://flesler.blogspot.com/2008/07/moving-demos-to-demosfleslercom.htmltag:blogger.com,1999:blog-8640596986273216089.post-33270220290081728642008-06-17T16:57:00.012-03:002008-06-24T12:09:32.490-03:00jsClass - Object Oriented Javascript<h4>Introduction</h4>
jsClass is an extensible Javascript Base <a href="http://en.wikipedia.org/wiki/Class_(computer_science)" target="_blank">Class</a> that enables you to do clean <a href="http://en.wikipedia.org/wiki/Object-oriented_programming" target="_blank">Object Oriented Programming (OOP)</a> with Javascript.
<br /><br />
<h4>Why Object Oriented Programming ?</h4>
OOP is one of the multiple approaches you can take to structure your code.<br />
It doesn't fit any situation, it's proven to be an outstanding approach to handle large/complex applications.<br />
It will help you keep your code clear, extensible, decoupled and maintainable.<br />
For further information on OOP, just check some of the links on this article.
<br /><br />
<h4>Extensions and Design Patterns</h4>
jsClass accepts extensions, that is, custom modifications that you can attach to classes.<br />
Some are tightly related to <a href="http://en.wikipedia.org/wiki/Design_pattern_(computer_science)" target="_blank">Design Patterns</a>.<br />
These are general reusable solutions to commonly occurring problems.
<br /><br />
Each extension is very well documented on the code, specifying the different ways yo use them. Also, check the demo to see each in action.<br />
This is the list of built-in extensions:<ul>
<li>
<h5 class="setting">abstract</h5> Create <a href="http://en.wikipedia.org/wiki/Abstract_class" target="_blank">abstract classes</a> that cannot be instantiated without extending.
</li>
<li>
<h5 class="setting">extend</h5> Use <a href="http://en.wikipedia.org/wiki/Inheritance_%28object-oriented_programming%29" target="_blank">inheritance</a>, make <a href="http://en.wikipedia.org/wiki/Subclass_%28computer_science%29" target="_blank">child classes</a> extend <a href="http://en.wikipedia.org/wiki/Superclass_%28computer_science%29" target="_blank">base classes</a>.
</li>
<li>
<h5 class="setting">getset</h5> Generate getters and setters for private members of your class.
</li>
<li>
<h5 class="setting">implement</h5> Create <a href="http://en.wikipedia.org/wiki/Interface_%28computer_science%29" target="_blank">Interfaces</a> that define methods that need to be defined, in order to implement them.
</li>
<li>
<h5 class="setting">members</h5> Add <a href="http://en.wikipedia.org/wiki/Instance_method" target="_blank">members</a> to the instances of your class. It's a shortcut for SomeClass.members(...).
</li>
<li>
<h5 class="setting">module</h5> Save your class into a <a href="http://en.wikipedia.org/wiki/Modularity_(programming)" target="_blank">Module</a>. If required, all the <a href="http://en.wikipedia.org/wiki/Namespace_%28computer_science%29" target="_blank">namespace</a> is created before saving the class.
</li>
<li>
<h5 class="setting">properties</h5> Generate properties to control the access to private members of your class.
</li>
<li>
<h5 class="setting">singleton</h5> Create <a href="http://en.wikipedia.org/wiki/Singleton_pattern" target="_blank">Singleton</a> classes that can only be instantiated once.
</li>
<li>
<h5 class="setting">statics</h5> Add <a href="http://en.wikipedia.org/wiki/Static_method" target="_blank">static methods</a> or data to your class. It's a shortcut for SomeClass.statics(...).
</li>
</ul>
<h4>How to use ?</h4>
The best way is to see it in action. Check the demo (link below) to see different uses of jsClass and its extensions.
<br /><br />
<h4>Links</h4><ul>
<li><a href="http://sourceforge.net/projects/jsclass/" target="_blank">Project Page</a></li>
<li><a href="http://jsclass.sourceforge.net/demo/" target="_blank">Demo</a></li>
<li><a href="http://jsclass.sourceforge.net/CHANGELOG.txt" target="_blank">Changelog</a></li>
<li><a href="http://jsclass.sourceforge.net/LICENSE.txt" target="_blank">License(BSD)</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=dThRhAk7b2E:U6kGxTEifPc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=dThRhAk7b2E:U6kGxTEifPc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=dThRhAk7b2E:U6kGxTEifPc:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=dThRhAk7b2E:U6kGxTEifPc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=dThRhAk7b2E:U6kGxTEifPc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=dThRhAk7b2E:U6kGxTEifPc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=dThRhAk7b2E:U6kGxTEifPc:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/dThRhAk7b2E" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com9http://flesler.blogspot.com/2008/06/jsclass.htmltag:blogger.com,1999:blog-8640596986273216089.post-9100020531465430152008-06-09T11:08:00.005-03:002008-06-10T17:35:18.710-03:00jQuery is on fire!The jQuery team and the UI team have been working very hard lately to bring you these new outstanding releases.
<br /><br />
<h4>jQuery 1.2.6</h4>
This release adds a ton of outstanding changes.<ul>
<li>Many many incredible speed improvements.</li>
<li>A bunch of improvements to existing methods.</li>
<li>A complete rewriting of the .attr() method, making it much more versatile and useful.</li>
<li><a href="http://brandonaaron.net/docs/dimensions/" target="_blank">Dimensions</a>, by <a href="http://brandonaaron.net/" target="_blank">Brandon Aaron</a> has been included into the core.</li>
<li><strong>Me</strong>!</li>
</ul>
Go see the official <a href="http://jquery.com/blog/2008/06/04/jquery-126-events-100-faster/" target="_blank">Blog post</a> to see them all.
<br /><br />
<h4>jQuery UI 1.5</h4>
The excellent <a href="http://ui.jquery.com/" target="_blank">jQuery UI</a> Module got a new release.<br />
It brings a ton of features and improvements, as well as a standarized API to manipulate all the widgets.<br />
Go check their official <a href="http://jquery.com/blog/2008/06/09/jquery-ui-v15-released-focus-on-consistent-api-and-effects/" target="_blank">Blog Post</a> to learn all about it!
<br /><br />
<h5>UI Enchant</h5>
UI has a set of +15 effects to be used along with the jQuery animations.
<br /><br />
<h5>ThemeRoller</h5>
This widget, provided by the <a href="http://www.filamentgroup.com/" target="_blank">Filament Group</a>, allows you to fine tune all your UI components and achieve a unique look for your work.<br />
To read more about it, check the <a href="http://ui.jquery.com/themeroller" target="_blank">ThemeRoller Documentation</a>.<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=Gr7KEx1IzIQ:mRVWQdFXzEA:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Gr7KEx1IzIQ:mRVWQdFXzEA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Gr7KEx1IzIQ:mRVWQdFXzEA:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Gr7KEx1IzIQ:mRVWQdFXzEA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=Gr7KEx1IzIQ:mRVWQdFXzEA:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=Gr7KEx1IzIQ:mRVWQdFXzEA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=Gr7KEx1IzIQ:mRVWQdFXzEA:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/Gr7KEx1IzIQ" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com4http://flesler.blogspot.com/2008/06/jquery-is-on-fire.htmltag:blogger.com,1999:blog-8640596986273216089.post-57724418746298236782008-05-15T15:55:00.006-03:002008-05-15T16:39:51.618-03:00jsDump - Pretty dump of any Javascript data<h4>Introduction</h4>
This script can dump any type of Javascript data (or most), thus, generating a string out of the received information.<br />
It's specially useful when creating some kind of console or logger.<br />
Also, it can be used for the development stage, when you need to inspect things on browsers that lack a good console.
<br /><br />
<h4>How to use</h4>
Very simple:
<pre class="js">
<span class="keyword">var</span> dumped = jsDump.<span class="method">parse</span>( <span class="comment">...</span> );
</pre>
Instead of '...', you need to put the data that you want to dump.<br />
That could be an array, a date, the document, an array of arrays, etc.<br />
The variable 'dumped' will now contain a string with the dumped version of your data.
<br /><br />
<h4>Settings</h4>
These are the things you can configure:<ul>
<li><h5 class="setting">HTML</h5> (boolean) If true, the data will be escaped for html output, the default setting is <em>false</em>.<br />
Note that the script won't escape <strong>all</strong> the text, only the parts added by the script (indentation, new lines, dumped nodes), it won't alter original strings, etc.
</li>
<li><h5 class="setting">indentChar</h5> (string) This is the unit of indentation, by default it is 4 whitespaces.<br />
Keep this agnostic from the HTML mode, it will escape spaces and tabs by itself.
</li>
<li><h5 class="setting">multiline</h5> (boolean) Whether to generate multiline code. The default is true. This is specially relevant when dumping collections.
</li>
<li><h5 class="setting">DOMAttrs</h5> (Object) This contains a map of attributes, that need to be dumped from HTML nodes.<br />
The keys must be the names to be showed. The values, the real name of the attribute contained in the node.<br />
By default, 'id', 'name' and 'class' are dumped (only if not empty).
</li>
</ul>
To modify these settings, just do (f.e):
<pre class="js">
jsDump.<span class="method">HTML</span> = <span class="keyword">true</span>;
</pre>
This needs to be done before calling .parse().
<br /><br />
<h4>More methods</h4>
jsDump also contains a method, jsDump.typeOf, that is used internally to sniff the type of what you send.<br />
You can use this function for your own code, it'll make an advanced typeof.<br />
To modify the way a certain kind of data is dumped, you must set that using the method 'setParser'.<br />
The 'parser' can be a string, or a function. Use a string if the output is always the same, otherwise, use a function. It will receive the object as argument and must return the parsed string.
<br /><br />
You use it like this:(f.e)
<pre class="js">
jsDump.<span class="method">setParser</span>( <span class="string">'number'</span>, <span class="string">'[number]'</span> );
jsDump.<span class="method">setParser</span>( <span class="string">'date'</span>, <span class="keyword">function</span>( date ){
<span class="tab" /><span class="keyword">return</span> date.<span class="method">toUTCString</span>();
});
</pre>
To see all the data types, check the source, no gain on listing them all here.<br />
Lastly, you can create your custom types, by just adding them to the list, then, inside a parser function, you can call the method .parse() and pass, as second argument, the custom data type.<br />
This will force the script to use that type, instead of sniffing it from the data.
<h4>Links</h4><ul>
<li><a href="http://flesler.webs.com/jsDump/" target="_blank">Demo</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/jsDump-1.0.0.zip">jsDump 1.0.0 Code and demo</a></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jsDump-1.0.0.js">jsDump 1.0.0 Source</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=TA_YZqdQEZ8:p7yi3SW_9ek:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=TA_YZqdQEZ8:p7yi3SW_9ek:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=TA_YZqdQEZ8:p7yi3SW_9ek:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=TA_YZqdQEZ8:p7yi3SW_9ek:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=TA_YZqdQEZ8:p7yi3SW_9ek:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=TA_YZqdQEZ8:p7yi3SW_9ek:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=TA_YZqdQEZ8:p7yi3SW_9ek:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/TA_YZqdQEZ8" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com13http://flesler.blogspot.com/2008/05/jsdump-pretty-dump-of-any-javascript.htmltag:blogger.com,1999:blog-8640596986273216089.post-35038115895540118932008-05-07T19:50:00.010-03:002008-10-06T22:58:03.414-03:00Textnode translator for Javascript<h4>Introduction</h4>
This is a generic JS Class, that allows you to translate(parse) the content of text nodes, and replace them for the new content.<br />
You only need to specify the parsing function, and the starting (root) node.<br />
All the text nodes inside it, will get parsed.
<br /><br />
<h4>Modes</h4>
The class supports synchronous and asynchronous parsing.<br />
The parsing function will receive the original text as first argument.<br />
If you can parse the text right away, then just return it from the parsing function.<br />
If it needs to be delayed (f.e: AJAX request), then the set the attribute 'sync' of the instance, to false. By doing this, you will get a second argument in the parsing function, which will be a function that you need to call, passing it the parsed text.
<br /><br />
<h4>Returned data</h4>
The parsed data you return can be:<ul>
<li><h5 class="setting">a string</h5> This is the standard, a string replacing the old one.
</li>
<li><h5 class="setting">nothing</h5><span class="new">new</span> If you don't return data, or the same string, it will just get skipped.
</li>
<li><h5 class="setting">a node</h5><span class="new">new</span> You can return an html node.
</li>
<li><h5 class="setting">an array</h5><span class="new">new</span> You can return an array with nodes and/or strings.
</li>
</ul>
<h4>Filtering<span class="new">new</span></h4>
Optionally, you can pass the translator, a filtering function. This way you can exclude elements (and their descendants) from the parsing.<br />
To use it, pass the function as second argument to the constructor.<br />
It will receive the (element) node, and it must return true or false.
<br /><br />
<h4>How to use</h4>
Check the demo to see both modes and filtering in action.<br />
You need to call the method 'traverse' of the instance, passing it the root node.<br />
Remember to call the method after the html document is parsed, so you can access all the nodes in it.
<h4>Links</h4><ul>
<li><a href="http://demos.flesler.com/Translator/" target="_blank">Demo</a></li>
<li><a href="http://demos.flesler.com/Translator/changes.txt" target="_blank">Changelog</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/Translator-1.0.1.zip">Translator 1.0.1 Zip</a><span class="dw-tip">(all files and docs)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/Translator-1.0.1.js">Translator 1.0.1 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/Translator-1.0.1-min.js">Translator 1.0.1 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul>
<h5 class="setting">Update 5/26/08</h5>
<span class="small">Added 1.0.1, updated the docs and demo.</span><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=1cxPb8tKpb8:Q4yDc7t0VJI:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1cxPb8tKpb8:Q4yDc7t0VJI:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1cxPb8tKpb8:Q4yDc7t0VJI:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1cxPb8tKpb8:Q4yDc7t0VJI:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=1cxPb8tKpb8:Q4yDc7t0VJI:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=1cxPb8tKpb8:Q4yDc7t0VJI:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=1cxPb8tKpb8:Q4yDc7t0VJI:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/1cxPb8tKpb8" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com14http://flesler.blogspot.com/2008/05/textnode-translator-for-javascript.htmltag:blogger.com,1999:blog-8640596986273216089.post-68264796115327614062008-04-28T19:31:00.014-03:002008-08-06T12:48:45.855-03:00Doctorate on jQuery.SerialScroll<h4>Introduction</h4>
After replying to a large amount of <a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html#comments" target="_blank">comments</a> and emails about <a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html" target="_blank">jQuery.SerialScroll</a>, I decided to comment some more about this plugin, also to publish some snippets, to achieve commonly desired effects or behaviors.<br />
This should save you (and me :)) some time. It might also show you some additions, that you haven't considered.<br />
I'll also try to show some more model calls to the plugin, so you can unattach yourself from those in the demo.
<br /><br />
<h4>A little bit of theory</h4>
Before the snippets, I'll go through the basics, to refresh your mind.<br />
<h5>Calls to the plugin</h5>
It can be done on two different kind of elements<ul>
<li><strong>Element to be scrolled:</strong> This is what you normally do when you want one single instance of SerialScroll in a page.
<pre class="js">
<span class="keyword">$</span>(<span class="string">'#pane'</span>).serialScroll({
<span class="tab" /><span class="comment">//...</span>
});
</pre>
</li>
<li><strong>Container:</strong> You might want to create many "SerialScrolls" in the page, you don't need to call it many times, just put the option 'target' to work.
<pre class="js">
<span class="keyword">$</span>(<span class="string">'div.container'</span>).serialScroll({
<span class="tab" /><span class="comment">//...</span>
<span class="tab" />target:<span class="string">'div.pane'</span>,
<span class="tab" /><span class="comment">//...</span>
});
</pre>
This will allow you to have many divs with class container, which contain a scrollable div with class pane. <strong>They don't need to be divs</strong>.<br />
When doing this, the selectos for the arrows also become relative to the container, instead of absolute.
</li>
<li><strong>Global call:</strong> If by chance, you want to scroll the window, you'll need to use this approach.<br />
<pre class="js">
<span class="keyword">$</span>.serialScroll({
<span class="tab" /><span class="comment">//...</span>
});
</pre>
If, for some reason, you need to retrieve this implicit element, call:
<pre class="js"><span class="keyword">$</span>.scrollTo.window();</pre>
This will return you the element, don't use window or document.
</li>
</ul>
<h5>onBefore</h5>
This setting, which is a callback, will empower some snippets, so you better learn about it.
<pre class="js">
<span class="keyword">$</span>(<span class="string">'div.container'</span>).serialScroll({
<span class="tab" /><span class="comment">//...</span>
<span class="tab" />onBefore:<span class="keyword">function</span>( e, elem, $pane, $items, pos ){
<span class="tab" /><span class="tab" /><span class="comment">//...</span>
<span class="tab" />},
<span class="tab" /><span class="comment">//...</span>
});
</pre>
Note that:<ul>
<li>The 'this' is the element that triggered the event.</li>
<li>e is the event object.</li>
<li>elem is the element we'll be scrolling to.</li>
<li>$pane is the element being scrolled.</li>
<li>$items is the items collection at this moment.</li>
<li>pos is the position of elem in the collection.</li>
<li>if it returns false, the event will be ignored.</li>
<li>Those arguments with $ are jqueryfied.</li>
</ul>
The onAfter, only receives 'elem' as the first argument, and the 'this' is the element being scrolled ($pane but not jqueryfied).
<h4>The snippets</h4>
Now, what you really want, the code required to do all those fancy things, that the plugin doesn't do natively.<br />
One note, all the snippets are wrapped with a document ready and they use symbolic ids. Needless to say, you don't need to copy the ids, or even USE ids.<br />
Only the relevant settings are specified, so you will see "..." reminding that it's incomplete code.<br />
You configure the selectors and the rest of the settings, according to your needs.
<br /><br />
<ul>
<li>Use constant auto-scrolling. <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_constant-scrolling.js" rel="nofollow">get</a><span class="new">new</span></li>
<li>Hide the arrows when the limits are met. <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_hide-arrows.js" rel="nofollow">get</a></li>
<li>Stop the auto scrolling on hover. <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_stop-on-hover-2.js" rel="nofollow">get</a></li>
<li>Scroll from right to left (or bottom to top). <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_right-to-left.js" rel="nofollow">get</a></li>
<li>Manipulate the widget using the keyboard. <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_use-the-arrows.js" rel="nofollow">get</a></li>
<li>Generate a pager based on the items. <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_paginator.js" rel="nofollow">get</a></li>
</ul>
<br />
<h4>Concluding</h4>
I hope this helped and saved you some time, I also hope you learnt something new.<br />
I plan to add more snippets as they come up from requests.<br />
If you have any doubt, don't hesitate to ask.
<br /><br />
<h5 class="setting">Update 6/25/08</h5>
<span class="small">Added the constant scrolling snippet</span><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=xxYf0_YJqnA:UU5DrCzwmjc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=xxYf0_YJqnA:UU5DrCzwmjc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=xxYf0_YJqnA:UU5DrCzwmjc:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=xxYf0_YJqnA:UU5DrCzwmjc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=xxYf0_YJqnA:UU5DrCzwmjc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=xxYf0_YJqnA:UU5DrCzwmjc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=xxYf0_YJqnA:UU5DrCzwmjc:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/xxYf0_YJqnA" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com226http://flesler.blogspot.com/2008/04/doctorate-on-jqueryserialscroll.htmltag:blogger.com,1999:blog-8640596986273216089.post-55379028631261115622008-04-17T23:07:00.018-03:002008-06-10T17:35:18.710-03:00jQuery.Modularize<h4>Introduction</h4>
This small plugin(<strong>673 bytes!</strong>) enables you to have modular methods on jQuery.<br />
It allows the developer to apply the module pattern, to the functions of jQuery.fn.<br />
They can be used as namespace/module for more functions.<br />
This helps keeping the rule of only claiming one name from the jQuery namespace.
<br /><br />
<h4>Example</h4>
It takes a module declared like this:
<pre class="js">
<span class="keyword">$</span>.fn.foo = <span class="keyword">function</span>(){ ... };
<span class="keyword">$</span>.fn.foo.bar = <span class="keyword">function</span>(){ ... };
<span class="keyword">$</span>.fn.foo.baz = <span class="keyword">function</span>(){ ... };
</pre>
And enables you to use it like this:
<pre class="js">
<span class="keyword">$</span>(...).foo().bar( ... );
<span class="keyword">$</span>(...).foo( .... );
<span class="keyword">$</span>(...).foo().baz( ... ).foo().bar( ... ).foo( ... );
</pre>
As showed above, the method that acts as module, can also be used as function.<br />
To avoid using it as module, the function must receive arguments.
<br /><br />
<h4>How to use</h4>
<h5>Basic call</h5>
<pre class="js"><span class="keyword">$</span>.modularize( <span class="string">'foo'</span> );</pre>
If $.fn.foo already exists, it will be used when $(...).foo(...) is called with arguments.<br />
If $(...).foo(...) won't be used as method, then you don't need to declare it, just call the plugin before adding the sub-functions.
<br /><br />
<h5>Providing a default method</h5>
<pre class="js"><span class="keyword">$</span>.modularize( <span class="string">'foo'</span>, <span class="keyword">function</span>(){ ... } );</pre>
The given function will be used when $(...).foo(...) is called with arguments.<br />
This is a shortcut for declaring it, and then calling the plugin.
<br /><br />
<h5>Nested calls</h5>
<pre class="js"><span class="keyword">$</span>.modularize( <span class="string">'baz'</span>, <span class="keyword">null</span>, <span class="keyword">$.</span>fn.foo );</pre>
This allows: <pre class="js"><span class="keyword">$</span>(...).foo().baz().foobar( ... )</pre>
Instead of null, you could send the default method.<br />
Before doing this call, make sure you created $.fn.foo.
<br /><br />
<h5>Miscellaneous</h5>
The 'this' (scope) of the methods, will always be pointing to the calling jQuery object, $(...).<br />
The methods will be gathered on the first call to the function.<br />
Thus, you can "modularize" before adding the sub-methods to the module, or after, it doesn't matter.
<br /><br />
If you need to call the module and then add methods, or you just want the methods to be gathered each time, set <pre class="js"><span class="keyword">$</span>.fn.foo.lazy = <span class="keyword">true</span>;</pre>
You can set this to true, call the methods, and then reset to false.
<br /><br />
<h4>Links</h4><ul>
<li><a href="http://jquery.com/plugins/project/Modularize" target="_blank">Project Page</a></li>
<li><a href="http://flesler.webs.com/jQuery.Modularize/" target="_blank">Demo</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.modularize-1.0.0.zip">jQuery.Modularize 1.0.0 Zip</a><span class="dw-tip">(all files and docs)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.modularize-1.0.0.js">jQuery.Modularize 1.0.0 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.modularize-1.0.0-min.js">jQuery.Modularize 1.0.0 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=yGIBekG5xIo:JePbq4CT4MQ:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=yGIBekG5xIo:JePbq4CT4MQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=yGIBekG5xIo:JePbq4CT4MQ:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=yGIBekG5xIo:JePbq4CT4MQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=yGIBekG5xIo:JePbq4CT4MQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=yGIBekG5xIo:JePbq4CT4MQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=yGIBekG5xIo:JePbq4CT4MQ:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/yGIBekG5xIo" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com4http://flesler.blogspot.com/2008/04/jquerymodularize.htmltag:blogger.com,1999:blog-8640596986273216089.post-77257877246067791502008-04-07T15:30:00.025-03:002008-04-15T19:38:04.411-03:00Benchmarking Javascript variables and function scopes<h4>Introduction</h4>
The other day, I was doing a quick <a href="http://plugins.jquery.com/project/Template" target="_blank">templating plugin</a> for <a href="http://jquery.com" target="_blank">jQuery</a>. It would split long strings into arrays of tokens, and then parse these, based on a map(associative array) of handlers for the different "commands" in the tokens.
<br /><br />
<h4>The Background</h4>
The thing is, that the <a href="http://en.wikipedia.org/wiki/Tokenization" target="_blank">tokenization</a> was done on the first call, and only the actual parsing was executed each time the template was applied.<br />
Surprisingly, the parsing function of the plugin was always taking around 2.5 seconds!<br />
This was a recursive function, called around 10 times. It had a short loop of 3-4 iterations per call.<br />
This shouldn't be SUCH a heavy task, certainly not enough to take that long.<br />
I was really confused so I started experimenting.
<br /><br />
<h4>The Situation</h4>
There were 3 types of tokens in the template:<ul>
<li>Tokens that open/start a block, f.e: &lt;?if $foo?&gt;.</li>
<li>Tokens that close/end a block, f.e: &lt;/if?&gt;.</li>
<li>Tokens that are their own block, f.e: &lt;?elseif $bar/&gt;.</li>
</ul>
I called this, the <em>mode</em> of the token. So I had 3 symbolic constants declared. All the code was wrapped with a self-executing function, to create a local context. It looked like this:
<pre class="js">
(<span class="keyword">function</span>( $ ){
<span class="keyword">var</span>
OPEN = <span class="number">1</span>,
CLOSE = <span class="number">2</span>,
CLOSED = <span class="number">3</span>;
<span class="comment">/* the rest of the code */</span>
})( jQuery );
</pre>
These constants, were compared to a 'mode' attribute of the token. This caused 1 reference to each of them, on every loop in the parse function.
<br /><br />
<h4>A Small Change</h4>
I tried tried any possible optimization, but <a href="http://www.getfirebug.com/" target="_blank">Firebug</a>'s stopwatch was stuck at 2500ms.<br />
I was nearly desperate, so I started changing things at random.<br />
One of those changes, was modifying the way I was saving the mode of a token. Instead of storing the integer in a 'mode' attribute of the token, I used 'open','close' and 'closed' as boolean attributes.
<br /><br />
There's no way to describe my happiness, when Firebug's stopwatch showed <strong>~230ms</strong> instead of <strong>~2500ms</strong>.<br />
I must say I was really surprised and confused, this was such a small change, and one that I'd never had guessed.<br />
After this, I decided to clear my doubts with a consistent benchmark.
<br /><br />
<h4>The Benchmark</h4>
The first thing I did, was to make my <em>"own Firebug"</em>. I created a script with a stopwatch, a logging method and an easy way to benchmark many sequential calls to a function, with many attempts, generating an average and finding the lowest.<br />
After that, I set up the environment. Declared a global variable, and a function similar to the one showed above. Then nested another equal function inside it, and nested another one inside the latter.<br />
In the end, it looked like this:
<pre class="js">
<span class="keyword">var</span> global = <span class="number">1</span>;
(<span class="keyword">function</span>(){
<span class="keyword">var</span> local1 = <span class="number">1</span>;
(<span class="keyword">function</span>(){
<span class="keyword">var</span> local2 = <span class="number">1</span>;
(<span class="keyword">function</span>(){
<span class="keyword">var</span> local3 = <span class="number">1</span>;
<span class="comment">/* here I executed the benchmark */</span>
})();
})();
})();
</pre>
This created 4 variables, 1 global, and 3 local. All of them could be accessed from where the benchmark was being ran, but they belonged to different scope chains.
I benchmarked 4 functions, each of them accessed one of these variables 400,000 times with a loop.<br />
Each benchmark was tested 5 times, in order to find an average and the minimum. The latter should be the one that really matters. I tested on all 4 major browsers, on my Windows XP.
<br /><br />
<h4>The Results</h4>
The numbers were surprising, but not in all browsers. Opera 9 seemed to be really indifferent to the scope chain, all took the same time. Firefox 2 was really the slowest. Safari 3 and IE6 were in the middle.<br />
These are the numbers, I'll only mention the lowest from the 5 attempts.
<pre class="js">
<h5 class="setting">Firefox 2</h5>
* global: 969ms
* local1: 672ms
* local2: 359ms
* local3: 78ms
<h5 class="setting">IE 6(=7)</h5>
* global: 187ms
* local1: 171ms
* local2: 125ms
* local3: 94ms
<h5 class="setting">Safari 3</h5>
* global: 125ms
* local1: 93ms
* local2: 78ms
* local3: 62ms
<h5 class="setting">Firefox 3 beta 5</h5>
* global: 41ms
* local1: 48ms
* local2: 48ms
* local3: 37ms
<h5 class="setting">Opera 9</h5>
* global: 31ms
* local1: 31ms
* local2: 31ms
* local3: 31ms
</pre>
Opera is the clear champion, for some reason, the scope doesn't affect the timing at all.<br />
It does affect the rest of the browsers. It will be specially noticeable in Firefox. Note that Firebug was turned off while benchmarking Firefox, it did affect the perfomance but not THAT much.<br />
<strong>UPDATE:</strong>Added IE7 and Firefox 3 beta, congratz Mozilla, much better!
<br /><br />
<h4>The Conclusions</h4>
<h5>Referencing might take time.</h5>
Using variables that were declared on different scope chains, takes longer than those that are local to the executing function.<br />
If you are going to use one very often inside a deeply nested function, you should save it in a local variable first.<br />
One common situation is when using the global variables <em>window</em> and <em>document</em>.<br/>
<h5>It does matter, but it's not always crucial.</h5>
Although it does make a difference, you shouldn't become paranoid about this.<br />
These numbers were produced by 400,000 iterations. You probably don't access a variable that many times. Optimizing won't yield a noticeable improvement most of the time.<br />
There are some situations where you should be careful though<ul>
<li>Within loops, if you have a long loop, caching the variable could improve the perfomance greatly.</li>
<li>Inside frequently called functions. This is similar to loops.</li>
<li>Inside functions, that are deeply nested inside others. If these reference a distant variable, many times, it could hit on perfomance too.</li>
</ul>
<h5>Benchmarking is fun!</h5>
I always love running benchmarks, feel free to try this yourself. You'll find the link below.<br />
The tool used for the benchmark (benchmark.js) can be taken for your own experiments.<br />
If you try other browsers/OS, feel free to post the results, I'll include them so others can see.
<br /><br />
I tried to find links about this, but none showed up. I'll update if I get to find any. Same for you, reader. If you can find articles about this, I'll add the links to this post.
<br /><br />
Thanks for reading.
<br /><br />
<h4>Links</h4><ul>
<li><a href="http://flesler.webs.com/Benchmark/vars/" target="_blank">Benchmark</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/variables-benchmark.zip">Benchmark files and demo</a></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=S2D0CgxHFeI:2wwzxhGnLdw:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=S2D0CgxHFeI:2wwzxhGnLdw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=S2D0CgxHFeI:2wwzxhGnLdw:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=S2D0CgxHFeI:2wwzxhGnLdw:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=S2D0CgxHFeI:2wwzxhGnLdw:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=S2D0CgxHFeI:2wwzxhGnLdw:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=S2D0CgxHFeI:2wwzxhGnLdw:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/S2D0CgxHFeI" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com12http://flesler.blogspot.com/2008/04/benchmarking-javascript-variables-and.htmltag:blogger.com,1999:blog-8640596986273216089.post-62504584538196285422008-04-05T05:12:00.008-03:002008-06-10T17:35:18.711-03:00jQuery.FastTrigger<h4>What is it</h4>
This small plugin includes a clean and simplified version of jQuery.trigger, that will perform better and will specially scale better.
<h4>How is this achieved</h4>
Many useless steps are skipped when programatically triggering an event, this step that jQuery does no matter what, are not really necessary for triggered events, and some of them hit on perfomance badly. Most of them are not optimized for speed and scalability, but for reusability and code size.
<h4>Differences with trigger</h4>
This method supports array of data (can include an event object), namespaced events and exclusive triggering. The only known difference with jQuery.trigger is that this method doesn't trigger native handlers, so it's actually comparable to .triggerHandler().
<h4>Perfomance</h4>
This is method is <u>at least</u> <strong>4 times faster</strong> than the regular trigger, and <u>will scale much better</u> as you call it more elements at once.
<h4>Global triggering</h4>
The equivalent for jQuery.event.trigger, is $.fastTrigger it accepts the same arguments as its prototype's counter-part, but triggers the event on <b>all</b> the elements in the page.
This is a dangerous method to use, as it may hang the browser if the page has many elements, using $.fastTrigger won't solve the problem, but will surely perform better.
This case should show off the previously mentioned (improved) scalability.
<h4>A few examples</h4>
<pre class="js">
<span class="keyword">$</span>(<span class="string">'ul li'</span>).fastTrigger(<span class="string">'mouseover'</span>);<span class="comment">//regular</span>
<span class="keyword">$</span>(<span class="string">'h1'</span>).fastTrigger(<span class="string">'click.foo'</span>);<span class="comment">//with namespace</span>
<span class="keyword">$</span>(<span class="string">'li p'</span>).fastTrigger(<span class="string">'focus!'</span>);<span class="comment">//exclusive</span>
<span class="keyword">$</span>(<span class="string">'ul.list'</span>).fastTrigger(<span class="string">'collapse'</span>);<span class="comment">//custom event</span>
<span class="keyword">$</span>(<span class="string">'#bar'</span>).fastTrigger(<span class="string">'click'</span>, [<span class="string">'foo'</span>]);<span class="comment">//data array</span>
<span class="keyword">$</span>.fastTrigger(<span class="string">'keypress'</span>);<span class="comment">//global triggering</span>
<span class="keyword">$</span>(<span class="string">'a'</span>).fastTrigger(<span class="string">'blur'</span>,[obj]]);<span class="comment">//your event object</span>
</pre>
<h4>Links</h4><ul>
<li><a href="http://jquery.com/plugins/project/FastTrigger" target="_blank">Project Page</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.fastTrigger-1.0.0.zip">jQuery.FastTrigger 1.0.0 Zip</a><span class="dw-tip">(all files and docs)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.fastTrigger-1.0.0.js">jQuery.FastTrigger 1.0.0 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.fastTrigger-1.0.0-min.js">jQuery.FastTrigger 1.0.0 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=W10kChbCN40:6IsBarf4zVU:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=W10kChbCN40:6IsBarf4zVU:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=W10kChbCN40:6IsBarf4zVU:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=W10kChbCN40:6IsBarf4zVU:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=W10kChbCN40:6IsBarf4zVU:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=W10kChbCN40:6IsBarf4zVU:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=W10kChbCN40:6IsBarf4zVU:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/W10kChbCN40" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com2http://flesler.blogspot.com/2008/04/jqueryfasttrigger.htmltag:blogger.com,1999:blog-8640596986273216089.post-61209956342516687652008-03-29T19:53:00.031-03:002008-11-19T19:37:16.951-02:00String Tokenizer for Javascript<h4>Introduction</h4>
This small class can easily parse a string, and generate different kind of tokens. It's very simple and straight-forward. It can perform as a base for other string parsing scripts, like templating engines, custom language interpreters, and many more.
<br /><br />
<h4>jQuery plugin vs standalone</h4>
When called, the script will generate the class, and if jQuery is detected, it will be saved at $.tokenizer.<br />
Otherwise, the class is saved at (window.)Tokenizer.<br />
Note that this script doesn't need jQuery at all, this option is added to ease on jQuery developers.
<br /><br />
<h4>How to use</h4>
The constructor of the class takes 2 arguments, 1 is optional.<ul>
<li><h5 class="setting">tokenizers</h5> This is a collection of strings/regexes that match the tokens.<br />
The Regexes don't need to include back-references, they can though, but the whole match will be considered a token.<br />
If you use regex, it's important that you <u>DON'T</u> make it <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp:global" target="_blank">global</a>.<br />
You can send an array of tokenizers, or just one.
<li><h5 class="setting">build</h5> This is a parsing function, it will get called for each token found, and also for the string between tokens. It should return the parsed token, note this doesn't need to be a string, the returned token can be an array, an object, etc.<br />
If no function is given, the tokens are the matched strings.<br />
The function receives 3 arguments:<ol class="mine">
<li>The string token that was matched.</li>
<li>Whether it is a matched token, or the string between 2 tokens (true means real token, false, plain string).</li>
<li>The tokenizer that matched this string, or the one that skipped over this slice in the case of plain strings.</li>
</ol>
</li>
</ul>
As mentioned, build won't just get called for each token found, but also for the strings between tokens. Use the second argument to know which one it is.
After you create the tokenizer, you call the method .parse() passing the string, and it will return the array of tokens. You might want to actually do what you need, inside the build method, and just ignore the returned array.
<br /><br />
<h4>Examples</h4>
<pre class="js">
Templating
<span class="keyword">var</span> values = { name:<span class="string">'Joe'</span>, age:<span class="number">32</span>, surname:<span class="string">'Smith'</span> };
<span class="keyword">var</span> tokenizer = <span class="keyword">new</span> <span class="class">Tokenizer</span>([
<span class="regex">/&lt;%(\w+)%&gt;/</span>, <span class="regex">/\$(\w+)/</span>
],<span class="keyword">function</span>( src, real, re ){
<span class="keyword">return</span> real ? src.replace(re,<span class="keyword">function</span>(all,name){
<span class="keyword">return</span> values[name];
}) : src;
}
);
<span class="keyword">var</span> tpl = <span class="string">'&lt;%name%&gt; $surname is $age years old.'</span>;
<span class="keyword">var</span> tokens = tokenizer.<span class="method">parse</span>(tpl);
document.body.innerHTML = tokens.join(<span class="string">''</span>);
</pre>
<pre class="js">
CSV parser
<span class="keyword">var</span> rows = <span class="keyword">[ ]</span>, row = rows[<span class="number">0</span>] = <span class="keyword">[ ]</span>;
<span class="keyword">var</span> csv = <span class="keyword">new</span> <span class="class">Tokenizer</span>( [<span class="string">','</span>,<span class="string">';'</span>],
<span class="keyword">function</span>( text, isSeparator ){
<span class="keyword">if</span>( isSeparator ){
<span class="keyword">if</span>( text == <span class="string">';'</span> ){<span class="comment">//new row</span>
row = <span class="keyword">[ ]</span>;
rows.<span class="method">push</span>(row);
}
}else{
row.<span class="method">push</span>(text);
}
}
);
csv.<span class="method">parse</span>(<span class="string">'Joe,Smith,32;Jane,Doe,26;Mike,Bowel,54'</span>);
</pre>
<br /><br />
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/Tokenizer-1.0.1.zip">Tokenizer 1.0.1 Zip</a><span class="dw-tip">(all files and docs)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/tokenizer-1.0.1.js">Tokenizer 1.0.1 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/tokenizer-1.0.1-min.js">Tokenizer 1.0.1 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=A3Eq3c5RJ7k:3nZwo_vDXlQ:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=A3Eq3c5RJ7k:3nZwo_vDXlQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=A3Eq3c5RJ7k:3nZwo_vDXlQ:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=A3Eq3c5RJ7k:3nZwo_vDXlQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=A3Eq3c5RJ7k:3nZwo_vDXlQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=A3Eq3c5RJ7k:3nZwo_vDXlQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=A3Eq3c5RJ7k:3nZwo_vDXlQ:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/A3Eq3c5RJ7k" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com7http://flesler.blogspot.com/2008/03/string-tokenizer-for-javascript.htmltag:blogger.com,1999:blog-8640596986273216089.post-91604159737267114362008-03-12T11:23:00.012-02:002012-02-17T12:51:05.832-03:00XMLWriter for Javascript<h4>Introduction</h4>
This is a Javascript class, based on .NET's <a href="http://msdn2.microsoft.com/en-us/library/system.xml.xmltextwriter(VS.71).aspx" target="_blank">XMLTextWriter</a>.<br />
This is <strong>not</strong> a port, but a reduced and adapted version.
<br /><br />
<h4>Constructor</h4>
The constructor accepts 2 optional arguments: encoding, and version. You call it like this:
<pre class="js">
<span class="keyword">var</span> xw = <span class="keyword">new</span> XMLWriter( <span class="string">'UTF-8'</span>, <span class="string">'1.0'</span> );
</pre>
<h4>Methods</h4>
Class instances have the following methods:<ul>
<li><h5>writeStartDocument([ bool standalone ])</h5>
Opens a new document, must be call on start, if standalone is specified, standalone="true/false" will be added to the header.
</li>
<li><h5>writeEndDocument()</h5>
Closes the active document, it's not really mandatory to call it.
</li>
<li><h5>writeDocType( string declarations )</h5>
Adds a doctype to the document, can be called at anytime. If specified, a doctype will be included in the generated xml, in this form:<br />
&lt;!DOCTYPE root-element declarations&gt;
</li>
<li><h5>writeStartElement( string name [, string ns ] )</h5>
Creates a new node element with this name, and it becomes the active element. A namespace can be specified.
</li>
<li><h5>writeEndElement()</h5>
Closes the active element and goes up one level.
</li>
<li><h5>writeAttributeString( string attr, string value )</h5>
Adds an attribute to the active element.
</li>
<li><h5>writeString( string text )</h5>
Adds a text node to the active element.
</li>
<li><h5>writeElementString( string name, string txt [, string ns ] )</h5>
Shortcut method, creates an element, adds the text and closes it.
</li>
<li><h5>writeCDATA( string text )</h5>
Adds a text node wrapped with CDATA, to the active element.
</li>
<li><h5>writeComment( string text )</h5>
Adds a comment node to the active element.
</li>
<li><h5>flush(): string</h5>
Generates the XML string and returns it.
</li>
<li><h5>close()</h5>
Closes the writer and cleans up.
</li>
<li><h5>getDocument()</h5>
Generates a real XMLDocument from the writer. This method doesn't belong to the original class.
</li>
</ul>
<h4>Formatting</h4>
You can choose whether the generated XML is formatted or not, and how. You can modify the following options for each instance or from XMLWriter.prototype to affect them all:<ul>
<li><h5 class="setting">encoding</h5> 'ISO-8859-1' by default.</li>
<li><h5 class="setting">version</h5> '1.0' by default.</li>
<li><h5 class="setting">formatting</h5> 'indented'(default) or 'none'.</li>
<li><h5 class="setting">indentChar</h5> '\t' by default, char to indent.</li>
<li><h5 class="setting">indentation</h5> # of chars added per level, 1 by default.</li>
<li><h5 class="setting">newLine</h5> '\n' by default, char to separate lines.</li>
</ul>
If you choose formatting = 'none', you don't need to modify indentChar, indentation or newLine.
<br /><br />
<h4>Links</h4><ul>
<li><a href="http://demos.flesler.com/XMLWriter/" target="_blank">Demo</a></li>
<li><a href="http://www.opensource.org/licenses/bsd-license.php" target="_blank">License (BSD)</a></li>
<li><a href="http://aspnet.4guysfromrolla.com/articles/092403-1.aspx">.NET demo</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/XMLWriter-1.0.0.js">XMLWriter 1.0.0 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/XMLWriter-1.0.0-min.js">XMLWriter 1.0.0 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=uL7cLENqoBw:0oiFKxyuQVQ:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=uL7cLENqoBw:0oiFKxyuQVQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=uL7cLENqoBw:0oiFKxyuQVQ:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=uL7cLENqoBw:0oiFKxyuQVQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=uL7cLENqoBw:0oiFKxyuQVQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=uL7cLENqoBw:0oiFKxyuQVQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=uL7cLENqoBw:0oiFKxyuQVQ:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/uL7cLENqoBw" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com13http://flesler.blogspot.com/2008/03/xmlwriter-for-javascript.htmltag:blogger.com,1999:blog-8640596986273216089.post-70731640685236188392008-03-10T22:44:00.011-02:002012-09-13T12:33:12.987-03:00jQuery.SerialScroll 1.2 releasedI added a major release of jQuery.SerialScroll. It includes a ton of new features and allows close integration with <a href="http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html" target="_blank">jQuery.LocalScroll</a>. <br />
<br />
<h4>Fixes</h4><ul><li>If you call the plugin on the same (scrollable)element more than once, the custom events get bound only on the first call.</li>
</ul><h4>Changes</h4><ul><li>The event 'start' no longer receives the interval, you must set it at start, stop/start only pause/restart.</li>
</ul><h4>Features</h4><ul><li>You can notify SerialScroll that the active item changed, by using the event notify.serialScroll.</li>
<li>Thanks to the event notify, this plugin can be now closely integrated with LocalScroll(1.2.5 or higher).</li>
<li>Also, thanks to notify, you can call SerialScroll on the same element more than once, and they interact nicely.</li>
<li>You can specify the option 'target', and then the matched elements become the context of all the selectors, and target matches the element to be scrolled. This allows you to call SerialScroll on many element at the same time.</li>
<li>You can combine the options 'jump' and 'lazy' (not adviced if no target is specified).</li>
<li>LocalScroll and SerialScroll are so compatible, that they can use the same hash of settings.</li>
<li>Added option 'constant'(true by default), specifies whether the speed must be constant or not.</li>
<li>Added option 'navigation' to add a group of element to jump to the items.</li>
</ul><h4>Links</h4><ul><li><a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">Main Post</a></li>
<li><a href="http://plugins.jquery.com/project/SerialScroll" target="_blank">Project Page</a></li>
<li><a href="http://flesler.webs.com/jQuery.SerialScroll/" target="_blank">Demo</a></li>
<li><a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">jQuery.ScrollTo</a></li>
<li><a href="http://flesler.webs.com/jQuery.ScrollTo/" target="_blank">jQuery.ScrollTo's demo</a></li>
<li><a href="http://flesler.webs.com/jQuery.SerialScroll/changes.txt" target="_blank">Changelog</a></li>
</ul><h4>Downloads</h4><ul><li><a href="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.1.js">jQuery.SerialScroll 1.2.1 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.1-min.js">jQuery.SerialScroll 1.2.1 Minified</a><span class="dw-tip">(recommended)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.3.3.js">jQuery.ScrollTo 1.3.3 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.3.3-min.js">jQuery.ScrollTo 1.3.3 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><em>I really advice using the minified versions. The code is optimized for those releases. Source versions should only serve to learn.</em><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=464i7h-HdO8:xx_nPeB57fc:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=464i7h-HdO8:xx_nPeB57fc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=464i7h-HdO8:xx_nPeB57fc:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=464i7h-HdO8:xx_nPeB57fc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=464i7h-HdO8:xx_nPeB57fc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=464i7h-HdO8:xx_nPeB57fc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=464i7h-HdO8:xx_nPeB57fc:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/464i7h-HdO8" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com17http://flesler.blogspot.com/2008/03/jqueryserialscroll-120-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-23987335212919392752008-03-01T02:37:00.020-02:002012-09-13T12:33:38.986-03:00jQuery.SerialScroll 1.1 releasedI added a major release of jQuery.SerialScroll. It doesn't have that many changes, but I really feel it made one step ahead. <h4>Optimizations</h4><ul><li>The animation is skipped if a bad position was received or it's the same as the actual. Saving some overhead.</li>
</ul><h4>Changes</h4><ul><li>Changed the licensing from GPL to GPL+MIT.</li>
</ul><h4>Features</h4><ul><li>The plugin binds 3 events to the container to allow external manipulation. They are clearly explained in the main post, please check it.</li>
<li>Added 2 more arguments to the onBefore callback: actual item collection, index of the actual item in the collection.</li>
<li>Added option 'interval', can be a number specifying the amount of milliseconds for autoscrolling.</li>
</ul>I upgraded the main post and it has extensive and detailed documentation. Also added some more text and options to the demo. <h4>Links</h4><ul><li><a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html">Main Post</a></li>
<li><a href="https://github.com/flesler/jquery.serialScroll" target="_blank">Github Repo</a></li>
<li><a href="http://demos.flesler.com/jquery/serialScroll/" target="_blank">Demo</a></li>
<li><a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">jQuery.ScrollTo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/" target="_blank">jQuery.ScrollTo's demo</a></li>
<li><a href="http://demos.flesler.com/jquery/serialScroll/changes.txt" target="_blank">Changelog</a></li>
</ul><h4>Downloads</h4><ul><li><a href="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.2.js">jQuery.SerialScroll 1.2.2 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.serialScroll-1.2.2-min.js">jQuery.SerialScroll 1.2.2 Minified</a><span class="dw-tip">(recommended)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1.js">jQuery.ScrollTo 1.4.3.1 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js">jQuery.ScrollTo 1.4.3.1 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><em>I really advice using the minified versions. The code is optimized for those releases. Source versions should only serve to learn.</em><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=I61rkLGtOhw:SM6-cnvud2U:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=I61rkLGtOhw:SM6-cnvud2U:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=I61rkLGtOhw:SM6-cnvud2U:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=I61rkLGtOhw:SM6-cnvud2U:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=I61rkLGtOhw:SM6-cnvud2U:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=I61rkLGtOhw:SM6-cnvud2U:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=I61rkLGtOhw:SM6-cnvud2U:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/I61rkLGtOhw" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com115http://flesler.blogspot.com/2008/03/jqueryserialscroll-110-released.htmltag:blogger.com,1999:blog-8640596986273216089.post-49404465435521112342008-02-20T15:29:00.008-02:002008-03-02T18:33:59.352-02:00Rotator<h4>Introduction</h4>
This small Javascript class, serves as a generic rotator for different kind of collections.
<br /><br />
<h4>Arguments</h4>
The Rotator class constructor expects 3 arguments, the last 2 are optional.
<ul>
<li><h5>collection</h5>
Can be a string, an array or an array-like object( arguments, nodelist, numeric hash ).
<br />If it's a string, it will get split by character.
</li>
<li><h5>setter</h5>
A function that receives a value, an element of the collection and it's index.
<br />It must, either set the value internally or return the new value.
<br />The scope (this) will be the element, the arguments are the value and then the index.
<br />If it's a string, it means you want to set the value to the attribute of the element with that name.
<br />If none is given, then Rotator.defaultSetter is used, which, by default, returns the new value.
</li>
<li><h5>getter:</h5>
A function that receives an element of the collection and the index.
<br />It must return the desired information from them.
<br />The scope (this) will be the element and the first argument, the index.
<br />If it's a string, it means you want the attribute of the element with that name.
<br />If none is given, then Rotator.defaultGetter is assigned, which, by default, returns the element.
</li>
</ul>
<h4>How to use</h4>
Once you create an instance (obj) of the class, you can get/set the collection using the method obj.collection().<br />
To rotate the elements, call obj.left() or obj.right().<br />
With each call, the elements will be rotated one position in the direction you specified, and the functions will be called.<br />
Note that the collection held by the object won't be the same that you gave it. Yours remains untouched.
<br /><br />
Check the demo to see it working. If you view the source, you'll see 3 different instances.
<br /><br />
<h4>Links</h4><ul>
<li><a href="http://flesler.webs.com/Rotator/" target="_blank">Demo</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/rotator-1.0.0.zip">Rotator 1.0.0 Zip</a><span class="dw-tip">(all files and docs)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/rotator-1.0.0.js">Rotator 1.0.0 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/rotator-1.0.0-min.js">Rotator 1.0.0 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=l_uPWrDCcHk:hBj8xrcLCgE:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=l_uPWrDCcHk:hBj8xrcLCgE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=l_uPWrDCcHk:hBj8xrcLCgE:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=l_uPWrDCcHk:hBj8xrcLCgE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=l_uPWrDCcHk:hBj8xrcLCgE:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=l_uPWrDCcHk:hBj8xrcLCgE:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=l_uPWrDCcHk:hBj8xrcLCgE:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/l_uPWrDCcHk" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com0http://flesler.blogspot.com/2008/02/rotator.htmltag:blogger.com,1999:blog-8640596986273216089.post-20899272231058163452008-02-20T10:47:00.007-02:002008-07-26T13:44:15.027-03:00jQuery.Listen 1.0 releasedI updated jQuery.Listen and it got to it's first stable version. This release includes mostly features. A few optimizations and a couple of structural changes.<br />
As specified in the change list, the licensing changed from GPL to GPL+MIT.
<br /><br />
<h4>Optimizations</h4><ul>
<li>Reduced the code size, this release (with all its features) is smaller than the previous one.</li>
<li>Added many optimizations for minified code size.</li>
<li>Improved the cleaning done on window.onload to avoid memory leaks.</li>
</ul>
<h4>Fixes</h4><ul>
<li>The [].splice.call(arguments,..) wasn't working in my Opera.</li>
</ul>
<h4>Changes</h4><ul>
<li>$.listen is not used for stopping/restarting the indexers.<br />
use $(..).indexer(...).(start|stop)() instead.</li>
<li>Changed the licensing from GPL to GPL+MIT.</li>
</ul>
<h4>Features</h4><ul>
<li>Added Jörn Zaefferer's approach of focusin/focusout. You can now safely listen for blur and focus events.</li>
<li>Added $(..).indexer( event_name ) to get access to the indexers of the first matched element and $.indexer(..) to the global indexer.</li>
<li>$.listen.fixes is a hash that maps event/fixedEvent. If you add a fix at $.event.special, add it to this hash and it will work automatically.</li>
<li>It's possible to instruct indexers to emulate the natural bubbling like this: $(..).indexer( ... ).bubbles = true, use with discretion, will hit on perfomance.</li>
<li>Added support for multiple events separated with spaces.</li>
</ul>
Kudos to <a href="http://bassistance.de/" target="_blank">Jörn Zaefferer</a> for lending me the code that now allows listening for focus and blur!
<h4>Links</h4><ul>
<li><a href="http://flesler.blogspot.com/2007/10/jquerylisten.html" rel="start">Main Post</a></li>
<li><a href="http://jquery.com/plugins/project/Listen" target="_blank">Project Page</a>
</li>
<li><a href="http://demos.flesler.com/jquery/listen/" target="_blank">Small demo</a></li>
<li><a href="http://demos.flesler.com/jquery/listen/changes.txt" target="_blank">Changelog</a></li>
</ul>
<h4>Downloads</h4><ul>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.listen-1.0.3.zip">jQuery.Listen 1.0.3 Zip</a><span class="dw-tip">(all files and docs)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.listen-1.0.3.js">jQuery.Listen 1.0.3 Source</a><span class="dw-tip">(to learn or test)</span></li>
<li><a href="http://flesler-plugins.googlecode.com/files/jquery.listen-1.0.3-min.js">jQuery.Listen 1.0.3 Minified</a><span class="dw-tip">(recommended)</span></li>
</ul>
<em>I really advice using the minified versions. The code is optimized to those releases. Source versions should only serve to learn.</em><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Flesler?a=YMBeBzoUIrg:NkYQgL6UA1c:63t7Ie-LG7Y"><img src="http://feeds.feedburner.com/~ff/Flesler?d=63t7Ie-LG7Y" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=YMBeBzoUIrg:NkYQgL6UA1c:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Flesler?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=YMBeBzoUIrg:NkYQgL6UA1c:TzevzKxY174"><img src="http://feeds.feedburner.com/~ff/Flesler?d=TzevzKxY174" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=YMBeBzoUIrg:NkYQgL6UA1c:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/Flesler?i=YMBeBzoUIrg:NkYQgL6UA1c:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Flesler?a=YMBeBzoUIrg:NkYQgL6UA1c:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/Flesler?i=YMBeBzoUIrg:NkYQgL6UA1c:V_sGLiPBpWU" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Flesler/~4/YMBeBzoUIrg" height="1" width="1" alt=""/>Ariel Fleslerhttp://www.blogger.com/profile/17700414222186772120noreply@blogger.com13http://flesler.blogspot.com/2008/02/jquerylisten-10-released.html