Fading DIV's in and out

Hi,

First off let me say I am new to all of this, so if I sound a bit lost
it is because I am


I am trying to use the Effect.Opacity event from scriptalicious to fade in a div when a user clicks the link. As this DIV sits in the main page, it's default state is hidden, so when clicking the link the DIV's visibility is changed to visible, and the effect.opacity fades in from 0 to 1.


It does work, but the problem is after the DIV is set to visible, it appears, then the fade from 0 to 1 occurs, so it appears on the page, disapears and fades in.


If i set the opacity to 0 by default, the above issue doesnt occur, but once the fade in from 0 to 1 occurs, it then resets back to 0. The code I am using on the link is;


<A HREF="#" onclick="javascript:new Effect.Opacity('page2', { from: 0, to: 1 }); return true">test</a>


My CSS for that DIV is as follows, with this config the first issue occurs where the page appears, then disapears and fades in.


div.page2
{
top: 50%;
left: 50%;
width: 900px;
height: 600px;
position:absolute;
margin-left:-450px;
margin-top: -300px;
text-align:center;
background-image:url('images/ladder.jpg');
background-repeat:no-repeat;
z-index:1;
visibility:hidden
}


When the second issue occurs, fades in, then disapears, the CSS is as follows;


div.page2
{
top: 50%;
left: 50%;
width: 900px;
height: 600px;
position:absolute;
margin-left:-450px;
margin-top: -300px;
text-align:center;
background-image:url('images/ladder.jpg');
background-repeat:no-repeat;
z-index:1;
visibility:hidden
opacity:0;
filter:alpha(opacity=0);;



}


Any help would be greatly appreciated!!!

Thanks

Russ

 

wow hold the horses. new Effect.Opacity looks like code that instantiates an instance of an effect class - hence you are using some framework/library that you have failed to mention. this is NOT standard / vanilla javascript.

in mootools, i'd do the above just like so:

element.setStyles({"visibility": "visible","opacity": 0}).fade(0,1);

PHP:

to be honest, visibility should be visible in CSS off the bat, no need to double hide if opacity is 0 anyway. you know that filter:alpha(opacity=0); is not compliant - this will only work in IE right? having this inline in your css will cause a validation error... To avoid this, you can use your framework's method of applying opacity, for instance, i'd use element.setOpacity(0); -- which won't invalidate WC3 compliance. anyway, good luck

 

Hi,

Thanks for the reply. Sorry if I didnt make it clear, am using script.aculo.us.

I have taken your advice and set the visibility not to be hidden, I am aware the filter:alpha etc... is for IE, but if I dont have it there, I will have issues with IE correct?

In terms of Mootools, bit lost as to how to implement that code? Any help? Have read the documents, but struggling a bit....

Thanks

Russ

 

Please ignore the whole thing, got the problem sorted out.

Thanks for the help, you pointed me in the right direction!

Cheers

Russ