jQuery slide

[Mottie]

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();
}
});

[chrisburton]

@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!

[chrisburton]

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

http://f.cl.ly/items/2L23442L0P030q3X3M3F/ajax.mp4

[Mottie]

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

[chrisburton]

@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.

[Mottie]

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.

[chrisburton]

@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.

[Mottie]

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/).

[chrisburton]

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

[chrisburton]

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

[Author]

Posts