jquery - How to restrict the div to margin right or left

Question

I have created a custom scroll. In which I am shifting the contents right and left by increasing or decreasing the margin. I want to restrict the div not to margin more when the last or first content is visible or you can say I want to make it like scroll. How I can restrict the div not to move anymore

$('#left').live('click' , function(){
$('#myDiv').css("margin-left","-=10px");

})
$('#right').live('click' , function(){
$('#myDiv').css("margin-left","+=10px");

})

JS Fiddle

Answer 1

Define and maximum limit for margin left or right, then use this value to compare before changing its position.

var maxMargin = 500, minMargin = 20;

$('#left').on('click' , function(){
    if($('#myDiv').css("marginLeft") > minMargin) {
        $('#myDiv').css("margin-left","-=10px");
    }
});

$('#right').on('click' , function(){
    if($('#myDiv').css("marginLeft") < maxMargin) {
        $('#myDiv').css("margin-left","+=10px");
    }
});

And use .on() rathan than .live(), as it has been deprecated.