0

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!

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.

| improve this answer | |
  • 1
    Thank you - this is getting closer. I already had the calendar code in a separate template, but outside the template group. I updated the jQuery, created the template called "calendar" and the calendar is sliding - but then turns white. Still at: link – SeaEdAssociation Sep 27 '18 at 13:47
  • Check I have updated the code. You are replacing the whole container so just remove , function() {$cal.fadeOut(250).remove();} from code. – Jainil Sep 27 '18 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.