[Limbo]

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

<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

<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!

[mx]

Originally Posted by Limbo

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

Doesn't that fix it?

p.s. You're not closing your slider <p> tags

[Limbo]

I reckon it will, only I don't know how to write the code...

[Limbo]

anyone know where I can learn JS from the top. Not really seen a laymens guide - most of it assumes more than a basic knowledge...

[pgo]

Check out DOM Scripting by Jeremy Keith. Great place to start.

As for your problem, assuming you've added "display:none;" for #slider1 and #slider2 in your CSS... I'm not familiar with mootools, but you would probably add it after "slides.each(function(slide, idx) { //For each element in slides do..." since that is looping through "each" element in the "slides" array.

In jQuery it'd be something like: $(this).show();

Or whatever mechanism mootools uses for displaying an object. "This" being the current object in the "each" loop.

[Limbo]

Hi pogs. again - Sounds about right, but I have absolutely no effing clue how to apply the theory...