CODEWITHSUNDEEP
javascriptjqueryhtml
Hulk
Hulk

Reputation: 34170

jquery hover on dialog

<div id="view"></div>
<div class="bar" style="padding:0px;" id="bar">
    <script>
       var bar = '<img class="myclass" src="button.png" >&nbsp&nbsp' ;
       $view = jQuery('#view') ;
       $view.dialog({ 
          height: 650, 
          width: 650, 
          buttons: { "welcome" :        
             function() { msg() ; } 
          },
          open: function(event, ui) 
           { if (full_toggle == 1) 
             {             
                $bar.dialog('open') ;
             } 
            }
          }) ;
        bar = $(".bar", "#view").dialog({ 
                 height: 30, 
                 width: '100%',
                 textAlign : "justify",  
                 marginLeft : "auto",
                 marginRight:"auto"
         })
    </script>
</div>

In the above script since bar is a dialog how can i do a hover or mouseover property on bar

Upvotes: 0

Views: 3397

Answers (3)

Fitzchak Yitzchaki
Fitzchak Yitzchaki

Reputation: 9163

You don't need to mix javascript code with HTML. you can put it on the HEAD section inside $(function(){}); like the bellow code.

$(function(){
     $('.bar').hover(
        function(){ alert('Hover!'); },
        function(){ alert('Hover Out!'); }
     );
});


after saw your updated the question about the dialog:

jQuery UI dialog render some html. I suggest you hook in into the html that you want to hover.

For example:

$('.ui-dialog').live('hover', function(){ alert('Hover!'); } );

You can also use:

$view.dialog({
       open: function(){ 
            $('.ui-dialog').hover( function(){ alert('Hover!'); } });
       }
});

Look here for additional resource.

Upvotes: 1

RSolberg
RSolberg

Reputation: 26972

 $('#bar').hover(function(){ 
        alert('I was hovered...'); 
        //function code here...
    },
    function(){ 
        alert('No longer hovered...'); 
        //function code here...
    }
 });

I would also recommend modifying your code a bit... Its cleaner to read if you put all of the HTML elements in there such as your image and then at the bottom of the page, place your document ready jQuery code that initializes all of the other items like dialogues, etc. Placing JavaScript at the bottom of your page will improve load times.

Upvotes: -1

Sarfraz
Sarfraz

Reputation: 382776

How about this:

 $('.myclass').mouseover(function(){
   // whatever....
 });

Or

 $('.myclass').hover(function(){
   // whatever....
 });

Upvotes: 2

Related Questions