Javascript for scrolling calendar

Question

I'm trying to implement this: https://www.viget.com/articles/building-an-expressionengine-mini-calendar-scroller/

However comments are closed and the contact link goes to an agency. Help! I'm clearly not adding the Javascript snippet correctly, everything else seems to work. What am I doing wrong? Here is the test page:

https://www.sea.edu/sea_currents/calendar-test

Calendar is in the lower left, the arrow should slide the old month out of the way and pull in the new one, rather than directing to a new page.

Thanks!

Answer 1

You need to make some changes to the jQuery. See below:

$(document).ready(function() {
    $(document).on('click','.nav-calendar a',function(e){
        e.preventDefault();
        var $this = $(this),
            action = $this.parent().attr('class'),
            $wrapper = $this.closest('div.scroller-wrapper'),
            $cal = $this.closest('div.content');

        $.get($this.attr('href'), function(data) {
            var $d = $(data),
                delta = (action === 'prev') ? '-100' : '100';

            $d.css({
                'left' : delta + '%',
                'position' : 'absolute'
            }).appendTo($wrapper);

            var newHeight = $d.height();

            $cal.html($d).animate({
                'left' : '-='+delta+'%'
            }, 250);

            $wrapper.animate({
                'height' : newHeight
            }, 350);
        });     
    });
});

From the above code $.get() is the Ajax request which loads the HTML content from the URL provided in next/previous arrow links.

Also, you need to create another template which will only have the calendar code which will be used by the Ajax request URL.