thr3ads.net - Rails spinoffs - observe and bind question [Apr 2007]

If this information is useful, please help other people find it:
Share via:

Walter Lee Davis

2007-Apr-24 14:39 UTC

observe and bind question

I have a little script to do expand-o headers within a single div:

Event.observe(window,''load'',function(){
	var headers =
$(''test'').getElementsBySelector(''h3'');
	for (var i = headers.length - 1; i >= 0; i--){
		headers[i].addClassName(''fakelink'');
		headers[i].next(''div'').hide();
		headers[i].observe(''click'',function(e){
			this.next(''div'').toggle();
		}.bind(headers[i]));
	};
});

I count at least three too many headers[i] in the above, and I''m 
wondering if someone could take a moment to show me the cool-kids way 
to do the same thing. I am guessing it is probably some one-word magic 
like ''each'' or something like that...

Thanks,

Walter


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Michael Peters

2007-Apr-24 23:56 UTC

head link

Re: observe and bind question

Walter Lee Davis wrote:> I have a little script to do expand-o headers within a single div:
> 
> Event.observe(window,''load'',function(){
> 	var headers =
$(''test'').getElementsBySelector(''h3'');
> 	for (var i = headers.length - 1; i >= 0; i--){
> 		headers[i].addClassName(''fakelink'');
> 		headers[i].next(''div'').hide();
> 		headers[i].observe(''click'',function(e){
> 			this.next(''div'').toggle();
> 		}.bind(headers[i]));
> 	};
> });
[snip]> I''m
> wondering if someone could take a moment to show me the cool-kids way
> to do the same thing. I am guessing it is probably some one-word magic
> like ''each'' or something like that...
Event.observe(window,''load'',function(){
   
$A($(''test'').getElementsBySelector(''h3'')).each(function(header)
{
        header.addClassName(''fakelink'');
        header.next(''div'').hide();
        header.observe(''click'',function(e){
             this.next(''div'').toggle();
        }.bind(header));
    };
});

-- 
Michael Peters
Developer
Plus Three, LP


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

David Dashifen Kees

2007-Apr-25 00:46 UTC

head link

Re: observe and bind question

This would be another option in addition to Michael''s:

Event.observe(window, "load", function() {
    $$("#test h3").each(function(element) {
       element.addClassName("fakelink");
       element.next("div").hide();
       element.observe("click", function() {
this.next("div").toggle();
}.bind(element));
    });
});

Walter Lee Davis wrote:> I have a little script to do expand-o headers within a single div:
>
> Event.observe(window,''load'',function(){
> 	var headers =
$(''test'').getElementsBySelector(''h3'');
> 	for (var i = headers.length - 1; i >= 0; i--){
> 		headers[i].addClassName(''fakelink'');
> 		headers[i].next(''div'').hide();
> 		headers[i].observe(''click'',function(e){
> 			this.next(''div'').toggle();
> 		}.bind(headers[i]));
> 	};
> });
>
> I count at least three too many headers[i] in the above, and I''m 
> wondering if someone could take a moment to show me the cool-kids way 
> to do the same thing. I am guessing it is probably some one-word magic 
> like ''each'' or something like that...
>
> Thanks,
>
> Walter
>
>
> >
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Walter Lee Davis

2007-Apr-25 09:43 UTC

head link

Re: observe and bind question

Thanks for that one, too. Less is more!

Walter

On Apr 24, 2007, at 8:46 PM, David Dashifen Kees wrote:
>
> This would be another option in addition to Michael''s:
>
> Event.observe(window, "load", function() {
>     $$("#test h3").each(function(element) {
>        element.addClassName("fakelink");
>        element.next("div").hide();
>        element.observe("click", function() {
this.next("div").toggle();
> }.bind(element));
>     });
> });
>
> Walter Lee Davis wrote:
>> I have a little script to do expand-o headers within a single div:
>>
>> Event.observe(window,''load'',function(){
>> 	var headers =
$(''test'').getElementsBySelector(''h3'');
>> 	for (var i = headers.length - 1; i >= 0; i--){
>> 		headers[i].addClassName(''fakelink'');
>> 		headers[i].next(''div'').hide();
>> 		headers[i].observe(''click'',function(e){
>> 			this.next(''div'').toggle();
>> 		}.bind(headers[i]));
>> 	};
>> });
>>
>> I count at least three too many headers[i] in the above, and
I''m
>> wondering if someone could take a moment to show me the cool-kids way
>> to do the same thing. I am guessing it is probably some one-word magic
>> like ''each'' or something like that...
>>
>> Thanks,
>>
>> Walter
>>
>>
>>>
>>
>>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Walter Lee Davis

2007-Apr-25 16:15 UTC

head link

Re: observe and bind question

Excellent. Thanks so much!

Walter

On Apr 24, 2007, at 7:56 PM, Michael Peters wrote:
>
> Walter Lee Davis wrote:
>> I have a little script to do expand-o headers within a single div:
>>
>> Event.observe(window,''load'',function(){
>> 	var headers =
$(''test'').getElementsBySelector(''h3'');
>> 	for (var i = headers.length - 1; i >= 0; i--){
>> 		headers[i].addClassName(''fakelink'');
>> 		headers[i].next(''div'').hide();
>> 		headers[i].observe(''click'',function(e){
>> 			this.next(''div'').toggle();
>> 		}.bind(headers[i]));
>> 	};
>> });
> [snip]
>> I''m
>> wondering if someone could take a moment to show me the cool-kids way
>> to do the same thing. I am guessing it is probably some one-word magic
>> like ''each'' or something like that...
>
> Event.observe(window,''load'',function(){
>    
$A($(''test'').getElementsBySelector(''h3'')).each(function(header)
{
>         header.addClassName(''fakelink'');
>         header.next(''div'').hide();
>         header.observe(''click'',function(e){
>              this.next(''div'').toggle();
>         }.bind(header));
>     };
> });
>
> -- 
> Michael Peters
> Developer
> Plus Three, LP
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Tom Gregory

2007-Apr-25 18:18 UTC

head link

Re: observe and bind question

You could shrink it (and speed it up, fractionally) even more.   
Element.hide returns the hidden element as a reference, so bind your  
observer to the div element...

Event.observe(window, "load", function() {
     $$("#test h3").each(function(element) {
        element.addClassName("fakelink");
        element.observe("click", function() {this.toggle();}.bind 
( element.next("div").hide() ));
     });
});

addClassName returns the element too, so you could chain even further  
if the fancy struck. It sacrifices readability though, for negligible  
gain.

Event.observe(window, "load", function() {
     $$("#test h3").each(function(element) {
        element.addClassName("fakelink").observe("click",
function()
{this.toggle();}.bind( element.next("div").hide() ));
     });
});


TAG

On Apr 24, 2007, at 6:46 PM, David Dashifen Kees wrote:
>
> This would be another option in addition to Michael''s:
>
> Event.observe(window, "load", function() {
>     $$("#test h3").each(function(element) {
>        element.addClassName("fakelink");
>        element.next("div").hide();
>        element.observe("click", function() {
this.next("div").toggle
> ();
> }.bind(element));
>     });
> });

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Apr 2007 - observe and bind question

observe and bind question

Re: observe and bind question

Re: observe and bind question

Re: observe and bind question

Re: observe and bind question

Re: observe and bind question