djp1988 Posted July 6, 2008 Share Posted July 6, 2008 Here is what I would like to end up with:I have some links say as a navigation, when a link is clicked, the corresponding div with the relevent info is firstly switched from display:non to block and then faded in up to opacity 100, So I thought to myself, I must set say all 4 of my divs as display none, and when the page loads, I should also make these invisible divs opacity 0, when the person clicks the link, I triger a script that changes the display of the relevent div to block and a small interval allows a fade in effect, so I distinguish 4 phases:1) div at display:none2) div at display:none and opacity set to 03) div at display:block, but opacity still 04) div at display:block and opacity 1But as I have more then one div, I tried to use document.getElementByClass('myclassname') and it seems this may be causing me problems and I don't know in which direction I am pointing!Actually even with getElementsById I can't seem to put my finger on it... Link to comment Share on other sites More sharing options...
shadowayex Posted July 6, 2008 Share Posted July 6, 2008 I would set the display to none and opacity to 0 using CSS for the ones I don't want to display right away, then use links (using the onclick event) to load a function that gets the corresponding div by id (I typically always use id with JavaScript because I seem to always have problem with class and name) and make sure that the display is set to block FIRST and then bring the opacity up AFTER the display is set. Order is important. Also make sure that the function will only affect one element at a time. Typically if the function will affect more than one element at a time, there will be problems. Link to comment Share on other sites More sharing options...
jeffman Posted July 6, 2008 Share Posted July 6, 2008 Advice. You're trying a lot of stuff here on a bunch of different things. Build it from the ground up. Start with one div and access it by ID. That always works. Now, write a little routine that just plays with opacity. Set the opacity to 0 in CSS (you know you have to accomodate several ways of doing that, right?) and then bring it up at onload, like you said.Once you've mastered the opacity thing, move on to the display thing.BUT. What's up with the display thing? Why is it even here? 0 opacity should make the thing invisible, but display: none does MORE than make a thing invisible. It makes it GONE. It takes up zero SPACE. Making a thing go from GONE to HERE, even if it's invisible, is going to be weird at onload. Any other visible elements below it are going to suddenly change position. Do you want that, or are you just trying to get an invisbility effect because something else wasn't working? Link to comment Share on other sites More sharing options...
djp1988 Posted July 6, 2008 Author Share Posted July 6, 2008 Hi, well I want display:none because I want the div's to load in the same space when called, so i toggle from display non to block for the desired one Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.