Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery slide Re: jQuery slide

#122942
Mottie
Member

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