making a dialog hidden

Question

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>
<script>
bar = $(".bar", "#view").dialog({ 
             height: 30, 
             width: '100%',
             textAlign : "justify",  
             marginLeft : "auto",
             marginRight:"auto"
     })
</script>

Thanks........

Answer 1

Ehm add display:none, to style attrbute.

Answer 2

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 functino calls, one for mouseover and one for mouseout.

Answer 3

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.

Answer 4

add:

autoOpen: false,

On the mouseover:

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

On mouseout:

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

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

Answer 5

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.