Mike, I didn't bother to send you a screenie since I got this example
modified to show the overlay issue. It seems that if the blocked
element (form in this case) doesn't have a defined width, IE aligns
the top-left corner of the overlay with the top-left corner of the
first child element. Or something like that. In my example, if you
remove the "text-align" style from the H1, the overlay follows it to
the left. Similarly, if you remove the H1 tag altogether, the overlay
aligns with the top-left of the table. This behavior is only evident
to me in IE6. It took me several hours of systematically eliminating
CSS styles and page elements in the compiled output of my application
to isolate the behavior and add those conditions to the sample. Why
don't I ever get bored with this stuff? I can simply apply a "width"
style declaration to the form to make it work but that seems "wrong."
Something is telling me that this is the result of a known IE bug but
I can't seem to pull it from memory. It will probably be blatantly
obvious to others.

Thanks again!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>blockUI Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<style type="text/css">
#button { text-align: center; }
#myForm h1 { text-align: center; }
</style>
<script type="text/javascript">
$(function() {
        $.blockUI.defaults.elementMessage = "Please Wait...";
        $.extend($.blockUI.defaults.overlayCSS, { backgroundColor: '#00f' });
        $.extend($.blockUI.defaults.elementMessageCSS, {
                                 color: '#00a',
                                 backgroundColor: '#fff',
                                 border: '2px solid #2f4f4f'

        });

        $(function () {
                        $("#myForm").submit(function() {
                                        $(this).block();
                                        setTimeout(test, 1000);
                                        return false;
                        });

        });

        function test() {
                        $("#myForm")[0].submit();

        }
} );
</script>
</head>
<body>
<?php if (isset($_POST["insert"])) { ?>
       <p>First Name:&nbsp;<?php echo $_POST[firstName] ?></p>
       <p>Last Name:&nbsp;<?php echo $_POST[lastName] ?></p>
       <p>Age:&nbsp;<?php echo $_POST[age] ?></p>
<?php } else { ?>
<form method="post" name="myForm" id="myForm" action="<?php
$_SERVER['PHP_SELF']; ?>">
<h1>blockUI Test</h1>
 <table align="center">
                 <tr>
                                 <th>First Name</th>
                                 <th>Last Name</th>
                                 <th>Age</th>
                 </tr>
                 <tr>
                                 <td><input type="text" name="firstName" 
value=""></td>
                                 <td><input type="text" name="lastName" 
value=""></td>
                                 <td><input type="text" name="age" 
value=""></td>
                 </tr>
 </table>
<input type="hidden" name="insert" value="insertForm">
<div id="button">
        <input id="submitButton" name="submitButton" type="submit"
value="Submit">
</div>
</form>
<?php } ?>
</body>
</html>

On Apr 25, 8:06 am, "Mike Alsup" <[EMAIL PROTECTED]> wrote:
> > I thank you for providing support for your wonderful plugin. I'll be
> > using this one a lot. Probably even for things it wasn't intended :-)
>
> Well you're already doing that, Stuart!  This is an unusual use-case,
> blocking a page that you are leaving.
>
> > I'm not sure I fully understand the setTimeout() bit.
> > Am I correct in assuming that it is used to allow the plugin to
> > complete the DOM manipulation before the submit event fires?
>
> Yes.  Normally this is not necessary because typically blockUI is used
> during async operations, so the browser (IE) has idle time to fully
> render everything properly.
>
> > Does the plugin remove the blocked element from the DOM
> > when it is blocked or at least sometime during the blocking
> > process?
>
> No.  The blocked element, the form in your case, is not removed from the DOM.
>
> > If you would be so kind as to providing a quick run-down on how
> > the iframe is positioned in your code
>
> The positioning code is browser dependent.  For IE6 (and IE7 in quirks
> mode), style expressions are used.
>
> Mike

Reply via email to