Hello boys and girls In the ever-loving spirit of OSS, here''s another feature for s.a.u. In particular it''s called Effect.Accordion, and is a scriptaculified version of openrico''s Accordion. Work in progress, I''ll submit further modifications as the come in, but this is 90% of what needs to be done. I anticipate some bugs when I start using it more. Tested on FF1.5 and IE6/7. Comments are welcome, and in fact solicited. I''d appreciate all bugfixes sent either to this list or myself. Yours, -Rob PS. This isn''t a patch, it''s just JS. However this server won''t allow attachments with a .js extension, which is, well, ridiculous. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Oops, should provide an example:
<div id="accordion">
<div>
<h3>Heading></h3>
<div>
<p>Content geoes here</p>
<p>Etc..</p>
</div>
</div>
<div>
<h3>Another heading</h3>
<div>
<p>Yet more tatsy content</p>
<p>Rinse, repeat</p>
</div>
</div>
</div>
<script>
new Effect.Accordion("accordion");
</script>
-Rob
Robin Haswell wrote:> Hello boys and girls
>
> In the ever-loving spirit of OSS, here''s another feature for
s.a.u.
>
> In particular it''s called Effect.Accordion, and is a
scriptaculified
> version of openrico''s Accordion.
>
> Work in progress, I''ll submit further modifications as the come
in, but
> this is 90% of what needs to be done. I anticipate some bugs when I
> start using it more.
>
> Tested on FF1.5 and IE6/7.
>
> Comments are welcome, and in fact solicited. I''d appreciate all
bugfixes
> sent either to this list or myself.
>
> Yours,
>
> -Rob
>
> PS. This isn''t a patch, it''s just JS. However this server
won''t allow
> attachments with a .js extension, which is, well, ridiculous.
>
>
> ------------------------------------------------------------------------
>
> Effect.Accordion = Class.create();
> Effect.Accordion.prototype = {
> initialize: function(element, options) {
> this.container = $(element);
> this.options = Object.extend({
> paneltag: "div", // The tag of the panel containers
> headingtag: "h3", // The tag of the headings
> bodytag: "div", // The body
> initdisplay: 0 // Index of the panel to show first
> }, options || {});
> this.options.paneltag = this.options.paneltag.toUpperCase();
> this.options.headingtag = this.options.headingtag.toUpperCase();
> this.options.bodytag = this.options.bodytag.toUpperCase();
> // We should probably sort out some event listeners
> this.panels = Array();
> panels = this.container.childNodes;
> pl = panels.length;
> n = 0;
> for (i = 0; i < pl; i++) {
> if (panels[i].nodeName != this.options.paneltag)
> continue;
> this.panels[n] = panels[i];
> n++;
> }
> pl = this.panels.length;
> this.clickHandler = this.onClickHeading.bindAsEventListener(this);
> for (i = 0; i < pl; i++) {
> heading = this.getPanelHeading(this.panels[i]);
> if (this.options.initdisplay != i) {
> body = this.getPanelBody(this.panels[i]);
> Element.hide(body);
> } else {
> this.curvisible = i;
> }
> Event.observe(heading, "click", this.clickHandler);
> }
> },
> onClickHeading: function(ev) {
> el = Event.element(ev);
> panel = el.parentNode;
> if (panel == this.panels[this.curvisible])
> return;
> newborn = this.getPanelBody(panel);
> victim = this.getPanelBody(this.panels[this.curvisible]);
> this.curvisible = this.getPanelNumber(panel);
> new Effect.Parallel (
> [
> Effect.BlindUp(victim),
> Effect.BlindDown(newborn)
> ], {
> duration: 0.1
> });
> },
> getPanelHeading: function(el) {
> return el.getElementsByTagName(this.options.headingtag)[0];
> },
> getPanelBody: function(el) {
> n = 0;
> if (this.options.bodytag == this.options.headingtag)
> n = 1;
> return el.getElementsByTagName(this.options.bodytag)[n];
> },
> /*
> getPanelBody: function(el) { // FIXME: Longer version to compensate for
the body tag appearing in the heading tag. This sliently halts execution
however. Fix if you need it.
> n = 0;
> if (this.options.bodytag == this.options.headingtag)
> n = 1;
> children = el.childNodes;
> cl = children.length;
> for (i = 0; i < cl; i++) {
> if (children[i].nodeName == this.options.bodytag) {
> if (n == 0)
> return children[i];
> else
> n = n-1;
> }
> }
> }
> */
> getPanelNumber: function(el) {
> pl = this.panels.length;
> for (i = 0; i < pl; i++) {
> if (this.panels[i] == el)
> return i;
> }
> return "Not found";
> }
> };
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I love real live examples, do you have one ? :) On 3/3/06, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org> wrote:> Oops, should provide an example: > > <div id="accordion"> > <div> > <h3>Heading></h3> > <div> > <p>Content geoes here</p> > <p>Etc..</p> > </div> > </div> > <div> > <h3>Another heading</h3> > <div> > <p>Yet more tatsy content</p> > <p>Rinse, repeat</p> > </div> > </div> > </div> > <script> > new Effect.Accordion("accordion"); > </script> > > -Rob > > Robin Haswell wrote: > > Hello boys and girls > > > > In the ever-loving spirit of OSS, here''s another feature for s.a.u. > > > > In particular it''s called Effect.Accordion, and is a scriptaculified > > version of openrico''s Accordion. > > > > Work in progress, I''ll submit further modifications as the come in, but > > this is 90% of what needs to be done. I anticipate some bugs when I > > start using it more. > > > > Tested on FF1.5 and IE6/7. > > > > Comments are welcome, and in fact solicited. I''d appreciate all bugfixes > > sent either to this list or myself. > > > > Yours, > > > > -Rob > > > > PS. This isn''t a patch, it''s just JS. However this server won''t allow > > attachments with a .js extension, which is, well, ridiculous. > > > > > > ------------------------------------------------------------------------ > > > > Effect.Accordion = Class.create(); > > Effect.Accordion.prototype = { > > initialize: function(element, options) { > > this.container = $(element); > > this.options = Object.extend({ > > paneltag: "div", // The tag of the panel containers > > headingtag: "h3", // The tag of the headings > > bodytag: "div", // The body > > initdisplay: 0 // Index of the panel to show first > > }, options || {}); > > this.options.paneltag = this.options.paneltag.toUpperCase(); > > this.options.headingtag = this.options.headingtag.toUpperCase(); > > this.options.bodytag = this.options.bodytag.toUpperCase(); > > // We should probably sort out some event listeners > > this.panels = Array(); > > panels = this.container.childNodes; > > pl = panels.length; > > n = 0; > > for (i = 0; i < pl; i++) { > > if (panels[i].nodeName != this.options.paneltag) > > continue; > > this.panels[n] = panels[i]; > > n++; > > } > > pl = this.panels.length; > > this.clickHandler = this.onClickHeading.bindAsEventListener(this); > > for (i = 0; i < pl; i++) { > > heading = this.getPanelHeading(this.panels[i]); > > if (this.options.initdisplay != i) { > > body = this.getPanelBody(this.panels[i]); > > Element.hide(body); > > } else { > > this.curvisible = i; > > } > > Event.observe(heading, "click", this.clickHandler); > > } > > }, > > onClickHeading: function(ev) { > > el = Event.element(ev); > > panel = el.parentNode; > > if (panel == this.panels[this.curvisible]) > > return; > > newborn = this.getPanelBody(panel); > > victim = this.getPanelBody(this.panels[this.curvisible]); > > this.curvisible = this.getPanelNumber(panel); > > new Effect.Parallel ( > > [ > > Effect.BlindUp(victim), > > Effect.BlindDown(newborn) > > ], { > > duration: 0.1 > > }); > > }, > > getPanelHeading: function(el) { > > return el.getElementsByTagName(this.options.headingtag)[0]; > > }, > > getPanelBody: function(el) { > > n = 0; > > if (this.options.bodytag == this.options.headingtag) > > n = 1; > > return el.getElementsByTagName(this.options.bodytag)[n]; > > }, > > /* > > getPanelBody: function(el) { // FIXME: Longer version to compensate for the body tag appearing in the heading tag. This sliently halts execution however. Fix if you need it. > > n = 0; > > if (this.options.bodytag == this.options.headingtag) > > n = 1; > > children = el.childNodes; > > cl = children.length; > > for (i = 0; i < cl; i++) { > > if (children[i].nodeName == this.options.bodytag) { > > if (n == 0) > > return children[i]; > > else > > n = n-1; > > } > > } > > } > > */ > > getPanelNumber: function(el) { > > pl = this.panels.length; > > for (i = 0; i < pl; i++) { > > if (this.panels[i] == el) > > return i; > > } > > return "Not found"; > > } > > }; > > > > > > ------------------------------------------------------------------------ > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >
Sorry, it would be unprofessional of me to give my example (as I wrote this for work), but it''s intended to be identical to: http://openrico.org/rico/demos.page?demo=ricoAccordion.html ..eventually. The only work left to be done is work out whether we wanna expand the container (#accordion) to the maximum size of the content, or use overflow:auto on the bodies. -Rob Nicolas Terray wrote:> I love real live examples, do you have one ? :) > > On 3/3/06, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org> wrote: >> Oops, should provide an example: >> >> <div id="accordion"> >> <div> >> <h3>Heading></h3> >> <div> >> <p>Content geoes here</p> >> <p>Etc..</p> >> </div> >> </div> >> <div> >> <h3>Another heading</h3> >> <div> >> <p>Yet more tatsy content</p> >> <p>Rinse, repeat</p> >> </div> >> </div> >> </div> >> <script> >> new Effect.Accordion("accordion"); >> </script> >> >> -Rob >> >> Robin Haswell wrote: >>> Hello boys and girls >>> >>> In the ever-loving spirit of OSS, here''s another feature for s.a.u. >>> >>> In particular it''s called Effect.Accordion, and is a scriptaculified >>> version of openrico''s Accordion. >>> >>> Work in progress, I''ll submit further modifications as the come in, but >>> this is 90% of what needs to be done. I anticipate some bugs when I >>> start using it more. >>> >>> Tested on FF1.5 and IE6/7. >>> >>> Comments are welcome, and in fact solicited. I''d appreciate all bugfixes >>> sent either to this list or myself. >>> >>> Yours, >>> >>> -Rob >>> >>> PS. This isn''t a patch, it''s just JS. However this server won''t allow >>> attachments with a .js extension, which is, well, ridiculous. >>> >>> >>> ------------------------------------------------------------------------ >>> >>> Effect.Accordion = Class.create(); >>> Effect.Accordion.prototype = { >>> initialize: function(element, options) { >>> this.container = $(element); >>> this.options = Object.extend({ >>> paneltag: "div", // The tag of the panel containers >>> headingtag: "h3", // The tag of the headings >>> bodytag: "div", // The body >>> initdisplay: 0 // Index of the panel to show first >>> }, options || {}); >>> this.options.paneltag = this.options.paneltag.toUpperCase(); >>> this.options.headingtag = this.options.headingtag.toUpperCase(); >>> this.options.bodytag = this.options.bodytag.toUpperCase(); >>> // We should probably sort out some event listeners >>> this.panels = Array(); >>> panels = this.container.childNodes; >>> pl = panels.length; >>> n = 0; >>> for (i = 0; i < pl; i++) { >>> if (panels[i].nodeName != this.options.paneltag) >>> continue; >>> this.panels[n] = panels[i]; >>> n++; >>> } >>> pl = this.panels.length; >>> this.clickHandler = this.onClickHeading.bindAsEventListener(this); >>> for (i = 0; i < pl; i++) { >>> heading = this.getPanelHeading(this.panels[i]); >>> if (this.options.initdisplay != i) { >>> body = this.getPanelBody(this.panels[i]); >>> Element.hide(body); >>> } else { >>> this.curvisible = i; >>> } >>> Event.observe(heading, "click", this.clickHandler); >>> } >>> }, >>> onClickHeading: function(ev) { >>> el = Event.element(ev); >>> panel = el.parentNode; >>> if (panel == this.panels[this.curvisible]) >>> return; >>> newborn = this.getPanelBody(panel); >>> victim = this.getPanelBody(this.panels[this.curvisible]); >>> this.curvisible = this.getPanelNumber(panel); >>> new Effect.Parallel ( >>> [ >>> Effect.BlindUp(victim), >>> Effect.BlindDown(newborn) >>> ], { >>> duration: 0.1 >>> }); >>> }, >>> getPanelHeading: function(el) { >>> return el.getElementsByTagName(this.options.headingtag)[0]; >>> }, >>> getPanelBody: function(el) { >>> n = 0; >>> if (this.options.bodytag == this.options.headingtag) >>> n = 1; >>> return el.getElementsByTagName(this.options.bodytag)[n]; >>> }, >>> /* >>> getPanelBody: function(el) { // FIXME: Longer version to compensate for the body tag appearing in the heading tag. This sliently halts execution however. Fix if you need it. >>> n = 0; >>> if (this.options.bodytag == this.options.headingtag) >>> n = 1; >>> children = el.childNodes; >>> cl = children.length; >>> for (i = 0; i < cl; i++) { >>> if (children[i].nodeName == this.options.bodytag) { >>> if (n == 0) >>> return children[i]; >>> else >>> n = n-1; >>> } >>> } >>> } >>> */ >>> getPanelNumber: function(el) { >>> pl = this.panels.length; >>> for (i = 0; i < pl; i++) { >>> if (this.panels[i] == el) >>> return i; >>> } >>> return "Not found"; >>> } >>> }; >>> >>> >>> ------------------------------------------------------------------------ >>> >>> _______________________________________________ >>> Rails-spinoffs mailing list >>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> _______________________________________________ >> Rails-spinoffs mailing list >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
I just had to see this in action so I put up an example of Robin''s excellent work here: http://turnstudio.com/accordian.html It''s butt-ugly but it at least shows the different elements in action. also, I made the h3 use a link cursor - that''s not actually part of the accordian code. - Danger On 3/3/06, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org> wrote:> > Sorry, it would be unprofessional of me to give my example (as I wrote > this for work), but it''s intended to be identical to: > > http://openrico.org/rico/demos.page?demo=ricoAccordion.html > > ..eventually. The only work left to be done is work out whether we wanna > expand the container (#accordion) to the maximum size of the content, or > use overflow:auto on the bodies. > > -Rob > > Nicolas Terray wrote: > > I love real live examples, do you have one ? :) > > > > On 3/3/06, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org> wrote: > >> Oops, should provide an example: > >> > >> <div id="accordion"> > >> <div> > >> <h3>Heading></h3> > >> <div> > >> <p>Content geoes here</p> > >> <p>Etc..</p> > >> </div> > >> </div> > >> <div> > >> <h3>Another heading</h3> > >> <div> > >> <p>Yet more tatsy content</p> > >> <p>Rinse, repeat</p> > >> </div> > >> </div> > >> </div> > >> <script> > >> new Effect.Accordion("accordion"); > >> </script> > >> > >> -Rob > >> > >> Robin Haswell wrote: > >>> Hello boys and girls > >>> > >>> In the ever-loving spirit of OSS, here''s another feature for s.a.u. > >>> > >>> In particular it''s called Effect.Accordion, and is a scriptaculified > >>> version of openrico''s Accordion. > >>> > >>> Work in progress, I''ll submit further modifications as the come in, > but > >>> this is 90% of what needs to be done. I anticipate some bugs when I > >>> start using it more. > >>> > >>> Tested on FF1.5 and IE6/7. > >>> > >>> Comments are welcome, and in fact solicited. I''d appreciate all > bugfixes > >>> sent either to this list or myself. > >>> > >>> Yours, > >>> > >>> -Rob > >>> > >>> PS. This isn''t a patch, it''s just JS. However this server won''t allow > >>> attachments with a .js extension, which is, well, ridiculous. > >>> > >>> > >>> > ------------------------------------------------------------------------ > >>> > >>> Effect.Accordion = Class.create(); > >>> Effect.Accordion.prototype = { > >>> initialize: function(element, options) { > >>> this.container = $(element); > >>> this.options = Object.extend({ > >>> paneltag: "div", // The tag of the panel > containers > >>> headingtag: "h3", // The tag of the headings > >>> bodytag: "div", // The body > >>> initdisplay: 0 // Index of the panel to show > first > >>> }, options || {}); > >>> this.options.paneltag > this.options.paneltag.toUpperCase(); > >>> this.options.headingtag > this.options.headingtag.toUpperCase(); > >>> this.options.bodytag = this.options.bodytag.toUpperCase > (); > >>> // We should probably sort out some event listeners > >>> this.panels = Array(); > >>> panels = this.container.childNodes; > >>> pl = panels.length; > >>> n = 0; > >>> for (i = 0; i < pl; i++) { > >>> if (panels[i].nodeName != this.options.paneltag) > >>> continue; > >>> this.panels[n] = panels[i]; > >>> n++; > >>> } > >>> pl = this.panels.length; > >>> this.clickHandler > this.onClickHeading.bindAsEventListener(this); > >>> for (i = 0; i < pl; i++) { > >>> heading = this.getPanelHeading(this.panels[i]); > >>> if (this.options.initdisplay != i) { > >>> body = this.getPanelBody(this.panels > [i]); > >>> Element.hide(body); > >>> } else { > >>> this.curvisible = i; > >>> } > >>> Event.observe(heading, "click", > this.clickHandler); > >>> } > >>> }, > >>> onClickHeading: function(ev) { > >>> el = Event.element(ev); > >>> panel = el.parentNode; > >>> if (panel == this.panels[this.curvisible]) > >>> return; > >>> newborn = this.getPanelBody(panel); > >>> victim = this.getPanelBody(this.panels[this.curvisible > ]); > >>> this.curvisible = this.getPanelNumber(panel); > >>> new Effect.Parallel ( > >>> [ > >>> Effect.BlindUp(victim), > >>> Effect.BlindDown(newborn) > >>> ], { > >>> duration: 0.1 > >>> }); > >>> }, > >>> getPanelHeading: function(el) { > >>> return el.getElementsByTagName(this.options.headingtag > )[0]; > >>> }, > >>> getPanelBody: function(el) { > >>> n = 0; > >>> if (this.options.bodytag == this.options.headingtag) > >>> n = 1; > >>> return el.getElementsByTagName(this.options.bodytag)[n]; > >>> }, > >>> /* > >>> getPanelBody: function(el) { // FIXME: Longer version to > compensate for the body tag appearing in the heading tag. This sliently > halts execution however. Fix if you need it. > >>> n = 0; > >>> if (this.options.bodytag == this.options.headingtag) > >>> n = 1; > >>> children = el.childNodes; > >>> cl = children.length; > >>> for (i = 0; i < cl; i++) { > >>> if (children[i].nodeName == this.options.bodytag) > { > >>> if (n == 0) > >>> return children[i]; > >>> else > >>> n = n-1; > >>> } > >>> } > >>> } > >>> */ > >>> getPanelNumber: function(el) { > >>> pl = this.panels.length; > >>> for (i = 0; i < pl; i++) { > >>> if (this.panels[i] == el) > >>> return i; > >>> } > >>> return "Not found"; > >>> } > >>> }; > >>> > >>> > >>> > ------------------------------------------------------------------------ > >>> > >>> _______________________________________________ > >>> Rails-spinoffs mailing list > >>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > >>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > >> _______________________________________________ > >> Rails-spinoffs mailing list > >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > >> > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Cheers, good stuff. Yeah I had a bit of a debate over the cursor thing. I thought it would be easy enough for other people to do it so I left it. Glad you like it. I''ll probably submit a finished version on monday. I''m going to just add an option for "Fixed height" and let people set it if they want it. I think the accordion looks smoother if it doesn''t bounce all over the place. -Rob Danger Stevens wrote:> I just had to see this in action so I put up an example of Robin''s > excellent work here: > http://turnstudio.com/accordian.html > > It''s butt-ugly but it at least shows the different elements in action. > also, I made the h3 use a link cursor - that''s not actually part of the > accordian code. > > - Danger > > > On 3/3/06, *Robin Haswell* < rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org > <mailto:rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org>> wrote: > > Sorry, it would be unprofessional of me to give my example (as I wrote > this for work), but it''s intended to be identical to: > > http://openrico.org/rico/demos.page?demo=ricoAccordion.html > > ..eventually. The only work left to be done is work out whether we > wanna > expand the container (#accordion) to the maximum size of the content, or > use overflow:auto on the bodies. > > -Rob > > Nicolas Terray wrote: > > I love real live examples, do you have one ? :) > > > > On 3/3/06, Robin Haswell <rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org > <mailto:rob-gyMb1R/nBgNh8AIihN9Rc9BPR1lH4CV8@public.gmane.org>> wrote: > >> Oops, should provide an example: > >> > >> <div id="accordion"> > >> <div> > >> <h3>Heading></h3> > >> <div> > >> <p>Content geoes here</p> > >> <p>Etc..</p> > >> </div> > >> </div> > >> <div> > >> <h3>Another heading</h3> > >> <div> > >> <p>Yet more tatsy content</p> > >> <p>Rinse, repeat</p> > >> </div> > >> </div> > >> </div> > >> <script> > >> new Effect.Accordion ("accordion"); > >> </script> > >> > >> -Rob > >> > >> Robin Haswell wrote: > >>> Hello boys and girls > >>> > >>> In the ever-loving spirit of OSS, here''s another feature for s.a.u. > >>> > >>> In particular it''s called Effect.Accordion, and is a > scriptaculified > >>> version of openrico''s Accordion. > >>> > >>> Work in progress, I''ll submit further modifications as the come > in, but > >>> this is 90% of what needs to be done. I anticipate some bugs when I > >>> start using it more. > >>> > >>> Tested on FF1.5 and IE6/7. > >>> > >>> Comments are welcome, and in fact solicited. I''d appreciate all > bugfixes > >>> sent either to this list or myself. > >>> > >>> Yours, > >>> > >>> -Rob > >>> > >>> PS. This isn''t a patch, it''s just JS. However this server won''t > allow > >>> attachments with a .js extension, which is, well, ridiculous. > >>> > >>> > >>> > ------------------------------------------------------------------------ > >>> > >>> Effect.Accordion = Class.create(); > >>> Effect.Accordion.prototype = { > >>> initialize: function(element, options) { > >>> this.container = $(element); > >>> this.options = Object.extend({ > >>> paneltag: "div", // The tag of the panel > containers > >>> headingtag: "h3", // The tag of the headings > >>> bodytag: "div", // The body > >>> initdisplay: 0 // Index of the panel to > show first > >>> }, options || {}); > >>> this.options.paneltag > this.options.paneltag.toUpperCase(); > >>> this.options.headingtag > this.options.headingtag.toUpperCase(); > >>> this.options.bodytag > this.options.bodytag.toUpperCase (); > >>> // We should probably sort out some event listeners > >>> this.panels = Array(); > >>> panels = this.container.childNodes; > >>> pl = panels.length; > >>> n = 0; > >>> for (i = 0; i < pl; i++) { > >>> if (panels[i].nodeName !> this.options.paneltag) > >>> continue; > >>> this.panels[n] = panels[i]; > >>> n++; > >>> } > >>> pl = this.panels.length; > >>> this.clickHandler > this.onClickHeading.bindAsEventListener(this); > >>> for (i = 0; i < pl; i++) { > >>> heading > this.getPanelHeading(this.panels[i]); > >>> if ( this.options.initdisplay != i) { > >>> body > this.getPanelBody(this.panels[i]); > >>> Element.hide(body); > >>> } else { > >>> this.curvisible = i; > >>> } > >>> Event.observe(heading, "click", > this.clickHandler); > >>> } > >>> }, > >>> onClickHeading: function(ev) { > >>> el = Event.element(ev); > >>> panel = el.parentNode; > >>> if (panel == this.panels[this.curvisible]) > >>> return; > >>> newborn = this.getPanelBody(panel); > >>> victim > this.getPanelBody(this.panels[this.curvisible ]); > >>> this.curvisible = this.getPanelNumber(panel); > >>> new Effect.Parallel ( > >>> [ > >>> Effect.BlindUp(victim), > >>> Effect.BlindDown(newborn) > >>> ], { > >>> duration: 0.1 > >>> }); > >>> }, > >>> getPanelHeading: function(el) { > >>> return > el.getElementsByTagName(this.options.headingtag)[0]; > >>> }, > >>> getPanelBody: function(el) { > >>> n = 0; > >>> if ( this.options.bodytag == this.options.headingtag) > >>> n = 1; > >>> return > el.getElementsByTagName(this.options.bodytag)[n]; > >>> }, > >>> /* > >>> getPanelBody: function(el) { // FIXME: Longer version to > compensate for the body tag appearing in the heading tag. This > sliently halts execution however. Fix if you need it. > >>> n = 0; > >>> if (this.options.bodytag == this.options.headingtag) > >>> n = 1; > >>> children = el.childNodes; > >>> cl = children.length ; > >>> for (i = 0; i < cl; i++) { > >>> if (children[i].nodeName => this.options.bodytag) { > >>> if (n == 0) > >>> return children[i]; > >>> else > >>> n = n-1; > >>> } > >>> } > >>> } > >>> */ > >>> getPanelNumber: function(el) { > >>> pl = this.panels.length; > >>> for (i = 0; i < pl; i++) { > >>> if (this.panels [i] == el) > >>> return i; > >>> } > >>> return "Not found"; > >>> } > >>> }; > >>> > >>> > >>> > ------------------------------------------------------------------------ > >>> > >>> _______________________________________________ > >>> Rails-spinoffs mailing list > >>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > <mailto:Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> > >>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > <http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs> > >> _______________________________________________ > >> Rails-spinoffs mailing list > >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > <mailto:Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> > >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > >> > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > <mailto:Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > <http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs> > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > <mailto:Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > ------------------------------------------------------------------------ > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Not sure if you guys have seen this before: Sometime back, Karou had posted an accordion implementation using prototype/scriptaculous. Here it is: http://script.spinelz.org/accordion.html Regards, Mandy.