Trying to make a div appear in the centre of a scrollable page - bug in my code?
<p>Just as a preface to make sure I am clear, I don't want the div to appear dead centre in the middle of the page, I want it in the middle of the viewable window. So if you imagine a long page and the user has scrolled down to near the bottom and clicks the button the div will appear in the centre of the screen near the bottom of the page.</p>

<p>here is my code, which doesn't work in chrome:</p>

<pre><code>                function centerdiv() {
var scrolledX, scrolledY;

scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrolltop;

var centerX, centerY;
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;

var leftoffset = scrolledX + (centerX - 100) / 2;
var topoffset = scrolledY + (centerY - 100) / 2;

 $('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left':
 leftoffset + 'px'});} 


            $(function() {
        $("html").ajaxStart(function() {
           centerdiv();
            $(".current div[name=popup]").show();
        });
        $("html").ajaxComplete(function() {
            $(".current div[name=popup]").hide();
        });
    });
</code></pre>

<p>Note, this is for an iphone mobile website and the ajaxstart function attaching to the html is crucial as it doesn't work on the iphone any other way on my website.</p>
