Add a class to each div you want faded and remove the inline handler ....
create a function that listens to click on the href's....
then do something like
function handleFade(element) {
$$('.the-class-name-for-the-faded-elements').each(function(e) {
Effect.toggle(e,'fade'); // fades out all elements
Effect.toggle(element,'appear'); // reappears the one that was clicked...
});
}
Or something like
function handleFade(element) {
Effect.toggle(element,'appear'); // appear in the cliked element
$$('.the-class-name-for-the-faded-elements').each(function(e) {
if(e!=element) {
Effect.toggle(e,'fade'); // fades out all other elements that were
not clicked
}
});
}
hope this helps
Alex
----- Original Message -----
From: <[email protected]>
To: "Prototype & script.aculo.us" <[email protected]>
Sent: Friday, December 12, 2008 6:24 PM
Subject: [Proto-Scripty] Fade away problem (Newbie)
>
> Hello everyone, I was wondering if someone might be able to help me.
>
> I have 4 links that toggle the opacity of 4 seperate divs, this works
> great I have the z-index swapping and the opacity fading.
>
> The Problem: When I select one section I want the remaining 3 divs to
> fade away. For example if I click a link it fades in and the 3 divs
> remaining that I did not select fade away. Any help is really
> appreciated.
>
>
> code looks something like this:
>
> <!-- My slides where content fades in -->
> <div id="slideWrap">
> <div id="slide-deck" align="center">
> <p></p>
> </div>
> <div id="fade-quicktime" align="center">
> <p>QUICKTIME</p>
> </div>
> <div id="fade-flash" align="center">
> <p>FLASH</p>
> </div>
> <div id="fade-smil" align="center">
> <p>SMIL</p>
> </div>
> <div id="fade-windows" align="center">
> <p>WINDOWS</p>
> </div>
> </div>
> <!-- end slides -->
>
>
>
> <!-- my categories, navigation that triggers content to fade in and
> out -->
> <div class="slideNavigation">
>
> <!-- quicktime -->
> <div id="quicktime">
> <a href="#" onclick="Effect.toggle('fade-
> quicktime','appear'); return false;" ><img alt="category 1"
> src="images/streamingSkin/logo.png" /></a>
> <h1>Quick Time</h1>
> </div>
>
> <!-- flash -->
> <div id="flash">
> <a href="#" onclick="Effect.toggle('fade-flash','appear');
> return false;" ><img alt="category 1" src="images/streamingSkin/
> logo.png" /></a>
> <h1>Flash</h1>
> </div>
>
>
> <!-- SMIL -->
> <div id="smil">
> <a href="#" onclick="Effect.toggle('fade-smil','appear');
> return false;" ><img alt="category 1" src="images/streamingSkin/
> logo.png" /></a>
> <h1>SMIL</h1>
> </div>
>
>
> <!-- Windows Media -->
> <div id="windows">
> <a href="#" onclick="Effect.toggle('fade-windows','appear');
> return false;" ><img alt="category 1" src="images/streamingSkin/
> logo.png" /></a>
> <h1>Windows Media Player</h1>
> </div>
> </div>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" 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/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
