JQuery smoothly scrolls to positions inside a div with overflow

Question

I have a div full of content (dates). You can see 5 dates on the screen at any time. I want the arrow to the right of the div to scroll through the div showing the next 5 to the end, and vice versa, the arrow to the left will scroll left by 5 dates until it reaches the end.

How can this be achieved.

Some information ::

• each date has a width of 50 pixels, including all additions
• 90 to 120 dates
• Only 5 can be seen immediately.
• Dates scroll as part of webkit systems on mobile devices already.

Any ideas?

Wonderful

Answer 1

var offset = 0; // current scrolling "amount" $('#right-arrow').click(function() { offset += (50 * 5); // add a total width of 5 items to the scrolling amount if (offset > (number_of_dates * 50)) { offset = number_of_dates * 50; // don't exceed this limit } $('#div-to-scroll').animate({ 'margin-left': '-' + offset + 'px' }); }); $('#left-arrow').click(function() { offset -= (50 * 5); if (offset < 0) { offset = 0; // don't exceed this limit } $('#div-to-scroll').animate({ 'margin-left': offset + 'px' }); }); 

Answer 2

Are we talking about markup and CSS here? Because jQuery stuff is pretty simple.

As a last resort, you will need a wrapper div. This should have overflow: hidden; and fixed / auto width. Inside, where you place a div that contains dates, it should also be a fixed width, but very large to fit all dates. It should have position: relative; . Dates should be aligned using float: left; . Then your jQuery can animate the "left" CSS date property of the div. For instance. if someone presses the right arrow, then $('#dates').css('left', $('dates').position().left - 50 + 'px'); . You can also animate changes using jQuery aimate or CSS3 transitions .

Answer 3

Basically, you can wrap each "page" (5 elements) and scroll it by scrolling through jQueryTools for this: http://flowplayer.org/tools/scrollable/index.html

(just position it correctly and scroll through <ul> instead of <div> , for that matter)

but it’s better to understand how you do such things.

a way to do such things is to wrap a date container inside a DIV that has overflow: a hidden set, and then pull the container up [x] pixels as the height of the wrapper.

HTML + CSS:

 > <div class="wrapper" style="overflow:hidden; height:250px;"> // height is 5 x 50px per li for this purpose > <ul class="datesContainer" style="position:relative;"> > <li> some date </li> > <li> another date </li> > ... > </ul> > </div> > <a id="goUp">Go Up</a> 

And jQuery would be something like this:

 > $("#goUp").click(function(){ newOffset = parseInt($(this).css("top"))-250 $(".datesContainer").animate("top",newOffset,500); } 

I used constant numbers for this example, basically you get $ (". Wrapper"). height () to make it work at any height. In addition, you will have to process it when the user reaches the bottom of your list.

Hope this helps!

Answer 4

Based on Jose Faeti's answer, I changed the logic a bit and scrolled vertically instead of horizontally (the original question was horizontal, but this is another corner of the same basic strategy):

HTML:

 <div id="up-arrow">UP</div> <div id="rows-wrapper"> <div id="rows-container"> <div class="row-item">Row Item 1</div> <div class="row-item">Row Item 2</div> <div class="row-item">Row Item 3</div> <div class="row-item">Row Item 4</div> <div class="row-item">Row Item 5</div> <div class="row-item">Row Item 6</div> <div class="row-item">Row Item 7</div> <div class="row-item">Row Item 8</div> <div class="row-item">Row Item 9</div> <div class="row-item">Row Item 10</div> </div> </div> <div id="down-arrow">DOWN</div> 

CSS (you need to fill in the blanks, but this shows where it should overflow):

 #product-card-wrapper { height: 250px; overflow: hidden; } .row-item { float:left; } 

JS:

 var offset = 0; // current scrolling "amount" var row_height = $('.row-item').height() + 10; //calc height of item in row and compensate for some bottom margin var number_of_rows = Math.ceil(($('.row-item').length / 2) * 10) / 10; //calc number of rows and round up (dividing by 2 as there are 2 items per row) $('#down-arrow').click(function() { if ((Math.abs(offset)) > (number_of_rows * row_height)-row_height) { // don't exceed this limit } else { offset -= (row_height); $('#rows-container').animate({ 'margin-top': offset + 'px' }); } }); $('#up-arrow').click(function() { offset += (row_height); if (offset > 0) { offset = 0; // don't exceed this limit } $('#rows-container').animate({ 'margin-top': offset + 'px' }); });