CODEWITHSUNDEEP
jqueryjquery-uidialog
Hulk
Hulk

Reputation: 34170

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

Thanks........

Upvotes: 1

Views: 1073

Answers (5)

Fermin
Fermin

Reputation: 36081

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.

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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.

Upvotes: 1

AlfaTeK
AlfaTeK

Reputation: 7765

add:

autoOpen: false,

On the mouseover: 

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

On mouseout:

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

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

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816462

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.

Upvotes: 0

homelessDevOps
homelessDevOps

Reputation: 20726

Ehm add display:none, to style attrbute.

Upvotes: -1

Related Questions