Question

<style type="text/css">
    #box { background: red; width: 100px; height: 100px; color: #fff; line-height: 100px; }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

        $('a#clickMe').click(function(e) {
            e.preventDefault();
            $('#box').css('position', 'absolute').animate({
                'left' : '+=100px'
            }, function() {

                    if ($('#box').offset().left > $(document).width()) {
                        alert('that is far enough')
                    }

            });

        });
    });
</script>

<a href="" id="clickMe">Click Me</a>

<div id="box">I Move!</div>

I’m trying to alert “that is far enough” when the box reaches the end of the page. But the alert never shows.

EDIT

Never mind, figured it out. I had to use $(window).width() instead of $(document).width();

Answer 1

Because moving the element to the left is expanding the width of the document.

Try adding this css:

#wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    margin:0;
    padding:0;
}
#box{ 
    background:orange;
    top:0;left:0;
}

---

<div id="wrapper">
    <a href="" id="clickMe">Click Me</a>

    <div id="box">I Move!</div>
</div>

Example: http://jsfiddle.net/UhgM5/1/

---

EDIT: Updated to make it FF compatible. Thanks to @Tomalak Geret’kal.