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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    detecting display of element?

    How can I allow a jQuery function to execute only if a certain div is displayed (or hidden)?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    if ($('#somediv').css('display') != 'none' && $('#somediv').css('visibility') != 'hidden') {
        // function or call
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    It’s even easier than this, depending on what you’re trying to do:
    PHP Code:
    $('#example:visible').blah… 
    or
    PHP Code:
    if($('#example:visible').length) {
      
    // stuff…

    or
    PHP Code:
    if($('#example').is(':visible')) {
      
    // stuff…


  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    :visible is actually looking for display:none (and a couple of other circumstances) but (I understand) considers visibility: hidden as still being visible - since it still occupies space in the layout?!

    I suppose most of the time this is not a concern as people tend to be confirming the application of show() or hide().
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Oh, you’re right. But let’s let the OP decide what works best for them.

  • #6
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    The :visible method will work fine in this case, but Andrew's method is not working for me, seems the if statement is being completely ignored and the function executes as if it weren't there. I was looking forward to using that method for other css properties as well, might you know why it isn't working?

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The if statement won't be ignored, it's just not meeting the conditions.

    Try using alerts (or console.log) to check what these values are:

    Code:
    window.alert($('#somediv').css('display'));
    window.alert($('#somediv').css('visibility'));
    .. and, of course, you've modified '#somediv' to the correct id for your own div element?
    Last edited by AndrewGSW; 08-18-2012 at 02:09 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    If you do what Andrew suggested in the previous post you’ll see that the alert is giving the value of the attribute. That way you can check what comes out and whether it matches the condition.


  •  

    Posting Permissions

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