making a dialog hidden

All,

How is that a dialog is hidden and brought up on mouseover event and onmouseout event (ex:like media player controls)

link

<div class="bar" style="padding:0px;" id="bar"></div>
<scrip开发者_JAVA百科t>
bar = $(".bar", "#view").dialog({ 
             height: 30, 
             width: '100%',
             textAlign : "justify",  
             marginLeft : "auto",
             marginRight:"auto"
     })
</script>

Thanks........

add:

autoOpen: false,

On the mouseover:

$(".bar", "#view").dialog('open')

On mouseout:

$(".bar", "#view").dialog( 'close' )

http://jqueryui.com/demos/dialog/#method-close

Figure out what you want to mouse over and use the hover:

  $('#myselect').hover(
        function()
        {
            $(".bar", "#view").dialog("open");
        },
        function()
        {
            $(".bar", "#view").dialog("close");

        }
    );

EDIT: I looked again at your question, and am making a HUGE assumption that you have not used dialog previously so here is more information:

Assume you have an element you want to make a dialog:

<div id="view">
    <div class="bar ui-dialog" style="padding:0px;" id="bar"></div>
</div>

Assume you have another element that you want to mouse over to show/hide that dialog:

<div id="myselect"></div> 

your dialog script only needs to be:

  $(document).ready(function()
    {
     $(".bar", "#view").dialog({
            autoOpen: false,
            height: 30,  
            width: '100%', 
            textAlign : "justify",   
            marginLeft : "auto", 
            marginRight:"auto" 
      });
  });

Note the added autoOpen: false; which makes it closed originally.

Well I guess, if the dialog is hidden, you cannot "mousover" it and display it.
But for "manually" open and close the dialog, use the open and close methods.

If you want it position beside the mouse, make the dialog position:absolute and display:none. You then add a mouseover to whichever element,

e.g.

$('#theElement').mouseover(e){function(){
  $("#dialog").css({"top":e.pageY,"left":e.pageX,"display":"block"});
});

e.pageY and e.pageX give you the position of the mouse. You can then play with this, adding 10 for example to offset it a little.

As well as the above css you'll need to make you're element visible. You then add a mouseout event in which you just make your dialog invisible.

I prefer to us the hover event which has 2 function calls, one for mouseover and one for mouseout.

Ehm add display:none, to style attrbute.