PDA

View Full Version : Creating an invisible div then making it visible.

nameitself
10-03-2006, 08:18 PM
I'm trying to create a div, with appendChild, which has an attribute in the css that renders it essentialy invisible.
For example:

.inv{ display:none; }

or

.inv{ height:0px; overflow:hidden; }

Then, after creating the div, change the attribute(s) so as to make it visible.

So far, useing an "elem.style.height" type of method doesnt seem to effect the attribute set in the css. Changing the class name to a class where the element has visible attribute(s) doesnt seem to work either, as it does not seem to override the previously set attributes.

I made a little animation for revealing the contents of a div that had been created this way. But what I've been doing is creating the div, then setting it's attributes to make it invisible then slowy making it visible again. this works fine most of the time, but sometimes there's this anoying flicker where you can see the div before it's set to it's invisible state. I'm trying to find a good way to fix this problem without doing anything like setting the div's position to 1000px off the screen or some other "crackish" method.

Also, I'd like to not have to walk through the style rules, seeing as how that method seems like a bad idea if you're going to be updating your css regularly.

Thanks for any and all advice.
_Aerospace_Eng_
10-03-2006, 08:26 PM
What code have you tried? Post it please.
nameitself
10-03-2006, 09:54 PM
Ok, here's the striped down version.

Thanks,

<html>
<head>
<style type="text/css">

.pre{ height: 0px; border: 1px solid #000; }

.post{ height: 200px; }

</style>

<script type="text/javascript">

num=0;

function add(){

var contain = document.getElementById('contain');

var newDiv = document.createElement('div');
num++;
var divIdName = 'div'+num;

newDiv.setAttribute('id', divIdName);
newDiv.innerHTML = "<p class='pre'> created div content <\/p>";

contain.appendChild(newDiv);

var div = document.getElementById(divIdName);


// change style method
div.style.height = '100px';

// change class method
div.className = 'post';

}

</script>
</head>

<body>
<!-- track id num -->
<form action=''><input type='hidden' value='0' id='idTrack' /></form>


<a class='a' href='javascript:;' onclick='add();'>Create New Div</a>

<div id='contain'></div>

</body>
</html>
_Aerospace_Eng_
10-03-2006, 10:05 PM
Sounds like you are trying to do what the moo.fx does. http://moofx.mad4milk.net/
JS must be enabled. Click the different section bars.
nameitself
10-04-2006, 01:13 AM
Any ideas how to do it without using a library?