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* < [EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>> 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 <[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>> 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@lists.rubyonrails.org
<mailto:Rails-spinoffs@lists.rubyonrails.org>
>>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
<http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
<mailto:Rails-spinoffs@lists.rubyonrails.org>
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
<mailto:Rails-spinoffs@lists.rubyonrails.org>
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
<http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
<mailto:Rails-spinoffs@lists.rubyonrails.org>
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
------------------------------------------------------------------------
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
