View Single Post
Old 14-05-2008, 13:01   #1 (permalink)
Limbo
Another turn.
 
Join Date: Feb 2005
Posts: 5,927
Javascript help (mootools fx)

Hi - anyone help here?

In the the code example below I have some nice things working, but IE 6/7 renders the hidden sliders for a fraction of a second before the mootools library is applied. This jumbles the page and looks awful. So I was hoping to change the CSS so that the divs had the property visibility:hidden; or display:none; so when JS then applies the property visibility:visible; or display:block; when the triggering link is clicked...

Javascript

Code:
<script type="text/javascript"> window.addEvent('domready', function() { var btns = [$('one'), $('two')]; //The buttons to trigger the slides; var slides = [$('slider1'), $('slider2')]; //The elements to be slides; var mySlide = []; var openSlide = -1; //Create a flag variable to be checked and test if any slide is opened; slides.each(function(slide, idx) { //For each element in slides do... mySlide[idx] = new Fx.Slide(slide, {duration: 500}).hide(); //Create an array with the Fx.Slide for each element in slides and hides it; btns[idx].addEvent('click', function(e) { //Add a click event for each element in btns; e = new Event(e); if ( openSlide == -1 ) { //Check if a slide has been opened before; openSlide = idx; mySlide[idx].slideIn(); //Slide In the slide; } else { mySlide[openSlide].slideOut(); //Slide Out the previous openened slide; mySlide[idx].slideIn(); //Slide In the slide; if ( openSlide != idx ) openSlide = idx; //openSlide will now be the current open slide; else openSlide = -1; //If closing the open item, will reset openSlide to it's initial state; } e.stop(); }); }); } )// end </script>

Sample HTML

Code:
<p><a id="one" href="#">Trigger 1</a></p> <p><a id="two" href="#">Trigger 1</a></p> <div id="slider1" style="visibility:hidden;"><p>slider content 1.</p></div> <div id="slider2" style="visibility:hidden;"><p>slider content 2.</p></div>

One suggestion is to "add display: none, then set it to display:block onDomReady"

I'm so shit at this clever stuff, just about cope with CSS, but JS looks like nonsense to me!
__________________

Last edited by Limbo : 14-05-2008 at 13:48.
  Reply With Quote