I am working with three divs: left, middle, and right. The middle div will contain content, while the left and right divs are designated for buttons that will scroll the middle div. Specifically, I plan to display lists of pictures in the middle div. If a user wants to view pictures hidden on the right side of the middle div, they can simply click the right div to scroll it into view.
I hope my explanation is clear enough.
The current script I have for controlling these divs is not functioning as expected. I am seeking guidance on an alternative script that can effectively manage these elements.
Below is the part of the script that I am struggling with:
$(document).ready(function () {
$("#left").click(function () {
var leftPos = $('.DivDataMain').scrollLeft();
$(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600);
});
$("#right").click(function () {
var leftPos2 = $('.DivDataMain').scrollLeft();
$(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600);
});
});
FIDDLE:
Scroll Left to Right with Button
Any assistance you can provide would be greatly appreciated.