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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Jquery hasClass with Children

    Hello!

    Quick question I've had an issue figuring it out.

    My website has a set of divs that are can appear to hover over the main content. All these divs have the class "hover_content". I would like to make it so that when I click outside of any of these divs, the div will disappear and I have done it using the following code.

    Code:
    $(document).mousedown(function(a) {
       if($(!a.target).hasClass("hover_content")) {
          $(".hover_content").fadeOut("fast");
       }
    })
    My issue is the following. If one of my divs has another element inside, lets say a textarea html field, when you click that, it will also trigger the above event and hide my div. Is there anyway to say hasClass("hover_content") or is children of hover_content? ?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Have a try with:

    Code:
    $(document).mousedown(function(event) {
       if(!($(event.target).hasClass("hover_content") || $(event.target).parents('div').hasClass("hover_content"))) {
          $(".hover_content").fadeOut("fast");
       }
    })
    Translation: If neither the clicked element, nor the clicked element's parent divs have the class 'hover_content', fade.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    @sb65: i think he needs to go down the dom, not up.

    that's pretty easy, we can just look for the class anywhere below the parent of the clicked element:

    Code:
    $(document).mousedown(function(a) {
       if($(".hover_content", a.target.parentNode || a.target).length  ) {
          $(".hover_content").fadeOut("fast");
       }
    })
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Hmmm, I read the question as needing to go up, the situation being clicking an element inside the .hover_content div which itself does not have that class.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    Quote Originally Posted by SB65 View Post
    Hmmm, I read the question as needing to go up, the situation being clicking an element inside the .hover_content div which itself does not have that class.
    fair enough. either way, OP should be covered now.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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