Question 2310 in Wordpress Question posted in
The official Wordpress documentation can be found here.

jQuery checked attr depends on specific area – WordPress

I have question about showing popup and hiding on mouseenter and mouseleave events.
HTML part of question:

<div id="social-wrapper">
 
  <input type="checkbox" class="checkbox" id="share" />
  <label for="share" class="label entypo-export"><span>share</span></label>
  <div class="social">

    <ul>
      <li>
         <img id="linkdln" src="{$linkdln}" />
      </li>
      <li>
         <img id="facebook" src="{$facebook}" />
      </li>
      <li>
         <img id="twitter" src="{$twitter}" />
      </li>
      <li>
         <img id="copy" src="{$copy}" />
      </li>   
    </ul>

</div>         
</div>

Frontend

enter image description here

Jquery Part

var CHECKBOX = jQuery('input#share');
var mouse_is_inside = false

jQuery('.label').on({
  mouseenter: function () {
    mouse_is_inside = true;
    //$(CHECKBOX).prop("checked", true).trigger("change");
   // console.log('entering!');
  },
  mouseleave: function () {
   // $(CHECKBOX).prop("checked", false).trigger("change");
   // console.log('outside now!');
   mouse_is_inside = false;
  }  
});

I want when user hover the Share button to open popup, that’s easy and I achieved that. But problem it’s not hiding it.
Should be on mouseleave, but if user leaves share button will hive and user will no have opportunity to select social media, so i need to set good condition for hiding it.

if someone can help will be thankful!

Tags:

2

Answers


  1. 0

    You can use CSS for show/hide the social share buttons.

    #social-wrapper:hover .social {
    visibility: visible;
    opacity: 1;
    position: relative;
}
#social-wrapper .social {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: -30px;
}
    Login or Signup to reply.
  2. 0

    Consider the following that uses .hover().

    $(function() {
  $(".label").hover(function() {
    $(this).parent().find(".social").show();
    $(this).parent().find("#share").prop("checked", true);
  }, function() {
    if (!$("#share").is(":checked")) {
      $(this).parent().find(".social").hide();
    }
  });
  
  $("body:not('#social-wrapper img')").click(function() {
    if ($("#share").is(":checked")) {
      console.log("Close Social");
      $("#social-wrapper .social").hide();
      $("#share").prop("checked", false);
    }
  });
  
  $("#social-wrapper img").click(function() {
    if ($("#share").is(":checked")) {
      console.log("Social Share");
      $("#social-wrapper .social").hide();
      $("#share").prop("checked", false);
      // Perform action
    }
  });
})
    #social-wrapper {
  width: 340px;
  margin: 20px auto;
}

#social-wrapper input[type='checkbox'] {
  display: none;
  font-family: Arial, sans-serif;
}

#social-wrapper .label {
  padding: 10px;
  background: #222;
  color: #eee;
  margin-left: 60px;
}

#social-wrapper .social {
  position: relative;
  display: none;
}

#social-wrapper ul {
  list-style: none;
  padding: 10px;
  background: #222;
  width: 180px;
  margin-top: 18px;
}

#social-wrapper ul:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #222;
  position: absolute;
  top: -10px;
  left: 85px;
}

#social-wrapper ul li {
  display: inline-block;
}

#social-wrapper ul li img {
  width: 40px;
  height: 40px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="social-wrapper">
  <input type="checkbox" class="checkbox" id="share" />
  <label for="share" class="label entypo-export"><span>Share</span></label>
  <div class="social">
    <ul>
      <li>
        <img id="linkdln" src="{$linkdln}" />
      </li>
      <li>
        <img id="facebook" src="{$facebook}" />
      </li>
      <li>
        <img id="twitter" src="{$twitter}" />
      </li>
      <li>
        <img id="copy" src="{$copy}" />
      </li>
    </ul>
  </div>
</div>

    Hover takes a In and Out function. This allows the sharing options to be shown and then can be hidden via click or other activities.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search