Question

Is it possible to implement jQuery horizontal scrolling in asp.net mvc? I think in this case it the same page with different div’s in it. But in my case on click of button I wan to load a different page with horizontal scrolling.

jQuery Sample:

http://tympanus.net/Tutorials/WebsiteScrolling/index.html

Thanks

Answer 1

cool,

had a look at your ref page (http://tympanus.net/Tutorials/WebsiteScrolling/index.html), all it really does is scroll divs into view that are placed outside the viewport. there are many scrolling jquery plugins that do this, and in your case, all you need is a similar setup to the core concept on your ref page. I had a look at that and here is all that basically happens:

<script type="text/javascript">
    $(function () {
        $('ul.nav a').bind('click', function (event) {
            var $anchor = $(this);
            /*
            if you want to use one of the easing effects:
            $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
            }, 1500,'easeInOutExpo');
            */
            $('html, body').stop().animate({
                scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000);
            event.preventDefault();
        });
    });
</script>

i.e. for the 3 areas in that demo, 3 very distinct ‘actions’ are called via the jquery/js script. at best, the demo really simplifies your problem into a very clear and demonstrable approach to your problem -look at it closely, the answer is there! If ajax is required, then it’s just a matter of extending the above core code to embrace that (along with the html semantics of course).

hope this helps, as I’m certain you’re 90% of the way there anyway.