I am trying to figure out if this is the best way to implement this
functionality. And wonder if anyone can help. Here is the quick
markup
<div class="section">
<h1><a href="#"
class="section-heading">Buyer/Seller Materials</a></
h1>
<ul id="bsm_list" class="list">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
I am using UJS4Rails to call this after the DOM is initialized. Here
is the UJS code:
<%= apply_behaviour "ul.list", "this.style.display =
\"none\";" %>
<%= apply_behaviour "a.section-heading:click", "new
Effect.toggle($($($
($(this).parentNode).parentNode).descendants()[2]).id,
''blind'',
{duration: .2});" %>
The main part is the "new Effect.toggle($($($($
(this).parentNode).parentNode).descendants()[2]).id, ''blind'',
{duration: .2});"
The basic problem is how IE and Firefox differ from the length of
childNodes. The issue I want to tackle is not having to specifiy the
index "2"
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
On May 31, 4:28 am, Seth Buntin <sethtr...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I am trying to figure out if this is the best way to implement this > functionality. And wonder if anyone can help. Here is the quick > markup > > <div class="section"> > <h1><a href="#" class="section-heading">Buyer/Seller Materials</a></ > h1> > <ul id="bsm_list" class="list"> > <li>Test 1</li> > <li>Test 2</li> > <li>Test 3</li> > </ul> > </div> > > I am using UJS4Rails to call this after the DOM is initialized. Here > is the UJS code: > > <%= apply_behaviour "ul.list", "this.style.display = \"none\";" %> > <%= apply_behaviour "a.section-heading:click", "new Effect.toggle($($($ > ($(this).parentNode).parentNode).descendants()[2]).id, ''blind'', > {duration: .2});" %>this will refer to the a element, so there is no need for $() around that. parentNode is a standard DOM Core function, so no need for the next outer $(). To use descendants, you need to convert to a Prototype.js extended DOM element, so do that. Now we''ve reduced: $($($(this).parentNode).parentNode).descendants to: $(this.parentNode.parentNode).descendants There''s no point in getting an id to pass to $() to get back to exactly the same element. Since the descendants method returns an array that doesn''t include empty text nodes, you can do: new Effect.toggle( $(this.parentNode.parentNode).descendants()[2], ''blind'', {duration: .2} ); but it seems to make more sense to do: new Effect.toggle( $(this).up(''h1'').next(''ul''), ... ); or new Effect.toggle( $(this.parentNode).next(''ul''), ... );> The basic problem is how IE and Firefox differ from the length of > childNodes. The issue I want to tackle is not having to specifiy the > index "2"Firefox isn''t your issue (other browsers include empty text nodes too, you should always allow for quirks in HTML to DOM conversion). Try to never tie an effect to an exact DOM layout, keep it as loosely coupled as is reasonable (see above). -- Rob --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Thanks Rob. After coming up with this bit of code I knew that it was way too much than required and the tips you have provided has helped out. Thanks. Seth On May 30, 9:17 pm, RobG <r...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:> On May 31, 4:28 am, Seth Buntin <sethtr...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > I am trying to figure out if this is the best way to implement this > > functionality. And wonder if anyone can help. Here is the quick > > markup > > > <div class="section"> > > <h1><a href="#" class="section-heading">Buyer/Seller Materials</a></ > > h1> > > <ul id="bsm_list" class="list"> > > <li>Test 1</li> > > <li>Test 2</li> > > <li>Test 3</li> > > </ul> > > </div> > > > I am using UJS4Rails to call this after the DOM is initialized. Here > > is the UJS code: > > > <%= apply_behaviour "ul.list", "this.style.display = \"none\";" %> > > <%= apply_behaviour "a.section-heading:click", "new Effect.toggle($($($ > > ($(this).parentNode).parentNode).descendants()[2]).id, ''blind'', > > {duration: .2});" %> > > this will refer to the a element, so there is no need for $() around > that. > parentNode is a standard DOM Core function, so no need for the next > outer $(). To use descendants, you need to convert to a Prototype.js > extended DOM element, so do that. Now we''ve reduced: > > $($($(this).parentNode).parentNode).descendants > > to: > > $(this.parentNode.parentNode).descendants > > There''s no point in getting an id to pass to $() to get back to > exactly the same element. Since the descendants method returns an > array that doesn''t include empty text nodes, you can do: > > new Effect.toggle( $(this.parentNode.parentNode).descendants()[2], > ''blind'', > {duration: .2} > ); > > but it seems to make more sense to do: > > new Effect.toggle( $(this).up(''h1'').next(''ul''), > ... > ); > > or > > new Effect.toggle( $(this.parentNode).next(''ul''), > ... > ); > > > The basic problem is how IE and Firefox differ from the length of > > childNodes. The issue I want to tackle is not having to specifiy the > > index "2" > > Firefox isn''t your issue (other browsers include empty text nodes too, > you should always allow for quirks in HTML to DOM conversion). Try to > never tie an effect to an exact DOM layout, keep it as loosely coupled > as is reasonable (see above). > > -- > Rob--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---