<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 <[EMAIL PROTECTED]> 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 [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
