Can't work out how to use jQuery :not() when clicking on anything other that certain div

Question

I'm having a problem with jQuery animate and CSS selectors.

What I am trying to achieve is when the div (first box, the other two don't work yet) is clicked on (inside the .work-piece div), the height changes to calc(100% + 75px) and the colour also changes. Not just that, but when the user clicks anywhere outside that div, it reverts back to its normal form. I have tried using the :not() selector, but can't get anywhere.

Also, I don't know why, but when I click on the div, it loops six times over.

Any help would be appreciated.

Thanks.

http://codepen.io/DocRow10/pen/pgRXdv

$(document).ready(function() {

   $(".work-piece > div").on('mouseover', function() {
     $(this).fadeTo("slow", 0.8);
     console.log("I dunno...");
   });

   $(".work-piece > div").on('mouseleave', function() {
     $(this).fadeTo("slow", 0);
     console.log("I dunno...");
   });

   // .hover or use on('mouse...)

   //   $(".work-piece > div").on('click', function() {
   //      $(this).animate({backgroundColor: "rgb(0, 197, 205)"},"200");
   //   console.log("I dunno...");
   //   });

   $(":not(.work-piece > div)").on('click', function() {
     $(".work-piece > div").animate({
       backgroundColor: "rgb(238, 0, 0)",
       height: "+=75px"
     }, "200");
     $(this).fadeTo("slow", 1);
     console.log("I dunno... 'cuz");
   });

 });

    .work-row {

       margin-left: auto;
       margin-right: auto;
       width: 80%;
       height: 200px;
       border-style: solid;
       border-width: 2px;
     }


     .divider-row {
       margin-left: auto;
       margin-right: auto;
       width: 100%;
       height: 75px;
     }


     .work-piece {
       height: 100%;
       width: 31%;
       background-color: black;
       display: inline-block;
       margin: 0;
       vertical-align: top;
     }


     .work-piece > div {
       background-color: rgb(230, 230, 230);
       width: 100%;
       height: 100%;
       opacity: 0;
       display: inline-block;
     }


     h3.project-name {
       font-family: insolent;
       font-size: 30px;
       text-align: center;
       position: relative;
       top: 37.5%;
       color: rgb(105, 105, 105);
       margin-top: auto;
     }


     .divider-column {
       margin: 0;
       width: 3.5%;
       height: 100%x;
       display: inline-block;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-row">
  <div class="work-piece">
    <div>
      <h3 class="project-name">Guess the Shape</h3>
    </div>
  </div>
  <!--
                        -->
  <div class="divider-column"></div>
  <!--
                        -->
  <div class="work-piece"></div>
  <!--
                        -->
  <div class="divider-column"></div>
  <!--
                        -->
  <div class="work-piece"></div>
</div>

Click event bubbles through the DOM, prevent its propagation using `event.stopPropagation();`. Or better would be to bound click event to document level and filter it out regarding `event.target` — A. Wolff, Jan 14 '16 at 12:43
Take a look at this question: [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Natalie Hedström, Jan 14 '16 at 12:52
I believe the syntax is different, it's `$(".work-piece > div:not")` — Alex Szabo, Jan 14 '16 at 13:02

mustafa-elhelbawy · Answer 1 · 2016-01-14T15:50:11.760

try to change your jquery codes to the following:

 $(document).ready(function() {
            var parentBoxHeight = $('.work-piece:first-child').height();
            var firstBoxHeight = $('.work-piece:first-child > div').height();

            $(".work-piece > div").on('mouseover', function() {
                    $(this).fadeTo("slow", 0.8);
                console.log("I dunno...");
            });

            $(".work-piece > div").on('mouseleave', function() {
                    $(this).fadeTo("slow", 0);
                console.log("I dunno...");
            });

            // .hover or use on('mouse...)

         //   $(".work-piece > div").on('click', function() {
              //      $(this).animate({backgroundColor: "rgb(0, 197, 205)"},"200");
             //   console.log("I dunno...");
         //   });

            $(".work-piece > div:first-child").on('click', function(e) {
              e.stopPropagation();
              if($(this).hasClass('clicked')) {
                $(this).parent().animate({                        
                  height: parentBoxHeight
                },"200");
                $(this).animate({
                      backgroundColor: "rgb(230, 230, 230)",
                      height: firstBoxHeight
                  },"200");

                $(this).removeClass('clicked');
              } else {
                $(this).addClass('clicked');
                $(this).parent().animate({                        
                  height: "+=75px"
                },"200");
                $(this).animate({
                      backgroundColor: "rgb(238, 0, 0)",
                      height: "+=75px"
                  },"200");
              }                        
            });

            $(document).on('click', function() {
              if($(".work-piece > div:first-child").hasClass('clicked')) {
                $(".work-piece > div:first-child").parent().animate({                        
                  height: parentBoxHeight
                },"200");
                $(".work-piece > div:first-child").animate({
                      backgroundColor: "rgb(230, 230, 230)",
                      height: firstBoxHeight
                  },"200");

                $(".work-piece > div:first-child").removeClass('clicked');
              } else {
                return false;
              }
            });

        });

is this what you need?

Almost. When I click on the div, I do want that behaviour. But instead of clicking it again to revert it back to its normal state, could you do it so that when I have clicked on anything else but that div, it closes? — Chosen1, Jan 14 '16 at 15:14
ok, try the jquery code again after changes hope this is what you need — mustafa-elhelbawy, Jan 14 '16 at 15:51

Can't work out how to use jQuery :not() when clicking on anything other that certain div

1 Answers1