Heine
2008-Jun-04 11:50 UTC
How to achieve the ''multi'' fade effect that is used by Apple computer?
Hi all!
My first post here, so: be gentle ;-)
I have been playing around with the scriptaculous library for a while
now, and I must admit it is great. However, there is one thing that
I''m notable to achieve:
On Apple computers website for ilife (iphoto) http://www.apple.com/ilife/iphoto/
there is a verrrryyy nice fade effect going on when you click the
navigation for ''new in iPhoto ''08'',
''Organize by Events'' etc.
Is it possible to get this effect working with scriptaculous?
So far, I''ve managed get things going part of the way with this ocde:
"<a href="#"
onmousedown="$(''budgetpositionbox'').fade({duration:0.2});
return false;" onmouseup="$
(''researchthemepositionbox'').appear({duration:0.2}); return
false;">Research Theme</a>"
Where the ''...positionbox'' is the <div> that fades in
and out.
BUT: my problem here is that I have to hard code things so that my
menu would be something like:
- Budget
- Research Theme
- Basic Requirements
- Evaluation
By default the page loads with the ''budget'' layer displayed
and the
others hidden!
When I click on ''Research Theme'' as my example shows, I fade
the
budgetpositionbox out and make the researchthempositionbox appear.
Everything works well, as longs as I click the links in the above
listed order. But everything falls apart when I click the links at
random, obviously since everything is hard coded.
My question to this group is: Is there a way for me to know that the
layer to fade out will always be the layer that I''m leaving, and how
can I pick that up en i.e. a variable of some sort?
Have in mind that I''m not very skilled at JavaScript, but I''m
very
good at copy/paste!!
Thank you
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Frederick Polgardy
2008-Jun-04 13:05 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
Store the currently selected item in a page variable and then write your
transition function to use it:
var current_box;
function transition_effect(new_box) {
$(current_box).fade({duration: 0.2});
$(new_box).appear({duration: 0.2});
current_box = new_box;
}
<a href="#"
onclick="transition_effect(''researchthemepositionbox'');
return
false;">Research Theme</a>
Or something along those lines.
-Fred
On Wed, Jun 4, 2008 at 6:50 AM, Heine
<hrundibakshi-ee4meeAH724@public.gmane.org> wrote:
>
> Hi all!
>
> My first post here, so: be gentle ;-)
>
> I have been playing around with the scriptaculous library for a while
> now, and I must admit it is great. However, there is one thing that
> I''m notable to achieve:
>
> On Apple computers website for ilife (iphoto)
> http://www.apple.com/ilife/iphoto/
> there is a verrrryyy nice fade effect going on when you click the
> navigation for ''new in iPhoto ''08'',
''Organize by Events'' etc.
>
> Is it possible to get this effect working with scriptaculous?
>
> So far, I''ve managed get things going part of the way with this
ocde:
>
> "<a href="#"
onmousedown="$(''budgetpositionbox'').fade({duration:0.2});
> return false;" onmouseup="$
> (''researchthemepositionbox'').appear({duration:0.2});
return
> false;">Research Theme</a>"
>
> Where the ''...positionbox'' is the <div> that fades
in and out.
>
> BUT: my problem here is that I have to hard code things so that my
> menu would be something like:
>
>
> - Budget
> - Research Theme
> - Basic Requirements
> - Evaluation
>
> By default the page loads with the ''budget'' layer
displayed and the
> others hidden!
> When I click on ''Research Theme'' as my example shows, I
fade the
> budgetpositionbox out and make the researchthempositionbox appear.
>
> Everything works well, as longs as I click the links in the above
> listed order. But everything falls apart when I click the links at
> random, obviously since everything is hard coded.
>
> My question to this group is: Is there a way for me to know that the
> layer to fade out will always be the layer that I''m leaving, and
how
> can I pick that up en i.e. a variable of some sort?
>
> Have in mind that I''m not very skilled at JavaScript, but
I''m very
> good at copy/paste!!
>
> Thank you
>
--
Science answers questions; philosophy questions answers.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Frederick Polgardy
2008-Jun-04 13:07 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
Keep in mind I''m not checking for boundary conditions like the first time you click a link... Just trying to get you started. On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy <fred-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:> Store the currently selected item in a page variable and then write your > transition function to use it: > > var current_box; > function transition_effect(new_box) { > $(current_box).fade({duration: 0.2}); > $(new_box).appear({duration: 0.2}); > current_box = new_box; > } > > <a href="#" onclick="transition_effect(''researchthemepositionbox''); return > false;">Research Theme</a> > > Or something along those lines. > > -Fred > > > On Wed, Jun 4, 2008 at 6:50 AM, Heine <hrundibakshi-ee4meeAH724@public.gmane.org> wrote: > >> >> Hi all! >> >> My first post here, so: be gentle ;-) >> >> I have been playing around with the scriptaculous library for a while >> now, and I must admit it is great. However, there is one thing that >> I''m notable to achieve: >> >> On Apple computers website for ilife (iphoto) >> http://www.apple.com/ilife/iphoto/ >> there is a verrrryyy nice fade effect going on when you click the >> navigation for ''new in iPhoto ''08'', ''Organize by Events'' etc. >> >> Is it possible to get this effect working with scriptaculous? >> >> So far, I''ve managed get things going part of the way with this ocde: >> >> "<a href="#" onmousedown="$(''budgetpositionbox'').fade({duration:0.2}); >> return false;" onmouseup="$ >> (''researchthemepositionbox'').appear({duration:0.2}); return >> false;">Research Theme</a>" >> >> Where the ''...positionbox'' is the <div> that fades in and out. >> >> BUT: my problem here is that I have to hard code things so that my >> menu would be something like: >> >> >> - Budget >> - Research Theme >> - Basic Requirements >> - Evaluation >> >> By default the page loads with the ''budget'' layer displayed and the >> others hidden! >> When I click on ''Research Theme'' as my example shows, I fade the >> budgetpositionbox out and make the researchthempositionbox appear. >> >> Everything works well, as longs as I click the links in the above >> listed order. But everything falls apart when I click the links at >> random, obviously since everything is hard coded. >> >> My question to this group is: Is there a way for me to know that the >> layer to fade out will always be the layer that I''m leaving, and how >> can I pick that up en i.e. a variable of some sort? >> >> Have in mind that I''m not very skilled at JavaScript, but I''m very >> good at copy/paste!! >> >> Thank you >> > > -- > Science answers questions; philosophy questions answers.-- Science answers questions; philosophy questions answers. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Heine
2008-Jun-04 13:23 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
Hello again!
Maybe I''m not that good at C/P ... it won''t work...
I''ve put the
" <script>
var current_box;
function transition_effect(new_box) {
$(current_box).fade({duration: 0.2});
$(new_box).appear({duration: 0.2});
current_box = new_box;
}
</script>"
(I assume that''s how I''m supposed to do it?!?)
just beneath my <body>-tag and have then replaced some of the <a
href>
on my page and have also changed the content of the
onclick="transition_effect(''researchthemepositionbox'');
Sadly, it''s quite dead, I''m afraid ;-(
/Heine
On Jun 4, 3:07 pm, "Frederick Polgardy"
<f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org>
wrote:> Keep in mind I''m not checking for boundary conditions like the
first time
> you click a link... Just trying to get you started.
>
> On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy
<f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org>
> wrote:
>
>
>
> > Store the currently selected item in a page variable and then write
your
> > transition function to use it:
>
> > var current_box;
> > function transition_effect(new_box) {
> > $(current_box).fade({duration: 0.2});
> > $(new_box).appear({duration: 0.2});
> > current_box = new_box;
> > }
>
> > <a href="#"
onclick="transition_effect(''researchthemepositionbox'');
return
> > false;">Research Theme</a>
>
> > Or something along those lines.
>
> > -Fred
>
> > On Wed, Jun 4, 2008 at 6:50 AM, Heine
<hrundibak...-ee4meeAH724@public.gmane.org> wrote:
>
> >> Hi all!
>
> >> My first post here, so: be gentle ;-)
>
> >> I have been playing around with the scriptaculous library for a
while
> >> now, and I must admit it is great. However, there is one thing
that
> >> I''m notable to achieve:
>
> >> On Apple computers website for ilife (iphoto)
> >>http://www.apple.com/ilife/iphoto/
> >> there is a verrrryyy nice fade effect going on when you click the
> >> navigation for ''new in iPhoto ''08'',
''Organize by Events'' etc.
>
> >> Is it possible to get this effect working with scriptaculous?
>
> >> So far, I''ve managed get things going part of the way
with this ocde:
>
> >> "<a href="#"
onmousedown="$(''budgetpositionbox'').fade({duration:0.2});
> >> return false;" onmouseup="$
> >>
(''researchthemepositionbox'').appear({duration:0.2}); return
> >> false;">Research Theme</a>"
>
> >> Where the ''...positionbox'' is the <div>
that fades in and out.
>
> >> BUT: my problem here is that I have to hard code things so that my
> >> menu would be something like:
>
> >> - Budget
> >> - Research Theme
> >> - Basic Requirements
> >> - Evaluation
>
> >> By default the page loads with the ''budget''
layer displayed and the
> >> others hidden!
> >> When I click on ''Research Theme'' as my example
shows, I fade the
> >> budgetpositionbox out and make the researchthempositionbox appear.
>
> >> Everything works well, as longs as I click the links in the above
> >> listed order. But everything falls apart when I click the links at
> >> random, obviously since everything is hard coded.
>
> >> My question to this group is: Is there a way for me to know that
the
> >> layer to fade out will always be the layer that I''m
leaving, and how
> >> can I pick that up en i.e. a variable of some sort?
>
> >> Have in mind that I''m not very skilled at JavaScript, but
I''m very
> >> good at copy/paste!!
>
> >> Thank you
>
> > --
> > Science answers questions; philosophy questions answers.
>
> --
> Science answers questions; philosophy questions answers.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Frederick Polgardy
2008-Jun-04 13:40 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
The first time through current_box will be undefined so it won''t work. Try changing the first line to var current_box = ''budgetpositionbox''; or whatever you''re going to have highlighted by default. On Wed, Jun 4, 2008 at 8:23 AM, Heine <hrundibakshi-ee4meeAH724@public.gmane.org> wrote:> > Hello again! > > Maybe I''m not that good at C/P ... it won''t work... > > I''ve put the > > " <script> > var current_box; > function transition_effect(new_box) { > $(current_box).fade({duration: 0.2}); > $(new_box).appear({duration: 0.2}); > current_box = new_box; > } > </script>" > > (I assume that''s how I''m supposed to do it?!?) > > just beneath my <body>-tag and have then replaced some of the <a href> > on my page and have also changed the content of the > onclick="transition_effect(''researchthemepositionbox''); > > Sadly, it''s quite dead, I''m afraid ;-( > > /Heine > > On Jun 4, 3:07 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote: > > Keep in mind I''m not checking for boundary conditions like the first time > > you click a link... Just trying to get you started. > > > > On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> > > wrote: > > > > > > > > > Store the currently selected item in a page variable and then write > your > > > transition function to use it: > > > > > var current_box; > > > function transition_effect(new_box) { > > > $(current_box).fade({duration: 0.2}); > > > $(new_box).appear({duration: 0.2}); > > > current_box = new_box; > > > } > > > > > <a href="#" onclick="transition_effect(''researchthemepositionbox''); > return > > > false;">Research Theme</a> > > > > > Or something along those lines. > > > > > -Fred > > > > > On Wed, Jun 4, 2008 at 6:50 AM, Heine <hrundibak...-ee4meeAH724@public.gmane.org> wrote: > > > > >> Hi all! > > > > >> My first post here, so: be gentle ;-) > > > > >> I have been playing around with the scriptaculous library for a while > > >> now, and I must admit it is great. However, there is one thing that > > >> I''m notable to achieve: > > > > >> On Apple computers website for ilife (iphoto) > > >>http://www.apple.com/ilife/iphoto/ > > >> there is a verrrryyy nice fade effect going on when you click the > > >> navigation for ''new in iPhoto ''08'', ''Organize by Events'' etc. > > > > >> Is it possible to get this effect working with scriptaculous? > > > > >> So far, I''ve managed get things going part of the way with this ocde: > > > > >> "<a href="#" onmousedown="$(''budgetpositionbox'').fade({duration:0.2}); > > >> return false;" onmouseup="$ > > >> (''researchthemepositionbox'').appear({duration:0.2}); return > > >> false;">Research Theme</a>" > > > > >> Where the ''...positionbox'' is the <div> that fades in and out. > > > > >> BUT: my problem here is that I have to hard code things so that my > > >> menu would be something like: > > > > >> - Budget > > >> - Research Theme > > >> - Basic Requirements > > >> - Evaluation > > > > >> By default the page loads with the ''budget'' layer displayed and the > > >> others hidden! > > >> When I click on ''Research Theme'' as my example shows, I fade the > > >> budgetpositionbox out and make the researchthempositionbox appear. > > > > >> Everything works well, as longs as I click the links in the above > > >> listed order. But everything falls apart when I click the links at > > >> random, obviously since everything is hard coded. > > > > >> My question to this group is: Is there a way for me to know that the > > >> layer to fade out will always be the layer that I''m leaving, and how > > >> can I pick that up en i.e. a variable of some sort? > > > > >> Have in mind that I''m not very skilled at JavaScript, but I''m very > > >> good at copy/paste!! > > > > >> Thank you > > > > > -- > > > Science answers questions; philosophy questions answers. > > > > -- > > Science answers questions; philosophy questions answers. > > >-- Science answers questions; philosophy questions answers. --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
blechler
2008-Jun-04 14:02 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
<script type="text/javascript>
var activeContent;
var contentFader = Class.create({
initialize: function(itemName) {
this.btn = $(''link'' + itemName);
this.content = $(''cont'' + itemName);
this.addObservers();
},
doTransition: function() {
if ((activeContent) && (activeContent != this)) {
var objThis = this;
new Effect.Fade(activeContent, {duration:0.2, afterFinish:
function() {
activeContent = objThis;
new Effect.Appear(objThis.content, {duration:0.2});
}});
}
},
addObservers: function() {
this.btn.observer = this.doTransition.bindAsEventListener(this);
this.btn.observe(''click'', this.btn.observer);
}
})
function init() {
budget = new contentFader(''Budget'');
research = new contentFader(''Research'');
basic = new contentFader(''Basic'');
evaluation = new contentFader(''Evaluation'')
}
Event.observe(window, ''load'', init);
</script>
....
<div id="leftNav">
<div id="linkBudget"
class="leftLink">Budget</div>
<div id="linkResearch" class="leftLink">Research
Theme</div>
<div id="linkBasic" class="leftLink">Basic
Requirements</div>
<div id="linkEvaluation"
class="leftLink">Evaluation</div>
</div>
....
<div id="stage">
<div id="contBudget" style="display:none">Budget
content</div>
<div id="contResearch" style="display:none">Research
theme content</
div>
<div id="contBasic" style="display:none">Basic
requirements content</
div>
<div id="contEvaluation"
style="display:none">Evaluation content</
div>
</div>
-----------------------------------------------------
That''s untested off the top of my head.
Welcome to the group, and don''t worry about the "be gentle
stuff", I
find this group to me much more pleasant than say some of the people
on other JS related (news)groups.
Bernie
On Jun 4, 7:50 am, Heine <hrundibak...-ee4meeAH724@public.gmane.org>
wrote:> Hi all!
>
> My first post here, so: be gentle ;-)
>
> I have been playing around with the scriptaculous library for a while
> now, and I must admit it is great. However, there is one thing that
> I''m notable to achieve:
>
> On Apple computers website for ilife
(iphoto)http://www.apple.com/ilife/iphoto/
> there is a verrrryyy nice fade effect going on when you click the
> navigation for ''new in iPhoto ''08'',
''Organize by Events'' etc.
>
> Is it possible to get this effect working with scriptaculous?
>
> So far, I''ve managed get things going part of the way with this
ocde:
>
> "<a href="#"
onmousedown="$(''budgetpositionbox'').fade({duration:0.2});
> return false;" onmouseup="$
> (''researchthemepositionbox'').appear({duration:0.2});
return
> false;">Research Theme</a>"
>
> Where the ''...positionbox'' is the <div> that fades
in and out.
>
> BUT: my problem here is that I have to hard code things so that my
> menu would be something like:
>
> - Budget
> - Research Theme
> - Basic Requirements
> - Evaluation
>
> By default the page loads with the ''budget'' layer
displayed and the
> others hidden!
> When I click on ''Research Theme'' as my example shows, I
fade the
> budgetpositionbox out and make the researchthempositionbox appear.
>
> Everything works well, as longs as I click the links in the above
> listed order. But everything falls apart when I click the links at
> random, obviously since everything is hard coded.
>
> My question to this group is: Is there a way for me to know that the
> layer to fade out will always be the layer that I''m leaving, and
how
> can I pick that up en i.e. a variable of some sort?
>
> Have in mind that I''m not very skilled at JavaScript, but
I''m very
> good at copy/paste!!
>
> Thank you
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Tom Gregory
2008-Jun-04 14:47 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
I thought someone else pointed this out already... You''re using
current_box when it''s undefined, which will stop execution.
if (current_box) {$(current_box).fade({duration: 0.2});}
TAG
On Jun 4, 2008, at 7:23 AM, Heine wrote:
>
> Hello again!
>
> Maybe I''m not that good at C/P ... it won''t work...
>
> I''ve put the
>
> " <script>
> var current_box;
> function transition_effect(new_box) {
> $(current_box).fade({duration: 0.2});
> $(new_box).appear({duration: 0.2});
> current_box = new_box;
> }
> </script>"
>
> (I assume that''s how I''m supposed to do it?!?)
>
> just beneath my <body>-tag and have then replaced some of the <a
href>
> on my page and have also changed the content of the
>
onclick="transition_effect(''researchthemepositionbox'');
>
> Sadly, it''s quite dead, I''m afraid ;-(
>
> /Heine
>
> On Jun 4, 3:07 pm, "Frederick Polgardy"
<f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:
>> Keep in mind I''m not checking for boundary conditions like the
>> first time
>> you click a link... Just trying to get you started.
>>
>> On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy
>> <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org>
>> wrote:
>>
>>
>>
>>> Store the currently selected item in a page variable and then
>>> write your
>>> transition function to use it:
>>
>>> var current_box;
>>> function transition_effect(new_box) {
>>> $(current_box).fade({duration: 0.2});
>>> $(new_box).appear({duration: 0.2});
>>> current_box = new_box;
>>> }
>>
>>> <a href="#"
>>>
onclick="transition_effect(''researchthemepositionbox'');
return
>>> false;">Research Theme</a>
>>
>>> Or something along those lines.
>>
>>> -Fred
>>
>>> On Wed, Jun 4, 2008 at 6:50 AM, Heine
<hrundibak...-ee4meeAH724@public.gmane.org> wrote:
>>
>>>> Hi all!
>>
>>>> My first post here, so: be gentle ;-)
>>
>>>> I have been playing around with the scriptaculous library for a
>>>> while
>>>> now, and I must admit it is great. However, there is one thing
that
>>>> I''m notable to achieve:
>>
>>>> On Apple computers website for ilife (iphoto)
>>>> http://www.apple.com/ilife/iphoto/
>>>> there is a verrrryyy nice fade effect going on when you click
the
>>>> navigation for ''new in iPhoto ''08'',
''Organize by Events'' etc.
>>
>>>> Is it possible to get this effect working with scriptaculous?
>>
>>>> So far, I''ve managed get things going part of the way
with this
>>>> ocde:
>>
>>>> "<a href="#"
onmousedown="$(''budgetpositionbox'').fade({duration:
>>>> 0.2});
>>>> return false;" onmouseup="$
>>>>
(''researchthemepositionbox'').appear({duration:0.2}); return
>>>> false;">Research Theme</a>"
>>
>>>> Where the ''...positionbox'' is the <div>
that fades in and out.
>>
>>>> BUT: my problem here is that I have to hard code things so that
my
>>>> menu would be something like:
>>
>>>> - Budget
>>>> - Research Theme
>>>> - Basic Requirements
>>>> - Evaluation
>>
>>>> By default the page loads with the ''budget''
layer displayed and the
>>>> others hidden!
>>>> When I click on ''Research Theme'' as my
example shows, I fade the
>>>> budgetpositionbox out and make the researchthempositionbox
appear.
>>
>>>> Everything works well, as longs as I click the links in the
above
>>>> listed order. But everything falls apart when I click the links
at
>>>> random, obviously since everything is hard coded.
>>
>>>> My question to this group is: Is there a way for me to know
that
>>>> the
>>>> layer to fade out will always be the layer that I''m
leaving, and
>>>> how
>>>> can I pick that up en i.e. a variable of some sort?
>>
>>>> Have in mind that I''m not very skilled at JavaScript,
but I''m very
>>>> good at copy/paste!!
>>
>>>> Thank you
>>
>>> --
>>> Science answers questions; philosophy questions answers.
>>
>> --
>> Science answers questions; philosophy questions answers.
> >
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Heine
2008-Jun-04 17:46 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
Thank you, Frederick... that did the trick! I now have a very cool looking fade effect on these <div> tags... One thing though: I discovered that if I click any of the links the first time everything works as expected. However, IF I click the same link twice, the corresponding <div> fades out since there is nothing to show .. AND if I click the same link a third time, the corresponding <div> will show briefly and then fade away agin. Everything will however restores to normal when I click a different link! How could I stop this behavior so that if the new_box is empty, current_box will remain the the default display item and no effect will be applied? Thank you so much so far, your helps is priceless to me! /Heine On Jun 4, 3:40 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:> The first time through current_box will be undefined so it won''t work. Try > changing the first line to var current_box = ''budgetpositionbox''; or > whatever you''re going to have highlighted by default. > > > > On Wed, Jun 4, 2008 at 8:23 AM, Heine <hrundibak...-ee4meeAH724@public.gmane.org> wrote: > > > Hello again! > > > Maybe I''m not that good at C/P ... it won''t work... > > > I''ve put the > > > " <script> > > var current_box; > > function transition_effect(new_box) { > > $(current_box).fade({duration: 0.2}); > > $(new_box).appear({duration: 0.2}); > > current_box = new_box; > > } > > </script>" > > > (I assume that''s how I''m supposed to do it?!?) > > > just beneath my <body>-tag and have then replaced some of the <a href> > > on my page and have also changed the content of the > > onclick="transition_effect(''researchthemepositionbox''); > > > Sadly, it''s quite dead, I''m afraid ;-( > > > /Heine > > > On Jun 4, 3:07 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote: > > > Keep in mind I''m not checking for boundary conditions like the first time > > > you click a link... Just trying to get you started. > > > > On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> > > > wrote: > > > > > Store the currently selected item in a page variable and then write > > your > > > > transition function to use it: > > > > > var current_box; > > > > function transition_effect(new_box) { > > > > $(current_box).fade({duration: 0.2}); > > > > $(new_box).appear({duration: 0.2}); > > > > current_box = new_box; > > > > } > > > > > <a href="#" onclick="transition_effect(''researchthemepositionbox''); > > return > > > > false;">Research Theme</a> > > > > > Or something along those lines. > > > > > -Fred > > > > > On Wed, Jun 4, 2008 at 6:50 AM, Heine <hrundibak...-ee4meeAH724@public.gmane.org> wrote: > > > > >> Hi all! > > > > >> My first post here, so: be gentle ;-) > > > > >> I have been playing around with the scriptaculous library for a while > > > >> now, and I must admit it is great. However, there is one thing that > > > >> I''m notable to achieve: > > > > >> On Apple computers website for ilife (iphoto) > > > >>http://www.apple.com/ilife/iphoto/ > > > >> there is a verrrryyy nice fade effect going on when you click the > > > >> navigation for ''new in iPhoto ''08'', ''Organize by Events'' etc. > > > > >> Is it possible to get this effect working with scriptaculous? > > > > >> So far, I''ve managed get things going part of the way with this ocde: > > > > >> "<a href="#" onmousedown="$(''budgetpositionbox'').fade({duration:0.2}); > > > >> return false;" onmouseup="$ > > > >> (''researchthemepositionbox'').appear({duration:0.2}); return > > > >> false;">Research Theme</a>" > > > > >> Where the ''...positionbox'' is the <div> that fades in and out. > > > > >> BUT: my problem here is that I have to hard code things so that my > > > >> menu would be something like: > > > > >> - Budget > > > >> - Research Theme > > > >> - Basic Requirements > > > >> - Evaluation > > > > >> By default the page loads with the ''budget'' layer displayed and the > > > >> others hidden! > > > >> When I click on ''Research Theme'' as my example shows, I fade the > > > >> budgetpositionbox out and make the researchthempositionbox appear. > > > > >> Everything works well, as longs as I click the links in the above > > > >> listed order. But everything falls apart when I click the links at > > > >> random, obviously since everything is hard coded. > > > > >> My question to this group is: Is there a way for me to know that the > > > >> layer to fade out will always be the layer that I''m leaving, and how > > > >> can I pick that up en i.e. a variable of some sort? > > > > >> Have in mind that I''m not very skilled at JavaScript, but I''m very > > > >> good at copy/paste!! > > > > >> Thank you > > > > > -- > > > > Science answers questions; philosophy questions answers. > > > > -- > > > Science answers questions; philosophy questions answers. > > -- > Science answers questions; philosophy questions answers.--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Frederick Polgardy
2008-Jun-04 17:49 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
I''d try putting a test around the body of the function, to not do
anything
if the same link is clicked twice.
<script>
var current_box;
function transition_effect(new_box) {
if (new_box != current_box) {
$(current_box).fade({duration: 0.2});
$(new_box).appear({duration: 0.2});
current_box = new_box;
}
}
</script>
On Wed, Jun 4, 2008 at 12:46 PM, Heine
<hrundibakshi-ee4meeAH724@public.gmane.org> wrote:
>
> Thank you, Frederick... that did the trick!
>
> I now have a very cool looking fade effect on these <div> tags...
>
> One thing though: I discovered that if I click any of the links the
> first time everything works as expected. However, IF I click the same
> link twice, the corresponding <div> fades out since there is nothing
> to show .. AND if I click the same link a third time, the
> corresponding <div> will show briefly and then fade away agin.
> Everything will however restores to normal when I click a different
> link!
>
> How could I stop this behavior so that if the new_box is empty,
> current_box will remain the the default display item and no effect
> will be applied?
>
> Thank you so much so far, your helps is priceless to me!
>
> /Heine
>
> On Jun 4, 3:40 pm, "Frederick Polgardy"
<f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:
> > The first time through current_box will be undefined so it
won''t work.
> Try
> > changing the first line to var current_box =
''budgetpositionbox''; or
> > whatever you''re going to have highlighted by default.
> >
> >
> >
> > On Wed, Jun 4, 2008 at 8:23 AM, Heine
<hrundibak...-ee4meeAH724@public.gmane.org> wrote:
> >
> > > Hello again!
> >
> > > Maybe I''m not that good at C/P ... it won''t
work...
> >
> > > I''ve put the
> >
> > > " <script>
> > > var current_box;
> > > function transition_effect(new_box) {
> > > $(current_box).fade({duration: 0.2});
> > > $(new_box).appear({duration: 0.2});
> > > current_box = new_box;
> > > }
> > > </script>"
> >
> > > (I assume that''s how I''m supposed to do it?!?)
> >
> > > just beneath my <body>-tag and have then replaced some of
the <a href>
> > > on my page and have also changed the content of the
> > >
onclick="transition_effect(''researchthemepositionbox'');
> >
> > > Sadly, it''s quite dead, I''m afraid ;-(
> >
> > > /Heine
> >
> > > On Jun 4, 3:07 pm, "Frederick Polgardy"
<f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:
> > > > Keep in mind I''m not checking for boundary
conditions like the first
> time
> > > > you click a link... Just trying to get you started.
> >
> > > > On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy <
> f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org>
> > > > wrote:
> >
> > > > > Store the currently selected item in a page variable
and then write
> > > your
> > > > > transition function to use it:
> >
> > > > > var current_box;
> > > > > function transition_effect(new_box) {
> > > > > $(current_box).fade({duration: 0.2});
> > > > > $(new_box).appear({duration: 0.2});
> > > > > current_box = new_box;
> > > > > }
> >
> > > > > <a href="#"
onclick="transition_effect(''researchthemepositionbox'');
> > > return
> > > > > false;">Research Theme</a>
> >
> > > > > Or something along those lines.
> >
> > > > > -Fred
> >
> > > > > On Wed, Jun 4, 2008 at 6:50 AM, Heine
<hrundibak...-ee4meeAH724@public.gmane.org>
> wrote:
> >
> > > > >> Hi all!
> >
> > > > >> My first post here, so: be gentle ;-)
> >
> > > > >> I have been playing around with the scriptaculous
library for a
> while
> > > > >> now, and I must admit it is great. However, there
is one thing
> that
> > > > >> I''m notable to achieve:
> >
> > > > >> On Apple computers website for ilife (iphoto)
> > > > >>http://www.apple.com/ilife/iphoto/
> > > > >> there is a verrrryyy nice fade effect going on when
you click the
> > > > >> navigation for ''new in iPhoto
''08'', ''Organize by Events'' etc.
> >
> > > > >> Is it possible to get this effect working with
scriptaculous?
> >
> > > > >> So far, I''ve managed get things going part
of the way with this
> ocde:
> >
> > > > >> "<a href="#"
>
onmousedown="$(''budgetpositionbox'').fade({duration:0.2});
> > > > >> return false;" onmouseup="$
> > > > >>
(''researchthemepositionbox'').appear({duration:0.2}); return
> > > > >> false;">Research Theme</a>"
> >
> > > > >> Where the ''...positionbox'' is the
<div> that fades in and out.
> >
> > > > >> BUT: my problem here is that I have to hard code
things so that my
> > > > >> menu would be something like:
> >
> > > > >> - Budget
> > > > >> - Research Theme
> > > > >> - Basic Requirements
> > > > >> - Evaluation
> >
> > > > >> By default the page loads with the
''budget'' layer displayed and
> the
> > > > >> others hidden!
> > > > >> When I click on ''Research Theme''
as my example shows, I fade the
> > > > >> budgetpositionbox out and make the
researchthempositionbox appear.
> >
> > > > >> Everything works well, as longs as I click the
links in the above
> > > > >> listed order. But everything falls apart when I
click the links at
> > > > >> random, obviously since everything is hard coded.
> >
> > > > >> My question to this group is: Is there a way for me
to know that
> the
> > > > >> layer to fade out will always be the layer that
I''m leaving, and
> how
> > > > >> can I pick that up en i.e. a variable of some sort?
> >
> > > > >> Have in mind that I''m not very skilled at
JavaScript, but I''m very
> > > > >> good at copy/paste!!
> >
> > > > >> Thank you
> >
> > > > > --
> > > > > Science answers questions; philosophy questions
answers.
> >
> > > > --
> > > > Science answers questions; philosophy questions answers.
> >
> > --
> > Science answers questions; philosophy questions answers.
> >
>
--
Science answers questions; philosophy questions answers.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Heine
2008-Jun-04 18:28 UTC
Re: How to achieve the ''multi'' fade effect that is used by Apple computer?
Frederick, thank you so much! That was the final touch!!! It works beautifully!! /Heine On Jun 4, 7:49 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote:> I''d try putting a test around the body of the function, to not do anything > if the same link is clicked twice. > > <script> > var current_box; > function transition_effect(new_box) { > if (new_box != current_box) { > $(current_box).fade({duration: 0.2}); > $(new_box).appear({duration: 0.2}); > current_box = new_box; > }} > > </script> > > > > On Wed, Jun 4, 2008 at 12:46 PM, Heine <hrundibak...-ee4meeAH724@public.gmane.org> wrote: > > > Thank you, Frederick... that did the trick! > > > I now have a very cool looking fade effect on these <div> tags... > > > One thing though: I discovered that if I click any of the links the > > first time everything works as expected. However, IF I click the same > > link twice, the corresponding <div> fades out since there is nothing > > to show .. AND if I click the same link a third time, the > > corresponding <div> will show briefly and then fade away agin. > > Everything will however restores to normal when I click a different > > link! > > > How could I stop this behavior so that if the new_box is empty, > > current_box will remain the the default display item and no effect > > will be applied? > > > Thank you so much so far, your helps is priceless to me! > > > /Heine > > > On Jun 4, 3:40 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote: > > > The first time through current_box will be undefined so it won''t work. > > Try > > > changing the first line to var current_box = ''budgetpositionbox''; or > > > whatever you''re going to have highlighted by default. > > > > On Wed, Jun 4, 2008 at 8:23 AM, Heine <hrundibak...-ee4meeAH724@public.gmane.org> wrote: > > > > > Hello again! > > > > > Maybe I''m not that good at C/P ... it won''t work... > > > > > I''ve put the > > > > > " <script> > > > > var current_box; > > > > function transition_effect(new_box) { > > > > $(current_box).fade({duration: 0.2}); > > > > $(new_box).appear({duration: 0.2}); > > > > current_box = new_box; > > > > } > > > > </script>" > > > > > (I assume that''s how I''m supposed to do it?!?) > > > > > just beneath my <body>-tag and have then replaced some of the <a href> > > > > on my page and have also changed the content of the > > > > onclick="transition_effect(''researchthemepositionbox''); > > > > > Sadly, it''s quite dead, I''m afraid ;-( > > > > > /Heine > > > > > On Jun 4, 3:07 pm, "Frederick Polgardy" <f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> wrote: > > > > > Keep in mind I''m not checking for boundary conditions like the first > > time > > > > > you click a link... Just trying to get you started. > > > > > > On Wed, Jun 4, 2008 at 8:05 AM, Frederick Polgardy < > > f...-SMQUYeM9IBBWk0Htik3J/w@public.gmane.org> > > > > > wrote: > > > > > > > Store the currently selected item in a page variable and then write > > > > your > > > > > > transition function to use it: > > > > > > > var current_box; > > > > > > function transition_effect(new_box) { > > > > > > $(current_box).fade({duration: 0.2}); > > > > > > $(new_box).appear({duration: 0.2}); > > > > > > current_box = new_box; > > > > > > } > > > > > > > <a href="#" onclick="transition_effect(''researchthemepositionbox''); > > > > return > > > > > > false;">Research Theme</a> > > > > > > > Or something along those lines. > > > > > > > -Fred > > > > > > > On Wed, Jun 4, 2008 at 6:50 AM, Heine <hrundibak...-ee4meeAH724@public.gmane.org> > > wrote: > > > > > > >> Hi all! > > > > > > >> My first post here, so: be gentle ;-) > > > > > > >> I have been playing around with the scriptaculous library for a > > while > > > > > >> now, and I must admit it is great. However, there is one thing > > that > > > > > >> I''m notable to achieve: > > > > > > >> On Apple computers website for ilife (iphoto) > > > > > >>http://www.apple.com/ilife/iphoto/ > > > > > >> there is a verrrryyy nice fade effect going on when you click the > > > > > >> navigation for ''new in iPhoto ''08'', ''Organize by Events'' etc. > > > > > > >> Is it possible to get this effect working with scriptaculous? > > > > > > >> So far, I''ve managed get things going part of the way with this > > ocde: > > > > > > >> "<a href="#" > > onmousedown="$(''budgetpositionbox'').fade({duration:0.2}); > > > > > >> return false;" onmouseup="$ > > > > > >> (''researchthemepositionbox'').appear({duration:0.2}); return > > > > > >> false;">Research Theme</a>" > > > > > > >> Where the ''...positionbox'' is the <div> that fades in and out. > > > > > > >> BUT: my problem here is that I have to hard code things so that my > > > > > >> menu would be something like: > > > > > > >> - Budget > > > > > >> - Research Theme > > > > > >> - Basic Requirements > > > > > >> - Evaluation > > > > > > >> By default the page loads with the ''budget'' layer displayed and > > the > > > > > >> others hidden! > > > > > >> When I click on ''Research Theme'' as my example shows, I fade the > > > > > >> budgetpositionbox out and make the researchthempositionbox appear. > > > > > > >> Everything works well, as longs as I click the links in the above > > > > > >> listed order. But everything falls apart when I click the links at > > > > > >> random, obviously since everything is hard coded. > > > > > > >> My question to this group is: Is there a way for me to know that > > the > > > > > >> layer to fade out will always be the layer that I''m leaving, and > > how > > > > > >> can I pick that up en i.e. a variable of some sort? > > > > > > >> Have in mind that I''m not very skilled at JavaScript, but I''m very > > > > > >> good at copy/paste!! > > > > > > >> Thank you > > > > > > > -- > > > > > > Science answers questions; philosophy questions answers. > > > > > > -- > > > > > Science answers questions; philosophy questions answers. > > > > -- > > > Science answers questions; philosophy questions answers. > > -- > Science answers questions; philosophy questions answers.--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---