Question

188

horizontal scrolling div onclick with javascript or jquery

rated 0 times [ 190] [ 2] / answers: 1 / hits: 27944 / 13 Years ago, tue, july 26, 2011, 12:00:00

I have spent the last two days looking for a simple javascript or jquery code for this. I want to incorporate a horizontal scrolling div using javascript or jquery to display images and descriptive text for the work page of my web portfolio.

It would function very similar to the glide-onclick scrolling shown here: http://www.dyn-web.com/code/scroll/demos.php#horiz Unfortunately that code license is $40, and I am a broke student.

On loading of the page, three portfolio images will be shown. Extras are hidden in the overflow to the right. Onclick of a left arrow (I can create), a new image slide comes into view from the right. A right arrow click sends it back into overflow. I don't want scrollbars, just arrows controlling the slides.

Any help is much appreciated. Thanks.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ninaemiliaj

Add To Favorites

Follow

Total Points: 405

Total Questions: 112

Total Answers: 112

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

answered 13 Years ago dominics · Accepted Answer

You can just use code like this:

function FixMargin(left) {

    $(this).css(left, left);

}



$(document).ready(function () {



$('#rightbutton').click(function () {

    var left = parseInt($(#bitToSlide).css('left'), 10);

    $(#bitToSlide).animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));

});



$('#leftbutton').click(function () {

    var left = parseInt($(#bitToSlide).css('left'), 10);

    $(#bitToSlide).animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));

});



}

where your html looks like this:

<div id=slideleft class=slide>

    <div class=inner id=bitToSlide style=width:1842px>

        <table border=0 cellpadding=0 cellspacing=0>

            <tr valign=top>

                <td id=page1 style=width: 614px>

                </td>



                <td id=page2 style=width: 614px>

                </td>

            </tr>

        </table>

    </div>

</div>

and your css looks like this:

.slide

{

position:relative;

overflow:hidden;

height:365px;

width:597px;

margin:1em 0;

background-color:#E9ECEF;

border:0px

}



.slide .inner

{

position:absolute;

left:0;

bottom:0;

height:365px;

padding:0px;

background-color:#E9ECEF;

color:#333

}

I wrote the above a really long time ago - so you probably want to update it a bit (replace the table's with div's for example) but it works.

You obviously need the two buttons on there as well