show/hide jQuery dialog box on mouseover

Question

I'm trying to make a mouseover map area on an image that must display a dialog box when the mouse is over. The dialog box content is different, depending on which area it is.

My script actually always show all the dialog boxes.

Here is the jsFiddle I created : http://jsfiddle.net/U6JGn/4/

and the javascript :

$(function() {
$('#box').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide();

for (var i = 0; i < 2; i++) {
    $( "#elem"+i ).mouseover(function() {
        $( ".box"+i ).dialog( "open" );
    });

    $( "#elem"+i ).mouseout(function() {
        $( ".box"+i ).dialog( "close" );
    });
}
});

What am I doing wrong ?

Kumkumagai

Answer 1

Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.

Since Ids need always to be unique we need to do some changes in your html and css

ids: #box0, #box1

class: .box

$(function() {
         $('.box').each(function(k,v){ // Go through all Divs with .box class 
               var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false });
                    $(this).parent().find('.ui-dialog-titlebar-close').hide();

                 $( "#elem"+k ).mouseover(function() { // k = key from the each loop
                    box.dialog( "open" );
                    }).mouseout(function() {
                    box.dialog( "close" );
                });
          });
    });

working example: jsfiddle

Parts

This works for the display, but i must increment the box id or class because I want many different boxes' contents. This solution shows only one box. – Kumkumagai

Then your #id should be unique, #box0 #box1 etc, and then your class should be box, i will update it. – Parts

That's it ! Thanks for your help, I was missing the box stuff. – Kumkumagai

Answer 2

Try this:

for (var i = 0; i < 2; i++) {
    (function(i) {
        $( "#elem"+i ).mouseover(function() {
            $( ".box"+i ).dialog( "open" );
        });

        $( "#elem"+i ).mouseout(function() {
            $( ".box"+i ).dialog( "close" );
        });
    })(i);
}

UPDATE:

Take a look at the demo

Cucullate

Answer 3

http://jsfiddle.net/U6JGn/129/

Modified JQuery code....

$(document).ready(function() {



for (var i = 0; i<= 1; i++) {    

        $( "#elem"+i ).on('mouseenter',function() {
            var st = $(this).attr('Id').replace('elem','');
            $( ".box" + st).css('display','');
        });
        $( "#elem"+i ).on('mouseout',function() {
            var st = $(this).attr('Id').replace('elem','');
            $( ".box"+st ).hide();
        });

    }


    });

Izy