<<liAccordianTest.html>>
Easy enough. Check out the new example. This version also avoids "jumpy"
animations when you click while a previous effect is still going. And also
dynamically sizes to the contents of the LI.
Just make sure that you set the LI to have a style sheet value of
overflow:hidden (added in my example)
The contents of the LI should be wrapped in a DIV (i.e. <LI><DIV> contents
</DIV></LI> )
Then do the height calculations based upon LI.childNode[0].offsetHeight
-Andrew Martinez
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Danial Tzadeh
Sent: Wednesday, May 24, 2006 10:05 AM
To: [email protected]
Subject: Re: [Rails-spinoffs] Changing the height of LI
elementstoachievesuchan effect?
It works great. Thank you very much Andrew. However, only one minor
point is left: normally I wouldn't know the OriginalHeight, as the
contents are requested from the database. Is there a way to let the
script find it out? something like height: auto ?
Regards
Danial
On 5/23/06, Martinez, Andrew <[EMAIL PROTECTED]> wrote:
>
>
> Sorry for the spam.
>
> This one should work better. I mis-named a variable.
>
> <<liAccordianTest.html>>
>
> -Andrew Martinez
>
> -----Original Message-----
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Martinez,
> Andrew
> Sent: Tuesday, May 23, 2006 10:34 AM
> To: [email protected]
> Subject: RE: [Rails-spinoffs] Changing the height of LI elements
> toachievesuchan effect?
>
> << File: liAccordianTest.html >> << File: ATT519124.txt >> Whipped this out
> in about 10minutes. Place in the same directory as prototype and
> scriptaculous.
>
> The only thing I don't like is that for the Effect.blindUp I override the
> default afterFinishInternal routine which normaly does effect.element.hide()
> and effect.element.undoclipping(). Obviously in this situation we don't want
> the element to just hide.
>
> The code is completely uncommented (sorry) but I figure if you read it you
> will learn/understand.
>
>
>
> <<liAccordianTest.html>>
> -Andrew Martinez
>
> -----Original Message-----
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Danial
> Tzadeh
> Sent: Tuesday, May 23, 2006 3:55 AM
> To: [email protected]
> Subject: Re: [Rails-spinoffs] Changing the height of LI elements
> toachievesuch an effect?
>
> Andrew, Tom, Jeremy;
> Thank you for your help so far. I finally came up with this code which works
> under "normal" circumstances, however it has two flaws, as listed after the
> code:
> [CODE]
> function toggleRows () {
> var inHeight = this.scrollHeight;
> var outHeight = 30;
> perc = (inHeight / outHeight)*100;
> percb = (outHeight/ inHeight )*100;
>
> if (this.up) {
> this.up = false;
> Effect.BlindUp(this, {transition: Effect.Transitions.sinoidal,
> scaleTo:percb, scaleFrom: 100, restoreAfterFinish: false,
> afterFinishInternal: function(){} });
> } else {
> this.up = true;
> Effect.BlindDown(this, {transition: Effect.Transitions.sinoidal,
> scaleFrom: 100, scaleTo:perc, restoreAfterFinish: false,
> afterFinishInternal: function(){} } );
> }
> }
>
> window.onload = function () {
> var cxNodeList = $('cxportfolio').getElementsByTagName('li');
> var cxnodes = $A(cxNodeList);
> cxnodes.each(function(cxnodes){
> cxnodes.onmousedown = toggleRows.bindAsEventListener(cxnodes);
> });
>
> }
> [/CODE]
> 1. When you click on anything inside the LI it triggers the function and
> slides up. So, links inside LI or text selection is not possible.
> 2. When you click on it midway, next time it contacts/expands more,
> probably because of this.scrollHeight being not 30 anymore at the
> expansion/contraction time. Hence, my reference heights are not valid
> anymore. { originalHeight: 400, originalWidth: 200 }, how to use them?
>
> Cheers,
> Danial
>
> On 5/22/06, Martinez, Andrew <[EMAIL PROTECTED]> wrote:
> >
> >
> >
> >
> > Wouldn't this be possible?
> >
> >
> >
> > All you would have to do is create a loop over the OL or UL's children and
> > apply a parallel combination effect of blindup/blind down. Instead of
> > looping you could also use a className attribute on the LI's and use
> > getElementByClassName. That way you don't even have to know the UL/OL
> > id/node.
> >
> >
> >
> > There is even an example on the scriptatculous wiki
> > (http://wiki.script.aculo.us/scriptaculous/show/accordion+feature
> > ).
> >
> >
> >
> > For more information look at the source or check out effect.scale; blind up
> > and blind down are just extensions of this simple effect. Since
> > blindup/blinddown are direct children of scale, you can use all of scale's
> > options during construction. You can specify the original height using the
> > scaleMode option: scaleMode: { originalHeight: 400, originalWidth: 200 }
> >
> >
> >
> >
> > -Andrew Martinez
> >
> >
> >
> >
> > -----Original Message-----
> > From: [EMAIL PROTECTED]
> > [mailto:[EMAIL PROTECTED]
> > Behalf Of Tom Gregory
> > Sent: Saturday, May 20, 2006 10:52 PM
> > To: [email protected]
> > Subject: Re: [Rails-spinoffs] Changing the height of LI elements to
> > achievesuch an effect?
> >
> >
> >
> > Scale values are in percentage. If you need to store a specific (hidden)
> > height for each, then calculate what that percentage is. To get the effect
> > you asked for, however, doesn't require that sort of precision.
> >
> >
> >
> > It's a bit disingenuous to say "I'm familiar with both libraries", then
> > suggest he didn't answer your question, when in fact he did. Any more work
> > on his part, and he's actually building it for you, something I'm sure he's
> > not paid enough for. That said, the following snippet accomplishes the
> > effect:
> >
> >
> >
> >
> >
> > <style type="text/css">
> >
> > li {
> >
> > overflow: hidden;
> >
> > height: 30px;
> >
> > }
> >
> > #li1 {background-color: #bdb;}
> >
> > </style>
> >
> > <script type="text/javascript" src="js/prototype.js"></script>
> >
> > <script type="text/javascript"
> > src="js/scriptaculous.js?loadïfects"></script>
> >
> > <script type="text/javascript">
> >
> > function toggle () {
> >
> > if (this.up) {
> >
> > this.up = false;
> >
> > Effect.BlindUp(this, {scaleTo:20, scaleFrom: 100,
> > restoreAfterFinish: false, afterFinishInternal: function(){} });
> >
> >
> > } else {
> >
> > this.up = true;
> >
> > Effect.BlindDown(this, {scaleFrom: 100, scaleTo:500,
> > restoreAfterFinish: false, afterFinishInternal: function(){} } );
> >
> > }
> >
> > }
> >
> >
> >
> > window.onload = function () {
> >
> > var listItem = $("li1");
> >
> > listItem.onmousedown = toggle.bindAsEventListener(listItem);
> >
> > }
> >
> > </script>
> >
> >
> >
> > You may also wish to take a look at the accordion effect done w/
> > Scriptaculous at
> > http://wiki.script.aculo.us/scriptaculous/show/accordion+feature
> >
> >
> >
> > Documentation for Effect.BlindDown is at
> > http://wiki.script.aculo.us/scriptaculous/show/Effect.BlindDown,
> > although it did require looking at the source to get all of the options.
> >
> >
> >
> >
> >
> > TAG
> >
> >
> >
> > On May 20, 2006, at 6:18 PM, Danial Tzadeh wrote:
> >
> >
> >
> >
> >
> > Jeremy,
> >
> > Thank you for your advice. I am already familiar with both libraries.
> > However, the part I am looking for is that first it is at special height
> > (say 100) and then it goes to full height upon click and back. Also it
> > renders all the LI and you don't need to address all one by one.
> >
> > Danial
> >
> > On 5/20/06, Jeremy Kitchen <[EMAIL PROTECTED]> wrote:
> >
> >
> > On Saturday 20 May 2006 03:29, Danial Taherzadeh wrote:
> > > Hi Everybody,
> > >
> > > I was wondering if there is such a work done with Scriptaculous/Prototype
> > > before and if not how to achieve it?
> >
> > look at Effect.BlindDown and Effect.BlindUp in scriptaculous.
> >
> > -Jeremy
> >
> >
> > _______________________________________________
> > Rails-spinoffs mailing list
> > [email protected]
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
> >
> >
> >
> >
> >
> > _______________________________________________
> >
> > Rails-spinoffs mailing list
> >
> > [email protected]
> >
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
> >
> >
> > _______________________________________________
> > Rails-spinoffs mailing list
> > [email protected]
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
> >
> >
> _______________________________________________
> Rails-spinoffs mailing list
> [email protected]
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
> _______________________________________________
> Rails-spinoffs mailing list
> [email protected]
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
>
>
>
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Title: Accordian Test
Tallest
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
Mid
2
2
2
2
2
2
2
2
2
2
2
2
Shortest
3
3
3
3
3
3
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
