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:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <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/ scriptaculous.js"></script> <script type="text/javascript"> Array.prototype.remove=function(s){ 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 return; } 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- windows']; // remove the div that needs to show from the array divs.remove('fade-'+id.id); // iterate over the remaning divs and make sure they are not showing via Effect.Fade divs.each(function (f){ Effect.Fade($(f), {duration: effect_duration}); }); } } </script> <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; } </style> </head> <body> <!-- 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;"> <p>QUICKTIME</p> </div> <div class="tgl" id="fade-flash" style="background-color:#996699; height:240px; width:320px; display:none;"> <p>FLASH</p> </div> <div class="tgl" id="fade-smil" style="background-color:#FF9966; height:240px; width:320px; display:none;"> <p>SMIL</p> </div> <div class="tgl" id="fade-windows" style="background-color:#336699; height:240px; width:320px; display:none;"> <p>WINDOWS</p> </div> </div> <!-- 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- weight:bold;">QUICKTIME</div> </div> <!-- flash --> <div class="button" id="flash" onclick="toggle_content(this);"> <div style="background-color:#996699; color:#FFFFFF; font- weight:bold;">FLASH</div> </div> <!-- SMIL --> <div class="button" id="smil" onclick="toggle_content(this);"> <div style="background-color:#FF9966; color:#FFFFFF; font- weight:bold;">SMIL</div> </div> <!-- Windows Media --> <div class="button" id="windows" onclick="toggle_content(this);"> <div style="background-color:#336699; color:#FFFFFF; font- weight:bold;">WINDOWS MEDIA</div> </div> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ 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 prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
