If you view source on that page I linked, there are some comments in the JavaScript that explain how it works. Basically, it’s looking through the inline DIVs in the gallery, and reading their class attribute:
list.each(function(elm){
if(elm.hasClassName(key)){
elm.show();
}else{
elm.hide();
}
});
In the above, list
is a pre-populated array of all of those inline DIVs, gathered at once during the page load so subsequent requests are faster. (Look above that snip in the source to see what I mean.)
In your case, the test would not be for a classname, but for something like:
if(elm.down('input:checked')){
The test for the button would be something like this:
if($('outerBox').select('input:checked').length > 1){
$('compare-button').enable().observe(
'click',
list.reject(function(elm){
return elm.down('input:checked');
}).invoke('hide');
this.writeAttribute('value','Show All');
);
}else{
$('compare-button').stopObserving().
disable().
writeAttribute('value','Compare');
list.invoke('show').select('input:checked').
invoke('writeAttribute','checked',null);
}
I would wrap that in a form observer, which runs that test every 1/N seconds. Your filter function would hide and show the elements.
The key to making this work will be to properly nest the elements in your floating inline DIVs. If you just draw it in place, you’ll get a disconnected salad of elements that won’t properly relate to one another, so the test for elm.down(‘input:checked’) will fail. I suspect it will be very difficult to make one of these, but once you figure it out, you’ll be able to copy and paste to make all the extra elements.
Walter
On Jun 8, 2012, at 9:04 AM, Julie Maxwell Allen wrote:
and that blob of JS ? can I ask what your thinking?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options