I am a complete novice to JS, and I am trying to do what I thought would be a simple task. I have a table that I would like to scroll horizontally with a 'previous' and 'next' button. I used the animate function to move the table left and right. The buttons are PNGs that link to a function like this:

function showMore() {
$('#thumbstable').animate({"marginLeft": "-=354px"}, "slow");

The problem is if the table is at the beginning or end, clicking previous or next moves it completely out of view, so I need some way to disable the previous button at the left-most portion and disable the next button at the right-most.

I tried setting a conditional statement based on the margin left value of the object. For example, the previous button:

function showPrevious() {
var marginValue = parseInt(document.defaultView.getComputedStyle(document.getElementById(thumbstable), '').getPropertyValue('margin-left'))
if( marginValue > 0 ){
$('#thumbstable').animate({"marginLeft": "+=354px"}, "slow");


But I couldn't get this to work. I also thought that using some sort of counter variable and a conditional statement might work, but I have no idea how to set up the variables to do that in JS. For example, setting a variable to 0 and adding 1 every time the next button is clicked and using a conditional statement to constrain the movement to a certain number of clicks in either direction.

If anyone has an idea about how to do this, please let me know.