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=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 <[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
