BlockUI: element blocking not working correctly in Firefox but appears to work in Chrome
I'm trying to use BlockUI to block elements of my page inside the $(document).ready() callback but seem to have inconsistencies between Firefox and Chrome. I create a simple page to demonstrate this difference:
- <html>
<head>
<title>BlockUI test</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script lang="javascript">
$.blockUI.defaults.applyPlatformOpacityRules = false;
$(document).ready(function() {
$("#testTable").block({message:null});
});
</script>
</head>
<body>
<table id="testTable" border='1'>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<input type="button" value="Click meh"/>
</body>
</html>
Loading this page in Chrome gives the expected result of graying out the table, and the button remains clickable. However, in Firefox, the whole page is blocked, as if I had called $.blockUI(). block() calls inside of other handlers appears to work correctly, but there appears to be something about calling it in the ready() callback that is wrong. Am I just "doing it wrong" or is this an actual problem? Thanks!