Creating a vertical slider with an unordered list

Question

Creating a vertical slider with an unordered list

Looking to create a vertical menu with a fixed height that smoothly slides up and down when the arrow buttons are clicked.

I'm struggling to figure out how to properly use offsets to determine where to navigate to. Right now, I am using the relative offset from the next list item and navigating there, but it's not functioning as intended. It seems incorrect. I believe I need to check if the bottom of the unordered list is visible in the div. If so, the downward arrow should no longer move. But how can I check for this?

    //get position of next element
    var offsetNextLi = jQuery($nextElement).position();

    $liScrolledto = $nextElement;

    jQuery("ul#inline_navigation").animate({
        scrollTop: offsetNextLi.top
    }, 500);

Here is my fiddle:

http://jsfiddle.net/GxL8v/

javascript jquery html css

Answer 1

Answer №1

Your example utilizes a constant li height, allowing for the use of a constant stepping technique or calculating the next invisible outer li element. I have created a JSFiddle to demonstrate this: http://jsfiddle.net/GxL8v/3/

(function($) {
$(document).ready(function () {
     //SLIDE UP
    jQuery("#arrowup").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before up', y, step);
        if (y >= 0) {
            y -= step;
            console.log('after up', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

    //SLIDE DOWN
    $("#arrowdown").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var h = $ul.height();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before down', y, step);
        if (h >= y) {
            y += step;
            console.log('after down', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

});
}(jQuery));

This code is provided for educational purposes and is not optimized. It retrieves the "ul" list on every click, calculates the relative coordinate using jQuery's scrollTop() function, and considers whether the y value crosses any borders.

The approach for moving up and down is similar, with only the sign of the step changing from positive to negative. For greater reusability and optimization, consider implementing keypress functionality as well.

Answer 2

Your example utilizes a constant li height, allowing for the use of a constant stepping technique or calculating the next invisible outer li element. I have created a JSFiddle to demonstrate this: http://jsfiddle.net/GxL8v/3/

(function($) {
$(document).ready(function () {
     //SLIDE UP
    jQuery("#arrowup").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before up', y, step);
        if (y >= 0) {
            y -= step;
            console.log('after up', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

    //SLIDE DOWN
    $("#arrowdown").on("click", function () {
        var $ul = $('#inline_navigation');
        var y = $ul.scrollTop();
        var h = $ul.height();
        var $firstChild = $ul.children().first();
        var step = $firstChild.outerHeight() + parseInt($firstChild.css('marginBottom'),10);

        console.log('before down', y, step);
        if (h >= y) {
            y += step;
            console.log('after down', y);

            $ul.stop().animate({
                scrollTop: y
            }, 100);
        }
    });

});
}(jQuery));

This code is provided for educational purposes and is not optimized. It retrieves the "ul" list on every click, calculates the relative coordinate using jQuery's scrollTop() function, and considers whether the y value crosses any borders.

The approach for moving up and down is similar, with only the sign of the step changing from positive to negative. For greater reusability and optimization, consider implementing keypress functionality as well.

Creating a vertical slider with an unordered list

Answer №1

Similar questions

Pictures in Windows 7 have shifted to the left

Error message: "Angular dependencies and provider not accessible"

Running JavaScript code without blocking the main thread

Perform a function within another function in Vue

Is it possible to specifically focus on Google Chrome?

Obtain the current user's Windows username without relying on the ActiveX object

Implement generics within the `setState` function in a React.js and TypeScript application to ensure that it returns a string value

Clicking on a link with JQuery does not fire the action when the href attribute is set to "#open-site"

Struggling with loading external scripts within background.js in Chrome extensions?

Is Proxy.apply() not functioning correctly on Node.js? I'm unsure if this is a bug or if I am implementing it incorrectly

Tips for defining types for specific CSS properties in TypeScript, such as variables

How can state be shared between sibling components in React?

Click on the input to add or remove a value

"Maximizing Bootstrap Functionality with Angular 2: Step-by

height issue with a div

When defining the index of arrays using a loop, the function will return NaN

Invoking a JavaScript function using jQuery's AJAX

The Enigmatic Essence of TypeScript

Improving the layout and size of text within input fields

The padding of the iFrame does not match the padding of the source