jQuery Forum

At the moment, traversal callbacks, like the ones passed to find/filter/etc. take a single "index" parameter. I'd like to propose that they are unified with .each as follows:<div>
</div><div>$("div").filter(function(i, self) {</div>
<div>  // stuff</div><div>});</div><div>
</div><div>As a separate concern, I'd like to discuss changing the second parameter in both to be a jQuery object. Obviously, it would need to be done via slow deprecation for .each, but I don't think it'd break all that much code:</div>
<div>
</div><div>$("div").filter(function(i, self) {</div><div>  // self == $(this)</div><div>})</div><div>
</div><div>Thoughts?<br clear="all">
--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325
</div>

I just released jQuery Metadata 2.1, which adds support for HTML5 data-*.<div>
</div><div><span class="Apple-style-span" style="font-family: monospace, Verdana, Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(34, 34, 34); ">Usage:</span></div>
<div><font class="Apple-style-span" color="#222222" face="monospace, Verdana, Helvetica, Arial, sans-serif">
</font></div><div><span class="Apple-style-span" style="font-size: 13px; "></span><font class="Apple-style-span" color="#222222" face="monospace, Verdana, Helvetica, Arial, sans-serif"><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 10px; "><div class="content" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.6em; margin-right: 0px; margin-bottom: 0.6em; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; ">
<div class="codeblock" style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); ">
<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px !important; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; "><p id="one" class="some_class" data-item_id="1" data-item_label="Label">This is a p

;<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$.metadata.setType("html5")<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
$("#one").metadata().item_id == 1;<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$("#one").metadata().item_label == "Label";</code></div>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; ">

</div><div class="clear-block clear" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; display: block; ">
<div class="meta" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; ">
</div></div></span></font><div>Get it at <a href="http://plugins.jquery.com/project/metadata">http://plugins.jquery.com/project/metadata</a></div><div>
</div><div>-- 
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325</div>
</div>

I just released jQuery Metadata 2.1, which adds support for HTML5 data-*.<div>
</div><div><span class="Apple-style-span" style="font-family: monospace, Verdana, Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(34, 34, 34); ">Usage:</span></div>
<div><font class="Apple-style-span" color="#222222" face="monospace, Verdana, Helvetica, Arial, sans-serif">
</font></div><div><span class="Apple-style-span" style="font-size: 13px; "></span><font class="Apple-style-span" color="#222222" face="monospace, Verdana, Helvetica, Arial, sans-serif"><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 10px; "><div class="content" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.6em; margin-right: 0px; margin-bottom: 0.6em; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; ">
<div class="codeblock" style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); background-position: initial initial; ">
<code style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px !important; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; "><p id="one" class="some_class" data-item_id="1" data-item_label="Label">This is a p

;<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$.metadata.setType("html5")<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
$("#one").metadata().item_id == 1;<br style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$("#one").metadata().item_label == "Label";</code></div>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">

</div><div class="clear-block clear" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; display: block; background-position: initial initial; ">
<div class="meta" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 10px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; background-position: initial initial; ">
</div></div></span></font><div>Get it at <a href="http://plugins.jquery.com/project/metadata">http://plugins.jquery.com/project/metadata</a></div><div>
</div><div>--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325
</div></div>

I'd like to submit a patch that lets all setters (val, html, text, etc.) take a function as the second parameter, like the current .css() and .attr(). Can anyone see a reason not to do that?<br clear="all">
--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325

I brought this up a while back and I think it was well-received. I'd like to get some feedback on this proposal again before putting any work into it.<div>
</div><div>The basic idea is:</div><div>
</div><div>$("p").bind("keydown[keyCode=119]", function() {})</div>
<div>
</div><div>It's basically a shortcut for:</div><div>
</div><div>$("p").bind("keydown", function(e) { if(e.keyCode == 119) { } })</div><div>
</div><div>I'd imagine it'd work with other operators (>, <, !=), and use literals (true, 119, 'string'). I'm not 100% sure yet how to implement it without eval, but it should be doable (would probably require a simple literal parser, but that's fine with me).<br clear="all">
--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325
</div>

<div dir="ltr">To quickly do event bubbling with custom events, Prototype creates a *real* click event, modifies it, and fires that. As a result, the browser takes care of bubbling. It's fast, and, as far as I can tell, foolproof.<div>
</div><div>What do you guys think about doing something like that in jQuery?<br clear="all">
--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325
</div></div>

<div dir="ltr">For a while, I've been trying to make it possible to build a system to automatically install jQuery plugins into an application. In particular, I've wanted to be able to let Merb (a Ruby web framework I maintain -- <a href="http://merbivore.com/">http://merbivore.com/</a>) install jQuery plugins simply and easily.<div>
</div><div>There are a few problems I needed to see solved:</div><div><ul><li>A way for package authors to describe the locations of the javascript files, the CSS files, and any images</li><li>A way for package authors to declare required dependencies</li>
<li>A way to write CSS files that don't need to provide explicit image paths</li></ul><div>I want to propose a packaging format that plugin authors can use. To get the ball rolling, I'm proposing a JSON file called metadata.json:</div>
<div>
</div><div>{</div><div>  "name": "tabs.jquery",</div><div>  "author": "Yehuda Katz",</div><div>  "dependencies": [</div><div>    "core.ui.jquery",</div>
<div>    "mouse.ui.jquery"</div><div>  ],</div><div>  "javascript": [</div><div>    "lib/utility.tabs.jquery",</div><div>    "lib/tabs.jquery",</div><div>  ],</div><div>  "cssDir": "css",</div>
<div>  "imageDir": "images"</div><div>}</div><div>
</div><div>Additionally, I'd like to propose that CSS files containing image paths use the token %imageDir% to refer to the directory where the images will be placed. This will allow automated tools (or even users themselves) to quickly modify CSS files with the correct relative (or absolute) path.</div>
<div>
</div><div>Does this stuff make sense? People seemed to be, in general, in favor of a more consistent package format, so I thought I'd get the ball rolling here.</div>
--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325
</div></div>

<div dir="ltr">Hey guys,<div>
</div><div>At TAE, I spoke to a number of you guys about modular code, and some of you asked me to put together some examples. In addition to the simple autocompleter I put together for my talk at jQueryConf and TAE, I put together a simple example of an extensible tab plugin.</div>
<div>
</div><div>It's not intended to be feature complete, but to get the conversation started about how to design extensible, modular widgets using the event system. It's also not meant to be the perfect way to do this; again, I just whipped something up on the plane.</div>
<div>
</div><div>Also, if something like the widget factory or John's plugin code becomes standard, it would be possible to standardize some of the idioms here. I'm interested in your feedback. The idea here is that the part on top, until line 47, defines the basic semantics of the tabs, and additional semantics (including the default semantics) are provided modularly.</div>
<div>
</div><div>The code is at: <a href="http://gist.github.com/14517">http://gist.github.com/14517</a><br clear="all">
--
Yehuda Katz
Developer | Engine Yard
(ph) 718.877.1325
</div></div>

So as far as I'm concerned, livequery is the biggest advance in jQuery since its inception (no, I am not its author). I'm trying to understand why it's having such a slow rate of adoption.<div>
 </div><div>it solves this problem:
</div><div>$("div.klass").draggable();</div><div>$("#foo").load("url", function() { $("div.klass").draggable(); });</div><div>
 </div><div>beautifully, as you now only need to do:
</div><div>
 </div><div>$("div.klass").livequery(function() { $(this).draggable() });</div><div>$("#foo").load("url");</div><div>
 </div><div>Obviously, that was only a simple example. The more general case, wanting to bind some event handler to a selector regardless of when it appears on the page, is extremely common. So again, I'm trying to understand why the rate of adoption has been so slow. Any thoughts? 
<br clear="all"></div>
--
Yehuda Katz
Web Developer | Procore Technologies
(ph)  718.877.1325

Hey guys,<div><br class="webkit-block-placeholder"></div><div>I'm really proud of how well jQuery in Action has been selling over the past few weeks, and how much feedback I've been getting from the community. If you haven't gotten a chance to purchase it, I just wanted to let you know that the 30% off coupon code expires tonight (not sure if it's EST or PST...).
</div><div><br class="webkit-block-placeholder"></div><div>Get the book at: <span class="Apple-style-span" style="font-family: 'Lucida Grande'; font-size: 11px; "><a href="http://www.manning.com/affiliate/idevaffiliate.php?id=485_93">
http://www.manning.com/affiliate/idevaffiliate.php?id=485_93</a></span></div><div><font class="Apple-style-span" face="'Lucida Grande'" size="3"><span class="Apple-style-span" style="font-size: 11px;"><br clear="all">
</span></font>Use coupon code JQM30 for 30% off!</div><div>
--
Yehuda Katz
Web Developer | Procore Technologies
(ph)  718.877.1325
</div>

Hey guys,<div>
 </div><div>As many of you already know, I have been working on jQuery in Action, a book on jQuery for Manning Publishers.</div><div><br class="webkit-block-placeholder"></div><div>Almost the entire book is available on MEAP (Manning Early Access Program), and it's going to be published in December of this year.
</div><div><br class="webkit-block-placeholder"></div><div>The book itself is pretty awesome. It tries to give you the information you need with a useful narrative, including motivation for certain parts of jQuery. One of the most awesome things about the book, imho, are the labs, which allow you to test out parts of jQuery without having to throw together an entire test case. For instance, there's a selector lab, which lets you see, visually, which elements will be selected by a given jQuery selector.
</div><div><br class="webkit-block-placeholder"></div><div>It's currently the only book out that covers jQuery 1.2, as well as the important parts of jQuery UI (including stuff like the undocumented callback object that you get in the draggable/droppable primitives). Toward the end of the book, you get full-chapter examples (my favorite is the Ajax chapter, which covers building an Ajaxified store selling boots ;) ), and focuses heavily on jQuery best practices and Unobtrusive Scripting.
</div><div><br class="webkit-block-placeholder"></div><div>Without further ado, you can purchase the book (you'll get the prerelease stuff now and the complete book when it's released in December) at <a href="http://www.manning.com/affiliate/idevaffiliate.php?id=485_93">
http://www.manning.com/affiliate/idevaffiliate.php?id=485_93</a>. If you use the coupon code JQM30 before the end of October, you will also receive a 30% discount. The Manning guys are tracking this code to see how strong the jQuery community's response will be :)
<br clear="all">
--
Yehuda Katz
Web Developer | Procore Technologies
(ph)  718.877.1325
</div>

Hey John,
So I've been having trouble figuring out how queue is meant to be used. In its most simple case, its use is pretty obvious. But it's not clear how you would use it to do anything non-trivial. What are some examples of its intended use?
<br clear="all">
--
Yehuda Katz
Web Developer | Procore Technologies
(ph)  718.877.1325

Hi guys,
I have just committed a new plugin to the trunk. It's a simple templater that allows you to create "templates" that get populated via JSON objects. Some examples:
<span style="font-family: courier new,monospace;">
var tmp = $.makeTemplate("My name is {{foo}} and your name is {{bar}}");</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">tmp({foo: "Yehuda", bar: "jQuery"}) #=> "My name is Yehuda and your name is jQuery"
</span><br style="font-family: courier new,monospace;">
It also works with global functions and objects:
<span style="font-family: courier new,monospace;">var tmp = $.makeTemplate("The number being passed in is {{number}} and its integer value is {{parseInt(number)}}");
</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">tmp({number: 17.6}) #=> "The number being passed in is 17.6 and its integer value is 17"
</span>In typical jQuery style, you can make it work on elements too:
<span style="font-family: courier new,monospace;"><div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'></div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">$("#testMe").updateTemplate({first: "Yehuda", last: "Katz", number: 17});</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">Result: <div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'>Yehuda Katz 4</div></span><br style="font-family: courier new,monospace;">
<br clear="all">You can also load in the contents via a new Ajax request:
<span style="font-family: courier new,monospace;"><div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'></div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$("#testMe").loadTemplate("test.json");</span><br style="font-family: courier new,monospace;">
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">Result: <div id='testMe' template='{{first}} {{last}} {{parseInt(Math.sqrt(number))}}'>Yehuda Katz 4</div>
</span>
assuming, of course, that test.json contains the JSON object passed in to updateTemplate above.
You can check out the plugin at <a href="http://jqueryjs.googlecode.com/svn/trunk/plugins/templating/">
http://jqueryjs.googlecode.com/svn/trunk/plugins/templating/</a>
It already has a few unit tests, which serve as a simple demo for how it works.
--
Yehuda Katz
Web Developer | Procore Technologies
(ph)  718.877.1325

Hey guys,
So I've been lobbying for syntax along the following lines:
$(...).attr("foo", "{{width() > 40 ? 'bar' : 'baz'}}")
or
$(...).attr("target", "{{rel}}")
which would basically expand to:
$(...).attr("foo", function() {
  return this.width() > 40 ? "bar" : "baz";
});
and
$(...).attr("target", function() {
  return this.rel;
});<br clear="all">respectively.
I personally feel like this would be a very nice feature, and recall people asking about it on the list, but I can't come up with any compelling use-cases on-the-fly.
If you think this would be useful, and want it in 1.2, can you reply to this post with a specific use-case that you could see using in real-life? I really want to get this into 1.2, but it requires some proof of use ;)
--
Yehuda Katz
Lead Developer | Procore Technologies
(ph)  718.877.1325

I'm not sure how many folks have noticed, but an excellent new plugin
repository was activated with little fanfare a few weeks ago at <a href="http://jquery.com/plugins" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://jquery.com/plugins</a>. At the moment, we've had a plugin list at
<a href="http://docs.jquery.com/Plugins" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://docs.jquery.com/Plugins</a>, which is where the main plugin link points to.
Because
of the incredible new features of the new plugin repository, we are
going to switch the link over to use it instead of the old wiki page.
As a result, we're requesting that all plugin authors add an entry in
the new repository with as much detail as possible. We're going to flip
the switch on August 1, so again, please get everything moved over as
soon as you can.
While you're at it, it might be useful to determine whether
your plugins still work with the latest version of jQuery.
Additionally, all jQuery.fn plugins should return a jQuery object for
chainability, so make sure that your plugin does, in fact, do that.
Thanks a ton!<br clear="all">
--
Yehuda Katz
Plugin Team Leader | jQuery
(ph)  718.877.1325

Hey guys,
Great news! Hpricot has accepted my patches to make hpricot compatible with jQuery, which means you'll only need to checkout the latest hpricot from svn to use jQuery on Rails.<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325

I'm in the process of building what will soon be the first release of jQuery on Rails together with Steven Bristol, who was a winner of Rails Hackfest (which won him a free ticket to RailsConf for his contributions to the Rails core).
I had a few questions that I would love if you guys could answer:
1) Are you using Rails?
2) If you're not, would you if it was easier to use jQuery with Rails?
3) Would you prefer an approach that generated JS by writing Ruby helpers that generated jQuery code, or an approach that made is easier to link up existing jQuery code into Rails?
4) If you've used jQuery with Rails, what issues have you run into
5) If you've used jQuery with Rails before, what type of application (size, scope, etc.) was it?<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi All,
At long last, I have put together a downloadable Visual jQuery package. Simply go to <a href="http://www.visualjquery.com">http://www.visualjquery.com</a> and click "Download." By default, the package comes with the most recent HTML, but you can easily add other versions by just saving any of the versioned HTMLs into the same directory.
I have also uploaded the docs for 1.1.1.<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hey Guys,
I have been working on a project that could make use of Kelvin's scroll pane.
I have made a few enhancements:
* Keyboard support
* Separate top/middle/bottom elements for the dragger
* "activated" class for track when scrolling or key action is possible
This means that you can now have a pretty scrollbar that has a separate activated/deactivated state.
Take a look at: <a href="http://www.visualjquery.com/scroll_pane/index.htm">http://www.visualjquery.com/scroll_pane/index.htm
</a>
It's not fully ready, so any feedback would be most appreciated.<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

I've begun work on a Safari widget pack, that allows you to work with Safari widgets in a way more jQuery way.
For example:
      var y = $("#scrollArea").makeScrollAreaWithBars({singlepressScrollPixels: 50}, {id: "scrollBar"}, {id: "horizBar"})
        .bind("mouseover", function() { y.focus(); }).bind("mouseout", function() { y.blur(); })
      z = $("button").makeGlassButton();
      z[0].click(function() { y.horizontalScrollbar
().toggleAutohide(); });
      z[1].click(function() { y.verticalScrollbar().toggle(); })
The above code does the following:
Line 1: Converts a div with id scrollArea into an AppleScrollArea with horizontal and vertical scrollBars (with attributes provided)
Line 2: binds a mouseover event to the newly created scrollArea widget and then a mouseout event
Line 3: Converts all buttons on the page into glass buttons, and returns an array of the new glass buttons
Line 4: Gets the first glassButton and binds a click handler which toggles the autohide on the scrollArea's horizontal scrollbar
Line 5: Gets the second glassButon and binds a click handler which toggles the vertical scrollbar
This would obviously be way more than 5 lines if you used the Apple API ;)
The files are in the plugins in svn under safari_widgets. There's still a lot of work to do, but I wanted to get some feedback on the work I did. The best way to look at it is to open the HTML file that's packed with the svn. You'll need OSX
10.4.3 or higher.
Thanks!<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Building on the good conceptual work of Wil Stuckey for Star Ratings, I have refactored the star rating he built.
Some notable changes:
* It's around 1/2 the size
* I removed the option to do 0 stars, because it was confusing and the few people I asked to quickly usability test it couldn't figure out what it did
* Selecting a number of stars prevents further changes.
I reused Wil's demo page, because the API is exactly the same (even though most of the code is rewritten). While I rewrote a lot of the code, I entirely reused the basic concept behind the plugin, so kudos WIl!
You can check it out at <a href="http://www.visualjquery.com/rating/rating_redux.html">http://www.visualjquery.com/rating/rating_redux.html</a>
Let me know what you think.<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hey guys,
I've been listening to all of the feedback I've gotten about Visual jQuery, and I've built a new version that I believe responds to many of those concerns:
* a dramatically reduced title-bar (20px high)
* a "path" in the titlebar indicating the current location in the API tree
* the "text" area takes up the full remaining area of the screen
* if the "text" area is less than 350px wide, it expands a column, pushing the remaining columns to the left
* you can move columns off to the left to get more space for text (even if it has not automatically expanded)
* selecting an node automatically jumps up to the top of the screen (specifically useful for automatically getting to the top of "text" areas)
* the rendering is done differently, so the normal drawbacks of nesting are no longer present
Check it out at:
<a href="http://www.visualjquery.com/new.html">http://www.visualjquery.com/new.html</a>
Note that there are still some bugs, so I won't get upset if you report them. Just tell me exactly what you did and what went wrong.<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

In addition to updating the documentation in conjunction with 1.1, I will be doing the following for January 14:
 * Making sure all svn plugins are documented and included on the site
 * Switching to dl-based navigation
 * Adding a live-search filter.
I'm also working on a first release of jQuery on Rails (I know I know), but it's been very tough to work out exactly how I'm going to proceed. A big part of the delay has to do with how some of the new features being implemented in
1.1 have remained in flux. I want to wait until the API for metadata is stable before releasing anything.
That said, I have a very prototypal version working on a production app I'm working on at the moment, and it's awesome. The sequential plugin I released yesterday as well as John and Andrea's speed improvements also prevent browser lockup in certain situations, which was another thing holding me back.
<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

I finally got around to building a "run sequentially" plugin:
<span style="font-family: courier new,monospace;">jQuery.sequence = {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
  setTimeoutH: function(f, t) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    var params = (arguments.length == 3 && arguments[2].constructor == Array) ? arguments[2] :
jQuery.merge([], arguments).slice(2);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    window.setTimeout(function() { f.apply(f, params) }, t);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">  },</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  run: function() {
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    if(arguments[0]) arguments[0]();</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
    if(arguments[1]) jQuery.sequence.setTimeoutH(arguments.callee, 1, jQuery.merge([], arguments).slice(1));</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  },</span>
<br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  runArray: function(array, fn, whenDone) {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">    if(array[0]) fn.call(array[0], array);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    if(array[1]) jQuery.sequence.setTimeoutH
(arguments.callee, 1, jQuery.merge([], array).slice(1), fn, whenDone);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">    else if(whenDone) whenDone();</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">  }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">}</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">jQuery.fn.sequence = function(fn, whenDone) {</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  jQuery.sequence.runArray
(this, fn, whenDone);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">  return this;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span>
You can do a few things:
$(expr).sequence(function() { console.log(<a href="http://this.id">this.id</a>) }); which will run through each item in the jQuery object and print its id to the console.
$(expr).sequence(function() { console.log(<a href="http://this.id">this.id</a>) }, function() { console.log("Done") }); which will do the same as above and when completely done, print "Done"
$.sequence.run(function() { // first function }, function() { // second function }); which will run the first function and then the second one without locking up the browser
$.sequence.runArray([1,2,3], function() { console.log(this) }); which will print "1", then "2", then "3"
$.sequence.runArray([1,2,3], function() { console.log(this) }, function() { console.log
("Done") }); which will do the same as above and when completely done, print "Done"
The trick here, of course, is that you get looping behavior that shouldn't lock up the browser.
<br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

In the vein of the discussion we've been having on this list (and, of course, heavily inspired by the first speed test), I've created a more extensive speed test that tests a bunch of similar cases.
A word of warning: your browser will not be available for a good 30 seconds or so while the test is running, but it will not lock up.
The first thing my code does is test how long it takes to run a $(".class") query, and bases the number of attempts for each test on the speed of that query (not a perfect system, but it should prevent crazy long loads on slow computers.
Check the test out at:
<a href="http://yehuda.jquery.com/jq_test.html">http://yehuda.jquery.com/jq_test.html</a><br clear="all">
--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/