Force horizontal scroll to item within div so it becomes visible

Sat Oct 10, 2015 3:58 pm

Hi,

I have a DIV that contains 10 small images, each next to each other forming a single horizontal row.

These images are within a single cell grid, and are placed into position using CSS.
The DIV (when tested in the Appery web test page displays a horizontal scroll bar and allows scrolling from left to right to display the images (only 3 images actually fit on the screen at any one time).

However, when testing on mobile devices, the scroll (when the finger is swiped from left to right/right to left) is very hit and miss, and the experience will definitely ensure negative feedback from users.

If I were to add scroll buttons (like a left arrow and right arrow) either side, I need to be able to programmatically scroll the row of images left and right.

Is there a way to do this within the Appery system?
I've looked at the "document.getElementById('MyID').scrollIntoView(true);" command but had no luck.

Example:
Each number below is an image, but only 3 of those images fit on the screen (one next to the other) at any one time.

0 1 2 3 4 5 6 7 8 9

I need to (by javascript) scroll the div so that any 3 images I like (consecutively) are displayed.( eg 234 or 456 or 789 etc)

Any help would be truly useful, many thanks.

Andy

Sat Oct 10, 2015 4:30 pm

Close this, I've figured it out:

/code

Code: Select all

 var x = $("[name=fav_div]").scrollLeft(); 
 x=x+ 20; 
 $("[name=fav_div]").scrollLeft(x);

/code

Sat Oct 10, 2015 8:25 pm

Hello Andy,

We are very sorry, but custom code is something outside the scope (http://devcenter.appery.io/support-po...) of our support.

Sun Oct 11, 2015 5:04 am

Thanks for the update, Andy!