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