Show if hidden jQuery

Show if hidden jQuery

I have a div that I show if the mouse is hovering over a different div, then when the mouse leaves the div is hidden.

In my mousemove callback function I say $('#divToShow').show(), however I'm wondering if this is inefficient as mousemove events are fired very frequently, and if that div is already shown then it's calling show() for no reason.

Would it be more efficient to check if the div is hidden, and only show it then? Like this:

if ($('#divToShow').is(":hidden")){    $('#divToShow').show();  }  

Or another solution would be to have a boolean variable that is set to true the first time the div is shown, then set to false on mouseleave.

Does anyone have any information on an efficient way to show a div in a mousemove function?

Answer by Walker Randolph Smith for Show if hidden jQuery

Use mouseEnter to set a flag (or just show) and on mouseLeave set the flag to the opposite value (or just hide). mouseMove may not be best event since it may be fired more than desired. You may not even keep track of a flag if you just want to show and hide an element.

Answer by Abdennour TOUMI for Show if hidden jQuery

First of All , i let you inspect source code of $.fn.show, then , see , at the end , my answer :

show: function() {          return showHide( this, true );      }  

And showHide source code is :

function showHide( elements, show ) {      var display, elem, hidden,          values = [],          index = 0,          length = elements.length;        for ( ; index < length; index++ ) {          elem = elements[ index ];          if ( !elem.style ) {              continue;          }            values[ index ] = dataPriv.get( elem, "olddisplay" );          display = elem.style.display;          if ( show ) {                // Reset the inline display of this element to learn if it is              // being hidden by cascaded rules or not              if ( !values[ index ] && display === "none" ) {                  elem.style.display = "";              }                // Set elements which have been overridden with display: none              // in a stylesheet to whatever the default browser style is              // for such an element              if ( elem.style.display === "" && isHidden( elem ) ) {                  values[ index ] = dataPriv.access(                      elem,                      "olddisplay",                      defaultDisplay( elem.nodeName )                  );              }          } else {              hidden = isHidden( elem );                if ( display !== "none" || !hidden ) {                  dataPriv.set(                      elem,                      "olddisplay",                      hidden ? display : jQuery.css( elem, "display" )                  );              }          }      }        // Set the display of most of the elements in a second loop      // to avoid the constant reflow      for ( index = 0; index < length; index++ ) {          elem = elements[ index ];          if ( !elem.style ) {              continue;          }          if ( !show || elem.style.display === "none" || elem.style.display === "" ) {              elem.style.display = show ? values[ index ] || "" : "none";          }      }        return elements;  }  

---

So :

You don't need to check if it is hidden or not $().is(':hidden') because it is already checked in show function (See : if ( elem.style.display === "" && isHidden( elem ) ) { ....)

Answer by Amkhan for Show if hidden jQuery

A better solution would be to use a mouseEnter and mouseLeave like this snippet below:

This is in javaScript but will give you a better idea. If you want it in JQuery and having problems with it I can write it on Pluncker for you. Hope this will help

    function show_hide(id) {          var e = document.getElementById(id);          if (e == null){          } else {          if (!e.classList.contains('showClass'))                  e.className += " showClass";                  else                  e.className = "myclass";         }      }

.myclass {      opacity: 0;      margin-top: 25px;      font-size: 21px;      text-align: center;      -webkit-transition: opacity 1s ease-in;      -moz-transition: opacity 1s ease-in;      -o-transition: opacity 1s ease-in;      -ms-transition: opacity 1s ease-in;      transition: opacity 1s ease-in;  }  .showClass{ opacity: 1 }

  // image     
DELETE
  

---

Updated

function show() {    $("#deletebutton").show();  }    function hide() {    $("#deletebutton").hide();  }

        
        // image           
DELETE
  

Answer by Kumar M for Show if hidden jQuery

Can't you use .hover() and .toggle() functions? is mousemove must?

https://jsfiddle.net/tvwpdxum/1/

Answer by Victor for Show if hidden jQuery

Since you're using Jquery, a more efficient way to do what you want is using a .hover(handlerIn, handlerOut) callback, so you don't need to worry about creating a flag or something like that.

The handlerIn will be triggered only one time, when the mouse enter on the target div (as you can see on the console.log('show') call). The handlerOut will also be executed only one time, when the mouse leaves the target div.

On the example below, when the mouse hover #div-b the #div-a content will be visible and when it leaves, the content will be hidden:

$(function() {    $('#div-b').hover(      function() {        console.log('show');        $('#div-a').show();      },      function() {        console.log('hide');        $('#div-a').hide();      }    );  });

#div-a {    display: none;    padding: 20px;  }    .wrapper {    margin: auto;    background-color: darkcyan;    color: white;    height: 100px;    margin-bottom: 10px;  }    #div-b {    padding: 20px;    height: 50px;    background-color: black;    color: white;  }

  
    
      I'm visible!    
    
    
    Hover me  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72