Forums

jocke76

Hello all

My first post,, yeah .. =)

This topic could be on css-help aswell,, but I think it's more of an js-problem than a css-problem.

So..
When declaring a <div> and trying to, via javascript, determine wether the div is visible
or not. Javascript can't see the attributes, visibility and display, when declared in css.

An example..
First some random css-file.


div#testdiv {
visibility: hidden;
display: none;
}

And some html/javascript code


...
<script type=\"text/javascript\">
function toggleDiv (divid) {
    var element = document.getElementById(divid);
    if (element.style.visibility == 'hidden') {
        element.style.visibility='visible';
        element.style.display = 'block';
        return true;
    } else if (element.style.visibility == 'visible') {
        element.style.visibility='hidden';
        element.style.display = 'none';
        return false;
    }
}
</script>
..
..
<div id=\"testdiv\">
</div>
..
<input type=\"button\" onclick=\"toggleDiv('testdiv');\" value=\"Toggle div\">
..
..

Javascript never thinks that the div-element is hidden and not display (display: none) unless
I explicity declare that in the div-declaration.. like this.


<div id=\"testdiv\" style=\"visibility: hidden; display: none;\">
</div>

Am I doing something wrong or is this a known limitation of javascript/css... or what's happening.

Happy holidays!!

Regards Jocke

PS. Thanks Chris for a really good show, looking forward to more css-tips and tricks! DS.

treehouse : what would you like to learn today?

Forums

visibility and display problems