Hamdi Baligh Hamdi Baligh - 7 months ago 29
Javascript Question

jQuery Dialog hover thumbnails using ASP.NET MVC 4

I have a little problem in making a small functionnality using jQuery and ASP.NET MVC 4.

I have a list of thumbnails, wich represents a list of products in my aplication :

<ul class="thumbnails">
@foreach (var thumbnail in Model.ForfaitsInThumbNail)
{
<!-- Now I Display Some infos about the thumbnail -->
<!-- This is the Dialog that I want to display when the cursor is hover every thumbnail -->
<div class='pop-up' id='pop-up'><h3>"@thumbnail.Forfait.Titre"</h3><p>"@thumbnail.Forfait.Description"</p></div>
</div>
<!-- This simply displays a description and the title of every product -->
}
</ul>


Well, I have a jQuery function that displays the pop-up menu customized to display the specific title and description of every product :

<script type="text/javascript">
$('.thumbnail').hover(function (e) {
$('#pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$('#pop-up').hide();
});
$('.thumbnail').mousemove(function (e) {
$("#pop-up").css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>


So this function is working well, but it is not satisfying all my needs, because it only displays the title and description of the last thumbnail, but I need a function that narrows every div that have 'thumbnail' and displays it's specefic title and description. Any Ideas ? I would be very thankful for your help :)

Edit

Here is my new function like suggested :

<script type="text/javascript">
$('.pointHere').hover(function (e) {
$(this).children('.pop-up').show()
.css('top', e.pageY + 20)
.css('left', e.pageX + 10)
.appendTo('body');
}, function () {
$(this).children('.pop-up').hide();
});
$('.pointHere').mousemove(function (e) {
$(this).children('.pop-up').css('top', e.pageY + 20).css('left', e.pageX + 10);
});
</script>


I made a div wich has a class pointHere, and when we click to it the child element pop-up is displayed :) that works fine :) but the mouseover function doesn't work, also the hover function doesn't hide the pop-up when the mouse is not hover the pointHere div.

Answer

The problem is with the id pop-up. It is not unique. You have the same Id for all of your thumbnails

Instead of binding hover on .thumbnail, bind it on .pop-up and use this to get hold of that div

$('.pop-up').hover(function (e) {
    $(this).show()
        .css('top', e.pageY + 20)
        .css('left', e.pageX + 10)
        .appendTo('body');
}, function () {
    $(this).hide();
});

Also, you have bad HTML. Your pop-up div is closed twice.