I do not mean to sound 'snooty', but why would you want to have all
four DIV's showing at once?

I would think showing a default DIV and then letting the user choose a
different delivery format would be the best practice, both in terms of
UI design and server logic.

To that end, I have create code that will show the QuickTime DIV by
default, and then let's the user choose which format to show, fading
the unused DIV out.

If nothing else you may be able to transport this code into something
you need.

With that said, a few points:

First, it's always better to separate your logic from display. The
Effect.toggle in line with your a tags was probably just for testing,
but it's always better to separate your JS code from the actual
elements and instead rely on id's and other selector logic.

Second, you could replace Effect.Appear with Effect.BlindDown and
Effect.Fade with Effect.BlindUp for a really cheesy effect : )

Last, this code is by no means complete, it was a just quick mock up
and I'm sure others here will find efficiencies and/or downright
problems with it if they look hard enough, I'm just trying to help!

Live demo: http://atvswap.com/demo.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
<html xmlns="http://www.w3.org/1999/xhtml";>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Fade Demo</title>
<script type="text/javascript" src="app/js/prototype.js"></script>
<script type="text/javascript" src="app/js/scriptaculous/
<script type="text/javascript">
        var i = this.indexOf(s);
        if(i != -1) this.splice(i, 1);
function toggle_content(id){
        var effect_duration = 1; // how long the effect lasts
        if($('fade-'+id.id).visible()){ // if the div is already visible, do
nothing, perform other logic, etc
        } else {
                // show the new div
                Effect.Appear($('fade-'+id.id), {duration: effect_duration});
                // create an array of all possible divs
                var divs = ['fade-quicktime', 'fade-flash', 'fade-smil', 'fade-
                // remove the div that needs to show from the array
                // iterate over the remaning divs and make sure they are not 
via Effect.Fade
                divs.each(function (f){
                        Effect.Fade($(f), {duration: effect_duration});
<style type="text/css">
body { font-family:"Myriad", "Myriad Pro", "Lucida Grande", "Lucida
Sans Unicode"; }
.tgl { width:150px; height:250px; position:absolute; top:14px; left:
227px; }
.button { float:left; font-size:11px; width:200px; height:70px;
cursor:pointer; }

<!-- My slides where content fades in -->
<div id="slideWrap" style="height:300px; width:800px; background-
color:#CCCCCC; position:relative;">
  <div class="tgl" id="fade-quicktime" style="background-
color:#66CC66; height:240px; width:320px; display:block;">
  <div class="tgl" id="fade-flash" style="background-color:#996699;
height:240px; width:320px; display:none;">
  <div class="tgl" id="fade-smil" style="background-color:#FF9966;
height:240px; width:320px; display:none;">
  <div class="tgl" id="fade-windows" style="background-color:#336699;
height:240px; width:320px; display:none;">
<!-- end slides -->

<!-- my categories, navigation that triggers content to fade in and
out -->
<div class="slideNavigation">
  <!-- quicktime -->
  <div class="button" id="quicktime" onclick="toggle_content(this);">
        <div style="background-color:#66CC66; color:#FFFFFF; font-
  <!-- flash -->
  <div class="button" id="flash" onclick="toggle_content(this);">
        <div style="background-color:#996699; color:#FFFFFF; font-
  <!-- SMIL -->
  <div class="button" id="smil" onclick="toggle_content(this);">
        <div style="background-color:#FF9966; color:#FFFFFF; font-
  <!-- Windows Media -->
  <div class="button" id="windows" onclick="toggle_content(this);">
        <div style="background-color:#336699; color:#FFFFFF; font-
weight:bold;">WINDOWS MEDIA</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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to