Grow your CSS skills. Land your dream job.

jQuery slide

  • # January 31, 2013 at 3:33 pm

    Whew, ok, I think I finally got it.

    You’ll need to modify your HTML to match this:

    Then use this code (in function.js):

    var $larrow = $(‘.l-arrow’),
    $rarrow = $(‘.r-arrow’),
    $wrap = $(‘#ajaxwrapper’),
    $ajax = $(‘#ajax’),
    regx = /page:d+/,

    disableNav = function(){
    $larrow.add($rarrow).each(function(){
    var t, link = (location.href.match(regx) || ”)[0];
    $(this)
    .attr(‘href’, function(i, curLink){
    t = (curLink.match(regx) || ”)[0] === link;
    return t ? ” : curLink;
    })
    .toggle(!t);
    });
    },

    updateStuff = function(data, dir){
    var d = $( $.parseHTML(data) );
    // update navigation arrows
    $larrow.attr(‘href’, d.find(‘.l-arrow’).attr(‘href’) || ”);
    $rarrow.attr(‘href’, d.find(‘.r-arrow’).attr(‘href’) || ”);
    // slide stuff around
    $ajax.hide(“slide”, { direction: dir ? “right” : “left” }, 500, function(){
    $ajax.html( d.filter(‘#ajax’).html() );
    $ajax.show(“slide”, { direction: dir ? “left” : “right” }, 500);
    });

    };

    // check arrows at page load
    disableNav();

    $wrap.asfar({
    selector : ‘.l-arrow’,
    insert : function(urlFragment,target,data){
    updateStuff(data, true);
    },
    success : function(urlFragment,target){
    disableNav();
    // _gaq.push();
    }
    });

    $wrap.asfar({
    selector : ‘.r-arrow’,
    insert : function(urlFragment,target,data){
    updateStuff(data, false);
    },
    success : function(urlFragment,target){
    disableNav();
    // _gaq.push();
    }
    });

    # January 31, 2013 at 4:36 pm

    @Mottie Oh, wow. I can’t believe you wrote all that up. Very much appreciated.

    I’m not home at the moment but ill definitely test it as soon as I get home. Thanks again!

    # January 31, 2013 at 7:44 pm

    @Mottie So I tried your code and this is the result (pay attention to the tab title).

    [video src="http://f.cl.ly/items/2L23442L0P030q3X3M3F/ajax.mp4" /]

    # January 31, 2013 at 8:11 pm

    Hmmm, something else weird is going on then… I had to download each page to work with it. The only difference between what I have and what you have is the regex (no colon in the url). Test it out here:

    http://dl.dropbox.com/u/1510510/testing/slider/chrisburton-page1.htm

    # January 31, 2013 at 8:19 pm

    @Mottie Yeah, I’m not sure what’s going on. It also does the same thing in your example if you keep clicking around. This plugin wasn’t really meant for the type of site I have so I either have to build my own (with no knowledge of jQuery) or pretty much not have that functionality.

    # January 31, 2013 at 11:20 pm

    Ok, I see the problem. When the page address is updated , like `page:1` to `page:2`, the page reloads completely after the ajax call. You can see this happen if you open a fresh tab to page one, click to go to page 2 content. Now look at the browser history (right click on the back arrow). You’ll see that the second page loaded twice.

    I’m not good with server side stuff, but I think you can modify the `.htaccess` file to change this behavior to work with `page:1`. Otherwise, I think you’ll need to switch to using the hash (`#page1`) , or hash bang (`#!1`) method.

    # February 1, 2013 at 4:02 pm

    @Mottie I’ve reached out to other Kirby users to see if changing the pagination from `/page:2` to `/#page:2` or even `/!#/page:2` is possible. Still waiting to hear back.

    What I find odd is that I don’t recall this happening when I used the default installation with a simple jQuery fade.

    I’m also curious if creating my own Ajax solution would be beneficial rather than using someone else’s.

    # February 1, 2013 at 4:48 pm

    It actually isn’t that bad to use ajax to update your page – check out [this net.tuts](http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/).

    # February 2, 2013 at 12:20 am

    Thanks @Mottie. I’ll definitely try that tutorial out and let you know how it goes. Very appreciative for the help you’ve given.

    # February 4, 2013 at 2:13 pm

    **Update:** http://getkirby.com/forum/general/topic:330/

Viewing 10 posts - 16 through 25 (of 25 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".