Question

I’m trying to make my div scroll horizontally. My div is 100%, and I want the entire div size (100%) to scroll over to reveal more of the div. Like so:

I already have buttons that tells JS to scroll +150%, but I doesn’t work properly.

Now, heres the situation, my div is 100%, but, within that div, is an image thats 800×500, which I want to vert/hori centre within the 100& div.

So when I press the arrow, I want it to move div1 to div2, and then div2, to div3… ect.

Thanks

Here is my code

HTML:

<div class= "edge_container" data-stellar-ratio="3">

        <div class = "edge_wrapper">

            <div class="OLLIEJ_Welcome"> <!--id="stage0" data-slide="0">-->
                Hello &amp; Test
            </div>

            <div class="EDGE_idea"> <!--id="stage1" data-slide="1">-->
                IDEAS &amp; CONCEPTS
            </div>

            <div class="OLLIEJ_002"> <!--id="stage2" data-slide="2">-->
                RESEARCH &amp; DEVELOPMENT
            </div>

            <div class="OLLIEJ_003"> <!--id="stage3" data-slide="3">-->
                BUILD &amp; PRODUCTION
            </div>

        </div>

    </div>

CSS:

.edge_container{
    position:absolute;
    height: 550px;
    overflow: hidden;   
    width:100%;
    white-space: nowrap;


    display:block;

    top: 50%;
    margin-top: -250px;

    background-color:#00FFFF;
}

.edge_wrapper{
    /*position:absolute;*/
    width: 300%;
    white-space: nowrap;
    vertical-align: top;
    background-color:#3366FF;

}

.OLLIEJ_Welcome{
    height: 500px;
    width: 800px;
    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;

}

.EDGE_idea{
    height: 500px;
    width: 800px;

    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;

}


.OLLIEJ_002{
    height: 500px;
    width: 800px;
    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;
}


.OLLIEJ_003{
    height: 500px;
    width: 800px;

    display: inline-block;
    white-space: normal;
    margin-left: 50%;
    left: -400px;
    padding-left: 2px;

}

JS:

button_right_0.click(function (e) {
        //dataslide = $(this).attr('data-slide');

        if(horSlide_0 < 3){
            console.debug("Button Pressed");
            $('.edge_wrapper').animate({marginLeft: '-=100%'},1000, 'easeInOutQuint'); 
            //horSlide_0 ++;
        }
        //hideButtons(dataslide);

    });

Answer 1

You need to have two div elements. The first one acts as mask, showing only the content you wish (i.e. each slide). You then have another div inside of that which holds all of the elements. Something like this should work for your needs:

<div id="slider_mask">
    <div id="slider_content">
        <img src="src/to/img1.jpg" />
        <img src="src/to/img2.jpg" />
    </div>
</div>

Your CSS should look something like this (you can use jQuery to calculate the overall width of #slider_content, based on the outerWidth() of its child nodes:

#slider_mask {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slider_content {
    width: 2400px; /* 800 * 3 */
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
    #slider_content img {
        width: 800px;
        height: 500px;
        float: left;
    }

Now with your markup, you can handle the keypress event via jQuery, to animate left property of #slider_content:

var curr_left = 0,
      content = $('#slider_content');

$(window).keyup(function(e) {
    // Right arrow key:
    if(e.which == 39)
    {
        // Animate to the left if it's not already set:
        if(curr_left <= 0 && curr_left > -1600)
        {
            content.animate({ 'left': (curr_left - 800) }, 'fast', function() { 
                curr_left -= 800 
            });
        }
    }

    // Left arrow key:
    else if(e.which == 37)
    {
        if(curr_left < 0)
        {
            content.animate({ 'left': (curr_left + 800) }, 'fast', function() { 
                curr_left += 800 
            });
        }
    }
});​

I have put together a quick jsFiddle to show you a working example:
http://jsfiddle.net/Y2Ese/