OK, I found a workaround: I wrap the whole document with a div and use
that div's left offset value as a calibrator. This works in FF3 and
IE7, but not Safari.
My questions are:

1 - Is there a simpler way to do the wrapping than what I'm doing?
2 - Is there a better way to create the "patched" offset?
3 - Does anyone know why this doesn't work in Safari?

My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
    <script type="text/javascript" src="jquery.js" ></script>

        <script>
                (function($) {
                        var outer;

                        $.fn.old_offset = $.fn.offset;
                        $.fn.offset = function () {
                                offset = this.old_offset();
                                offset.left -= outer.old_offset().left;
                                return offset;
                        }

                        $(function() {
                                outer = $("<div style=\"margin: 0; overflow: 
hidden; position:
absolute;\"></div>");
                                $("body").children().appendTo(outer);
                                $("body").append(outer);
                                outer.height($(window).height());
                                outer.width($(window).width());

                                $(window).resize(function () {
                                        outer.height($(window).height());
                                        outer.width($(window).width());
                                });
                        });
                })(jQuery);

                $(function() {

                        for(var i=0; i< 200; i++) { 
$("#overflow_text").append('x'); }
                        offset = $("#coverme").offset();
                        $("#moveme").css(offset);

                        $(window).resize(function() {
                                $("#moveme").css($("#coverme").offset());
                        });
                });

        </script>
</head>
<body dir="rtl" style="margin: 0;">
        <div style="background-color: blue; height: 200px; width: 200px"
id="coverme"></div>
        <div style="background-color: green; height: 100px; width: 100px;
position: absolute;" id="moveme"></div>
        <p id="overflow_text"></p>
        <span style="position:absolute; visibility:hidden; right:
-100px">text</span>
</body>

Thanks

Reply via email to