I am facing a challenge with a list of floated left divs inside another div. This inner block of divs can be hovered over to move it left and right. Each inner div, known as 'events', has class names that include a specific year.
Additionally, there is a range slider at the bottom where the values represent years. When the slider value changes, I want the first div with that matching year to slide into view.
You can view an example here:
Currently, changing the slider value updates the number, but I'm unsure how to smoothly bring the corresponding div into view due to their floating layout preventing absolute positioning.
In the provided example, the last event div has a class of 'year1998' which would be a suitable test case for the code.
var slider = $('#range-slider'),
textbox = $('#range-no');
slider.change(function() {
var newValue = parseInt($(this).val());
textbox.empty();
textbox.append(newValue);
// Need assistance implementing something like this...
$('.year'+newValue).comeintoviewplease();
});
Thank you in advance for any guidance.