Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to detect actual visibility of an element

    Hi Guys,

    This the first question I am putting on the forum. Hope you all will give it a try.

    I have an inputbox in my code. And sometimes I happen to hide some great grand parent node of the input box. ie, I will just hide the table or div element in which there will be lots of child nodes which again contians lots of child nodes and ... like that... and some where inside, my inputbox will be present.

    I hide the great grand parent node using someElement.style.display="none";

    So when I hide the great grand parent node all the content underneath will become invisible. But the actuall properties of the child nodes will be the same. ie, the actual display property of the input box is still visible.

    Very funny na... the input box is hidden to our eyes but it seems to be visible to the code.

    Now what I want is, how to detect actuall visibility( that which we will see) of an element. How can I know if the element is actually visible to the eye or not.


    Please dont tell me to use "myinputbox.style.display" or "myinputbox.style.visibility". They all show visible but in reality inputbox is hidden because its greatgrandparent is hidden.

    Awaiting for answers...

    Thanking you in advance.

    Afru
    Last edited by afrusoft; 08-24-2004 at 07:57 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by afrusoft
    Let us see how many gurus can answer this.....
    trolling are we??
    *keep it simple (TM)

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Jbot,

    Nice humour.... Ok. I am removing that line.... Still waiting for an answer friend....

    Afru

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Why not do it recursively?

    First, you need accurate detection of visibility (not just set inside the style property):

    Code:
    function isVisible(element) {
        var styleObj;
    
        if (document.defaultView && document.defaultView.getComputedStyle)
            styleObj = document.defaultView.getComputedStyle(element, "");
        else if (element.runtimeStyle)
            styleObj = element.runtimeStyle;
    
        return !(styleObj.display == "none" || styleObj.visibility == "hidden");
    }
    Now we simply do something like:
    Code:
    function isRendered(element) {
        if (element.nodeType != 1) return true;
        if (isVisible(element))
            return isRendered(element.parentNode);
        return false;
    }
    I didn't test the code, but I don't see any reason why it won't work.

  • #5
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello JKD,

    Thanks a lot for your time, I have also thought of recursive function but it didnt work. Thats why I posted the problem on the forum. I tried your version of the function but it is still saying that my elements are visible even when their parentNodes are invisible.

    I tried following code and always got true when clicked on getVisibility button.
    Please checkit out...

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function isVisible(element) {
    var styleObj;

    if (document.defaultView && document.defaultView.getComputedStyle)
    styleObj = document.defaultView.getComputedStyle(element, "");
    else if (element.runtimeStyle)
    styleObj = element.runtimeStyle;

    return !(styleObj.display == "none" || styleObj.visibility == "hidden");
    }

    function isRendered(element) {
    if (element.nodeType != 1) return true;
    if (isVisible(element) && element.parentNode)
    return isRendered(element.parentNode);
    return false;
    }

    function hideRow()
    {
    rowObj=document.getElementById("mytr");
    rowObj.style.display="none";
    }
    function showRow()
    {
    rowObj=document.getElementById("mytr");
    rowObj.style.display="block";
    }
    function alertVisibility()
    {
    obj=document.getElementById("myinputbox");
    alert(isRendered(obj));
    }
    //-->
    </SCRIPT>

    <TABLE border=1 cellpadding=0 cellspacing=0>

    <TR id="mytr" name="mytr">
    <TD>
    <input type="text" value="Some Value" id="myinputbox" name="myinputbox">
    </TD>
    </TR>

    <TR><TD>

    <input type="button" value="Hide Table Row" onclick='hideRow()'>&nbsp;&nbsp;

    <input type="button" value="Show Table Row" onclick='showRow()'>&nbsp;&nbsp;

    <input type="button" value="Get Visibility" onclick='alertVisibility()'>

    </TD></TR>
    </TABLE>

    Hope you will find out what is the problem....
    By the way I am using IE6.0 hope its not the problem. I have also checked this on IE5.5 but didnt get it.

    Awaiting for your reply...

    Afru.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Use currentStyle not runtimeStyle

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This question has been continued here.....

    ......Willy

  • #8
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang
    Use currentStyle not runtimeStyle
    both of those are IE only. for Moz you also need to use getComputedStyle():

    Code:
    window.getComputedStyle(HTMLElement, null).getPropertyValue(STYLE_PROPERTY);
    *keep it simple (TM)

  • #9
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello all,

    Thank you all of you here...
    You people are simply the best...
    Thanks a lot...

    Afru.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •