hello, I''m trying to use some scriptaculous effect but I have a issue
with that.
I have 3 div and I would like to be able change their size once
clicked so, I used Effect.Grow
[code]
<div id="first" onclick="new Effect.Grow(this, {from: 0.5, to:
1.0 })"><span>demo 1</span></div>
<div id="second" onclick="new Effect.Grow(this, {from: 0.5,
to:
1.0 })"><span>demo 2</span></div>
<div id="third" onclick="new Effect.Grow(this, {from: 0.5, to:
1.0 })"><span>demo 3</span></div>
[/code]
Now I would like that when you click again a div, it becomes again
small; I guess I should use Effect.Shrink but how can I do that ? I
mean I can''t add it to onClick.
Moreover, I would like that when I click a div if there is a grown
one, that becomes small before the clicked one grows. How can I do
that?
Thank you and have a nice day!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Have the onclick call a function instead. Have the function figure out
what needs to be done with the DIV. You may want to use Effect.Morph
instead and have your DIV morph between two styles; one big and one
small.
There are many ways to do it. This is one example:
<div id="first"
onclick="thingy(''first'')"><span>demo
1</span></div>
javascript:
function thingy(e) {
if($(e).hasClassName(''big'')) {
new Effect.Morph(e,{style:''height:80px''})
$(''e'').addClassName(''big'')
}
else {
new Effect.Morph(e,{style:''height:20px''})
$(''e'').removeClassName(''big'')
}
}
On Feb 25, 6:11 pm, macsig
<sigbac...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> hello, I''m trying to use some scriptaculous effect but I have a
issue
> with that.
>
> I have 3 div and I would like to be able change their size once
> clicked so, I used Effect.Grow
>
> [code]
> <div id="first" onclick="new Effect.Grow(this, {from:
0.5, to:
> 1.0 })"><span>demo 1</span></div>
> <div id="second" onclick="new Effect.Grow(this, {from:
0.5, to:
> 1.0 })"><span>demo 2</span></div>
> <div id="third" onclick="new Effect.Grow(this, {from:
0.5, to:
> 1.0 })"><span>demo 3</span></div>
> [/code]
>
> Now I would like that when you click again a div, it becomes again
> small; I guess I should use Effect.Shrink but how can I do that ? I
> mean I can''t add it to onClick.
> Moreover, I would like that when I click a div if there is a grown
> one, that becomes small before the clicked one grows. How can I do
> that?
>
> Thank you and have a nice day!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
OOps, $(''e'').addClassName(''big'') should be
$(e).addClassName(''big'')
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
1) Remove all onclick handlers.
2) Paste this snippet into a script tag in a document''s head:
document.observe(''click'', function(e) {
var target = e.findElement(''#first, #second, #third'');
if (!target) return;
e.stop();
if (Object.isUndefined(target._shrinked)) target._shrinked = true;
new Effect[target._shrinked ? ''Grow'' :
''Shrink''](target, {
from: 0.5,
to: 1,
queue: { limit: 1 },
afterFinish: function() {
target._shrinked = !target._shrinked;
}
});
})
- kangax
On Feb 25, 6:11 pm, macsig
<sigbac...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> hello, I''m trying to use some scriptaculous effect but I have a
issue
> with that.
>
> I have 3 div and I would like to be able change their size once
> clicked so, I used Effect.Grow
>
> [code]
> <div id="first" onclick="new Effect.Grow(this, {from:
0.5, to:
> 1.0 })"><span>demo 1</span></div>
> <div id="second" onclick="new Effect.Grow(this, {from:
0.5, to:
> 1.0 })"><span>demo 2</span></div>
> <div id="third" onclick="new Effect.Grow(this, {from:
0.5, to:
> 1.0 })"><span>demo 3</span></div>
> [/code]
>
> Now I would like that when you click again a div, it becomes again
> small; I guess I should use Effect.Shrink but how can I do that ? I
> mean I can''t add it to onClick.
> Moreover, I would like that when I click a div if there is a grown
> one, that becomes small before the clicked one grows. How can I do
> that?
>
> Thank you and have a nice day!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---