CODEWITHSUNDEEP
jquerymouseeventunbind
earachefl
earachefl

Reputation: 1890

Problem binding mouse events

I have a table of images. Each row, when moused over, shows its image in a previously hidden div that's been absolutely positioned. When I mouse over the now shown image, I want to unbind the tr mouseleave events so that the image doesn't flicker, and then rebind the mouseleave events when I leave the image div.

I'm able to unbind the mouseleave event, but rebinding causes the flickering to occur. The relevant code:

<table border="1" id="photoTable">
<tbody> 
    <tr class="item">
        <td class="filename">
            GraphDataCAQ3UW88.png
        </td>
    </tr>
    </tbody>
</table>
<div id="thisPhoto"></div>

css:

#thisPhoto{
display:none;
position:absolute;
left:250px;
top:150px;
border: 1px solid black;
background-color:white;
padding:20px;
z-index:2;
}

js:

$(document).ready(function(){

(function($){
    $.fn.getThisPhoto = function(){
        return $(this).each(function(){
            //I've left out the code which gets the data to pass to $.get()
            $.get('administration/PhotoManagement/thisPhoto.cfm',
                data,
                function(response){
                    $('#thisPhoto').html(response).show();
                }
            );
        });
    };
})(jQuery);

   $('tr.item').hover(function(){       
    $(this).getThisPhoto();
},
function(){
    $('#thisPhoto').hide();
});

$('#thisPhoto').mouseenter(function(){
    $('tr.item').unbind('mouseleave');
}).mouseleave(function(){
    $('tr.item').bind('mouseleave', function(){
        $('#thisPhoto').hide();
    });
});

});

EDIT: I hacked it by wrapping the whole shebang in a div and setting mouseout on that div to trigger the hide() and bind() functions... not exactly what I wanted, but it'll do in a pinch.

Upvotes: 0

Views: 248

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You don't need to bind and unbind the event, you need to use a different design pattern.

Take a look at this fiddle: http://jsfiddle.net/Diodeus/gHa4u/1/

Upvotes: 1

lsuarez
lsuarez

Reputation: 4992

I am uncertain whether this model will work for your requirements, but consider making the div#thisPhoto into individual divs inside your tr. This way, while you are moused over the image, you are still moused over the table row. For instance, the markup would be something like:

<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image001.jpg" />
        </div>
        Image001.jpg
    </td>
</tr>
<tr>
    <td>
        <div class="thePhoto">
            <img src="http://www.mysite.com/images/Image002.jpg" />
        </div>
        Image002.jpg
    </td>
</tr>

If you give div.thePhoto a position: relative style, you can then give the div.thePhoto > img a position: absolute style and position it relative to the top left corner of the table cell. This way, you only bind a .hover() event to each table row to .find("div.thePhoto") and display or hide its child img element.

See this fiddle for an example.

Upvotes: 1

Related Questions