根据div的内容左右滑动div？

Question

First off, I do apologize if this is a bit vague. I will try my best to explain this as best as I can.

I am trying to create a slideshow affect with a div content.

the content of the div is not images but they are HTML stuff.... buttons to be exact.

I have a div with an overflow hidden and an inner div inside this div with a width of 500000px. I know this is a ridiculous width size but i only done this because the content of this div is pulled from a database and i don't know how much data might be in there in the future. i did try width:auto; but that didn't work.

anyway, this is what I have in my page:

<div style="padding-left:15px; overflow:hidden;">
<div class="innerBottom" style="width:500000px;">
<?PHP echo $date_list; ?>
</div>
</div> 

now, I need to create a function using jquery that would allow me to slide the innerBottom to left or right using two buttons.

for example if the content is pulled from the database and there is not enough content for the slide to work then the slide is disabled but if there is enough content then the slide to the right is enabled at first and when the slided to the right once, then the slide to left is enabled.

I hope this makes sense and someone could help me out with this.

I did try something like this using jquery:

    <script>


    $("#button-bottom").click(function () {
  $('.innerBottom').animate({'margin-left':'3px'});
}, function() {
 $('.innerBottom').animate({'margin-left':'1003px'});
});

</script>

but that only does the left slide once and the inner div disappears for good.

Thanks in advance

Answer 1

Here's one super simple example I wrote quickly.. see if you can transform it for your needs. Good luck!

http://jsfiddle.net/e4g9h/1/

HTML

<div id="mainWrapper">
    <div id="wrapper">
        <div id="slider" style="">
            <div class="contentDiv">
                <input type="button" class="buttons" value="Button 1"/>
            </div>
            <div class="contentDiv">
                <input type="button" class="buttons" value="Button 2"/>
            </div>
        </div>
    </div>
    <div id="left" class="triggerSlide">Go Left</div>
    <div id="right" class="triggerSlide">Go Right</div>
</div>

CSS

#mainWrapper{
   width: 800px;
   }

#wrapper{
   width: 800px;
   height: 100px;
   overflow: hidden;
   border: 1px solid black;
   }

#slider{
   width: 1600px;
   text-align: center;
   }

.contentDiv{
   width: 800px; 
   float: left;
   }

.buttons{
   width: 600px;
   height: 90px;
   }

.triggerSlide{
   text-align: center;
   padding: 5px;
   display: inline-block;
   width: 100px;
   border: 1px solid red;
   cursor: pointer;
   }

Jquery

$(document).ready(function(){
var margin = 0;
$('.triggerSlide').on('click',function(){
    var amountDivs = $('.contentDiv').length;
    var whereTo = $(this).attr('id');

    whereTo == 'left' ? margin -= 800 : margin += 800;

    if(parseInt(margin) > 0){
        margin = 0;
        return false;
        }
    else if(margin <= -Math.abs(amountDivs * 800)){
        margin = -Math.abs((parseInt(amountDivs) -1) * 800);
        return false;
        }

    $('#slider').animate({
        marginLeft: margin
        });
    });
});