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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Location
    Lübeck, Germany
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post How to determine wether a Node is rendered visible or not?

    Hi there,

    i came up zero when trying to find a direct method/value in the javascript object of the Node to determine wether an object is shown or not. So i wrote the following function. it checks relative to a parent (which could by document.body or a form or something) if somewhere on the way to that parental fixpoint a display='none' is found.
    If theres a better/faster or even direct way to do this please let me know, otherwise enjoy this function.

    P.S. i did not optimize it for IE since it doesn't support the prototype anyway

    Code:
    Node.prototype.visibleByInherit=function(s) {
        var p=this;
        var v=true;
        do {        
            if(p.style!=null)
                if(p.style.display!=null) 
                    if(p.style.display.toLowerCase()=='none')
                        v=false;
            p=p.parentNode;
        } while(p!=null && p.parentNode!=null && p!=s.parentNode && v);
        return v;
    }

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Well, you may have run into a problem because javascript only detects inline styles. So if you declared the display in the style sheet you won't be able to detect it's current display property until you have set in the javascript.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #3
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also you have not accounted for the visibility property, elements being absolutely positioned off the left side of the page, or elements being obscured by another element. Perhaps you are happy with just checking the display property.

    This may help: http://www.quirksmode.org/dom/getstyles.html
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Basscyst
    Well, you may have run into a problem because javascript only detects inline styles. So if you declared the display in the style sheet you won't be able to detect it's current display property until you have set in the javascript.

    Basscyst
    Ever heard of "getComputedStyle" (or IE's equivalent, which is "currentStyle")? Google for them - they allow the reading of computed styles quite apart from (or rather, including but not exclusively) styles declared in inline attributes.

    But I would echo what Kravvitz said - there are many ways an element could be hidden, not just display - there's visibility and offleft-positioning, and also clip, overflow, opacity ... quite a lot of things that could result in an element not being visible, which taken together makes this a somewhat non-trivial task.

    Can I ask why you need to know? What's the bottom line here?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Ever heard of "getComputedStyle" (or IE's equivalent, which is "currentStyle")? Google for them - they allow the reading of computed styles quite apart from (or rather, including but not exclusively) styles declared in inline attributes.
    Nope sure hadn't. Have now. I thank you.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    Ever heard of "getComputedStyle" (or IE's equivalent, which is "currentStyle")? Google for them - they allow the reading of computed styles quite apart from (or rather, including but not exclusively) styles declared in inline attributes.
    *points at link in previous reply*
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kravvitz
    *points at link in previous reply*
    Touche
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    New to the CF scene
    Join Date
    Mar 2006
    Location
    Lübeck, Germany
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you thats just what i needed to know, somehow i doubted that theres no elegant way to get the rendered style

    i only need to know if an element has display none or anything else so its just fine, thanks alot

  • #9
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    fortunately there is a better way :

    f = document.getElementById('idOfYourForm');

    alert(f.elements['idOfYourInputElement'] == null);

    if this returns false than its not rendered

    Hope this helps, buck

  • #10
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmz Forget my previous post. It does not work.

  • #11
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I also did something similar as your code but as a function :

    function elementVisible(jsid) {

    jselement = document.getElementById(jsid);

    do {

    if (jselement.style.display.toUpperCase() == 'NONE') return false;

    jselement=jselement.parentNode;

    }while (jselement.tagName.toUpperCase() != 'BODY');

    return true;

    }


  •  

    Posting Permissions

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