CODEWITHSUNDEEP
phpjqueryhtmlcss
Pattatharasu Nataraj
Pattatharasu Nataraj

Reputation: 248

javascript hover on dynamic function not working

hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case? 

<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);">
          <div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" >
                <p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);">
          </div>


<script>
  function GoView_respond(id){
      console.log('hovering');
      document.getElementById("pending_req_"+id).style.display="block";
    }

     var cl=0;

  function ExitView_respond(id){
     console.log('not hovering');
    if(cl!=1){
     document.getElementById("pending_req_"+id).style.display="none";
    }
 }
 </script>

Upvotes: 0

Views: 69

Answers (1)

Cool Guy
Cool Guy

Reputation: 19

Well, there are various ways to achieve this. You could for example trick by setting a little timeout that will allow the mouse to reach the user details html node and vice-versa.

Let me be more explicit, according to your case

<?php
class Friend
{
    public $Friend_id;
    public $Friend_details;
    public $Friend_image;
    public function __construct($id, $details, $image){
        $this->Friend_id = $id;
        $this->Friend_details = $details;
        $this->Friend_image = $image;
    }
}
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
?>
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" />
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>">
    <h5>User details</h5>
    <?php echo $print->Friend_details; ?>
</div>
<style>
.user_details {
    display: none;
    background-color: lightgray;
    width: 250px;
    padding: 15px;
}
</style>

<script>
var userImages = document.getElementsByClassName('user_image');

for(var i = 0; i < userImages.length; i++){
    var
        userImage = userImages[i],
        userId = userImage.id.replace('user_image_', ''),
        thisUserDetails = document.getElementById('user_details_' + userId),
        mouseOutTimeout = 100, // Here is the trick
        mouseTimer = null; // Needed in order to hide the details after that little timeout

    userImage.addEventListener('mouseout', function(){
        mouseTimer = setTimeout(function(){
            thisUserDetails.style.display = 'none';
        }, mouseOutTimeout);
    });

    userImage.addEventListener('mouseover', function(){
        clearTimeout(mouseTimer);
        thisUserDetails.style.display = 'block';
    });

    thisUserDetails.addEventListener('mouseout', function(){
        var _this = this;
        mouseTimer = setTimeout(function(){
            _this.style.display = 'none';
        }, mouseOutTimeout);
    });

    thisUserDetails.addEventListener('mouseover', function(){
        clearTimeout(mouseTimer);
    });
}
</script>

Note: I've used getElementsByClassName and addEventListener here, that are not compatible with IE8 and earlier. Check this link for getElementsByClassName compatibility and this one for addEventListener.

Hope it help.

Upvotes: 2

Related Questions