Question

With the following function, I can animate a div to the left, but the problem is that, the div goes out of the screen area. Is there anyway that I can keep the #mydiv to go to the left within the #container only? If #mydiv is already on the left side, then it should just do nothing.

 $('.left').click(function() {
        $('#myDiv').animate({
            left: '-=30'
            }, 400, function() {
            // callBack
    });

HTML:

<div id="container">
        <a class="left" href="#">Left</a>
    </div>

Answer 1

in order to obtain this you need to verify that the div you want to move is positioned at least 30px from the left side of you #container.

$('.left').click(function() {
if (parseInt($('#myDiv').css('left')) >= 30) {     
    $('#myDiv').animate({
        left: '-=30'
        }, 400, function() {
        // callBack
    });

     }
 });

example : http://jsfiddle.net/X2TdJ/1/

If your #container will be positioned to the left of you body marginLeft will not stop and go outside of your #container div.

example here: http://jsfiddle.net/DAEsX/1/