0

I am building a list, with an auto overflow. Currently when a list is clicked it expands to show more content via jquery. When it does this with a list element originally below the viewport of the screen it goes to the top and you have to scroll to see what you clicked. Is there a way to either keep the screen from moving or to center on the element that was clicked so it remains in view?

The code is below:

       $('.expand').click(function() {
              $(".expanding-tab").hide();
              $(this).siblings('.expanding-tab').toggle();
              $('.main-tab').removeClass('tab-highlight');
              $(this).children('.main-tab').toggleClass('tab-highlight');
        });
NathanKTC
  • 81
  • 2
  • 13

1 Answers1

1

The code provided below is based entirely on this link, which proposes a way to scroll the view of the browser to the position of an element. It contains some minor tweaks to suit the question that was askek. I also extensively commented the code, since the link lacks severely in explaination.

// jQuery.fn is shorthand for jQuery.prototype and allows
// for the extension of the jQuery function set with
// custom functions.
// See: http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean
jQuery.fn.scrollView = function() {
    return this.each(function() {
        // This gives us the amount of pixels that is between
        // the element and the top of the window.
        var margin_top = jQuery(this).offset().top

        // Here you can define an offset that leaves some space at the top
        // of the element
        var offset = 10px;

        // Calling .animate() on the body and html objects
        // makes the transition of these elements smooth (the duration
        // of the transition is provided in the second argument in ms)
        jQuery('html, body').animate({
            // Setting the scrollTop property makes the page scroll 
            // upwards by the specified amount pixels.
            // Setting scrollTop to margin_top makes the page scroll up
            // the exact amount of pixels to make the element appear
            // at the top of the window.
            scrollTop: margin_top + offset
        }, 200);
    });
}

After adding this function to the jQuery prototype, you can now call it on any element you want.

// Calling scrollView on the selected element(s) calls the function
// we defined above and makes the page scroll so that that element
// is now at the top (with an optional offset)
jQuery('#my-element').scrollView();

Finally, this is how you would add it as an onClick event to your element:

// Bind an onClick event listener to all elements with the 'expand' class
jQuery('.expand').click(function(event) {
    // Optionally you can use preventDefault() if it fits your needs
    event.preventDefault();

    // Call the scrollView function on the clicked element
    jQuery(this).scrollView();
});
Thijs Riezebeek
  • 1,762
  • 1
  • 15
  • 22
  • So does not appreciate link only answers, please add some information regarding your approach. – BenjaminPaul Feb 05 '15 at 17:17
  • I did not know that, however OP asked for me to provide it as answer, since it is what helped him. I will add some insight about the solution to the post in a minute. – Thijs Riezebeek Feb 05 '15 at 17:18
  • I did ask him to repost this, but perhaps for the sake of keeping SO happy you can just copy the text from the link? it was pretty short. As a side note, is there a way to offset it a bit? Like 100 pixels from the top instead of right on it? – NathanKTC Feb 05 '15 at 17:26
  • I editted my post, BenjaminPaul, could you retract your downvote? I changed the code slightly and also commented it extensively. – Thijs Riezebeek Feb 05 '15 at 18:22
  • @ThijsRiezebeek This is not working in Firefox, I changed the `jquery('html, body').animate` to `jquery('.container')` and it still did not work, although the functionality improved in chrome. – NathanKTC Feb 05 '15 at 18:23
  • What version of firefox are you using, `jQuery('html, body').animate()` should work in firefox, see: http://jsfiddle.net/4etct/238/ – Thijs Riezebeek Feb 05 '15 at 18:27
  • @ThijsRiezebeek I'm running FF35 on mac. The issue was I was running prevent default too late. It works crossbrowser now. Thanks! – NathanKTC Feb 09 '15 at 16:47