Danial Taherzadeh
2006-May-20 10:29 UTC
Changing the height of LI elements to achieve such an effect?
Hi Everybody, I was wondering if there is such a work done with Scriptaculous/Prototype before and if not how to achieve it? Example : http://www.anatolip.com/ It is done with codes borrowed from moofx and his own codes. Thanks in advance Danial _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Jeremy Kitchen
2006-May-20 18:48 UTC
Re: Changing the height of LI elements to achieve such an effect?
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-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Danial Tzadeh
2006-May-21 00:18 UTC
Re: Changing the height of LI elements to achieve such an effect?
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 <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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
Tom Gregory
2006-May-21 02:52 UTC
Re: Changing the height of LI elements to achieve such 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=effects"></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
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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
Martinez, Andrew
2006-May-22 18:22 UTC
RE: Changing the height of LI elements to achievesuch an effect?
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>
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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
Behalf Of Tom Gregory
Sent: Saturday, May 20, 2006 10:52 PM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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=effects"></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 <
kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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
Danial Tzadeh
2006-May-23 07:55 UTC
Re: Changing the height of LI elements to achievesuch 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
<Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org>
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:
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
> Behalf Of Tom Gregory
> Sent: Saturday, May 20, 2006 10:52 PM
> To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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=effects"></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
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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
>
>
>
Martinez, Andrew
2006-May-23 14:34 UTC
RE: Changing the height of LI elements toachievesuch an effect?
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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Danial Tzadeh
Sent: Tuesday, May 23, 2006 3:55 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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
<Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org>
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:
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
> Behalf Of Tom Gregory
> Sent: Saturday, May 20, 2006 10:52 PM
> To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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
Martinez, Andrew
2006-May-23 14:45 UTC
RE: Changing the height of LI elements toachievesuchan effect?
Sorry for the spam.
This one should work better. I mis-named a variable.
<<liAccordianTest.html>>
-Andrew Martinez
-----Original Message-----
From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Martinez, Andrew
Sent: Tuesday, May 23, 2006 10:34 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]
On Behalf Of Danial Tzadeh
Sent: Tuesday, May 23, 2006 3:55 AM
To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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
<Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org>
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:
rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>
[mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On
> Behalf Of Tom Gregory
> Sent: Saturday, May 20, 2006 10:52 PM
> To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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
<kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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
Danial Tzadeh
2006-May-24 14:05 UTC
Re: Changing the height of LI elements toachievesuchan 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 <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> wrote:> > > Sorry for the spam. > > This one should work better. I mis-named a variable. > > <<liAccordianTest.html>> > > -Andrew Martinez > > -----Original Message----- > From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Martinez, Andrew > Sent: Tuesday, May 23, 2006 10:34 AM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Danial Tzadeh > Sent: Tuesday, May 23, 2006 3:55 AM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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 <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> 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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On > > Behalf Of Tom Gregory > > Sent: Saturday, May 20, 2006 10:52 PM > > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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 <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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 > > > >
Martinez, Andrew
2006-May-24 15:31 UTC
RE: Changing the height of LI elementstoachievesuchan effect?
<<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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Danial Tzadeh Sent: Wednesday, May 24, 2006 10:05 AM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org 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 <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> wrote:> > > Sorry for the spam. > > This one should work better. I mis-named a variable. > > <<liAccordianTest.html>> > > -Andrew Martinez > > -----Original Message----- > From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Martinez, Andrew > Sent: Tuesday, May 23, 2006 10:34 AM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Danial Tzadeh > Sent: Tuesday, May 23, 2006 3:55 AM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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 <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> 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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On > > Behalf Of Tom Gregory > > Sent: Saturday, May 20, 2006 10:52 PM > > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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 <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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 > > > >_______________________________________________ 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
Danial Tzadeh
2006-May-24 17:26 UTC
Re: Changing the height of LI elementstoachievesuchan effect?
It couldn''t work better than this. Kudos! Andrew. Danial On 5/24/06, Martinez, Andrew <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> wrote:> > > <<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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Danial Tzadeh > Sent: Wednesday, May 24, 2006 10:05 AM > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > 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 <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> wrote: > > > > > > Sorry for the spam. > > > > This one should work better. I mis-named a variable. > > > > <<liAccordianTest.html>> > > > > -Andrew Martinez > > > > -----Original Message----- > > From: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Martinez, Andrew > > Sent: Tuesday, May 23, 2006 10:34 AM > > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org] On Behalf Of Danial Tzadeh > > Sent: Tuesday, May 23, 2006 3:55 AM > > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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 <Andrew.Martinez-9sMr025MA47QT0dZR+AlfA@public.gmane.org> 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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > > [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On > > > Behalf Of Tom Gregory > > > Sent: Saturday, May 20, 2006 10:52 PM > > > To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.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 <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> 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-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 > > > > > > > > > _______________________________________________ > 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 > > > >