The jQuery UI button does not move when scrolling a div in IE6 and IE7 (and sometimes disappears)

Question

I have a div that scrolls (there are no scroll bars on the main page) and jQuery UI Button in scrollable content. In IE6 and IE7, the button does not scroll with the contents of the div, and this causes funny things if you hover over it when it is not in the correct position.

Here's an example (jQuery 1.5 is included in the header):

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" /> <script type="text/javascript" src="Lib/jquery-1.5.min.js"></script> <script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script> <div style="width: 400px; height: 300px; overflow: scroll;"> <div style="width: 400px; height: 1200px;"> Hello world<br /><br /> <a href='#' id='test'>test button</a> </div> </div> <script> $('#test').button(); </script> 

I found a workaround, but it is not perfect; I catch the scroll event and call .button('enable') on the button element (for some reason .button('refresh') did nothing). This does the scroll button correctly, but now the button appears outside the div when scrolling (it scrolls at the top of the top of the div and is still visible). Here is the code:

 <link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" /> <script type="text/javascript" src="Lib/jquery-1.5.min.js"></script> <script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script> <div class='scrollingDiv' style="width: 400px; height: 300px; overflow: scroll;"> <div style="width: 400px; height: 1200px;"> Hello world<br /><br /> <a href='#' id='test' class='scrollingButton'>test button</a> </div> </div> <script type="text/javascript"> $(function(){ $('#test').button(); $('.scrollingDiv').scroll(function() { $('.scrollingButton').button('enable'); }); }); </script> 

Answer 1

This seems like a bug in jQuery http://bugs.jqueryui.com/ticket/5281

The workaround is to set position:relative; into the scroll container.

As fracmak commented on this jQuery ticket: IE7 has problems with div overflows (both scroll and hidden). This is not something that ui-button controls really can control / detect.

Answer 2

Workaround # 2 added for accordion, tabs, input [type = submit], etc.: http://bugs.jqueryui.com/ticket/5281#comment:10

Answer 3

I think you need to add the following sentence at the beginning of the script tag:

  $(function(){ 

your code is here

});

this means that the script will load when the dom (page) is ready.

you can also add the attribute type = "text / javascript" to the tag

I think it will work!