CODEWITHSUNDEEP
jqueryasp.net-mvc-3
CoolArchTek
CoolArchTek

Reputation: 3839

jQuery horizontal scrolling in asp.net mvc

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

Upvotes: 0

Views: 981

Answers (2)

jim tollan
jim tollan

Reputation: 22485

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.

Upvotes: 1

Jason Kulatunga
Jason Kulatunga

Reputation: 5894

You could possibly try creating a horizontal scrolling animation in css, then when the button is clicked, display that animation while loading the next page via ajax, once the page is done downloading, populate the dom with the page content in the next div, and end the css animation.

Upvotes: 1

Related Questions