jQuery slide

[chrisburton]

Hey, guys. Is there a way to slide in my articles from the left and right depending on the arrow instead of the entire content collapsing and expanding?

Left Arrow = slide content <--- Right Arrow = slide content —>

Basically like this slider: http://www.menucool.com/slider/slider-with-tooltip

Site: http://chrisburton.me/dev

[chrisburton]

I’m so close!!! The only problem I have now is when clicking the left-arrow, it should slide in the opposite direction.

Also, I would prefer that when there are no more pages to scroll through, the slide doesn’t cycle.

$(‘#ajax’).asfar({
selector : ‘.r-arrow, .l-arrow’,
before : function(urlFragment,target){
console.log(‘before’);
},
insert : function(urlFragment,target,data){
$(target).hide(“slide”, { direction: “left” }, 500, function(){
$(target).html(data);
$(target).show(“slide”, { direction: “right” }, 500);
});
},
after : function(urlFragment,target){
console.log(‘after’);
},
success : function(urlFragment,target){
if(0 > $(‘a[href=”‘ + urlFragment + ‘”]’).length){
$(‘a’).removeClass(‘active’);
$(‘a[href=”‘ + urlFragment + ‘”]’).addClass(‘active’);
}
_gaq.push();
}
});

[Mottie]

Hi Chris!

I think part of the problem is the urlFragment. It’s defined using `location.hash.substring(2)` but the url is `http://chrisburton.me/dev/page:2`; there is no hash! Maybe you can try `location.href.split(‘:’)[2]` to get just the page number.

Also in the success function, `if(0 > $(‘a[href=”‘ + urlFragment + ‘”]’).length){` will always be false. Writing stuff backwards like that always messes me up though LOL. I leave that kind of stuff to Google’s closure compiler.

I didn’t dig deep enough to figure out how you know what articles are showing, or how you know you’re on the last page so I can’t tell you how to make the slider stop, just yet ;)

[chrisburton]

@Mottie Thanks for taking a look at this. If you noticed, I ended up having to create two pieces of code to get the slide direction functionality to work. Surprisingly IE doesn’t even render the slide effect so the pagination works (thankfully!).

I’m not really following you on `location.href.split(‘:’)[2]` or where to place it.

I tried putting the pagination inside the `#ajax` div and Ajax fails sometimes. I’m still waiting to hear back from the author of the plugin to see if he has any solutions.

[Mottie]

Type in `location.hash` into your console. It’s an empty string.

With `location.href.split(‘:’)[2]` it will return `2` with a url ending in `page:2`.

LOL, I’m usually not surprised about anything IE does or doesn’t do. It just has to be different :P

Edit: Oh, I thought you wrote that plugin… I just found it on github, it’s [this line](https://github.com/lautr/asfar/blob/master/source/asfar.jquery.js#L26) that I’m talking about, but nevermind, I see that the second part of the if statement is looking at the `location.pathname` ([ref](https://github.com/lautr/asfar/blob/master/source/asfar.jquery.js#L38))

[Mottie]

I think I understand now.

I think you might need to target the `section.content` instead of `#ajax` because the content includes the pagination and if you get that, you can determine if there are more pages from `l-arrow` and `r-arrow` (which don’t seem to be updating on the main page). So try something like this:

var ajax = $(‘#ajax’),
result, link;
$(‘section.content’).asfar({
selector : ‘.r-arrow, .l-arrow’,
insert : function(urlFragment,target,data){
ajax.hide(“slide”, { direction: “left” }, 500, function(){
result = $(data);
$(target).html(data);
ajax.show(“slide”, { direction: “right” }, 500);
// update navigation arrows
link = result.find(‘.l-arrow’).attr(‘href’) || ”;
$(‘.l-arrow’).attr(‘href’, link).toggleClass(‘active’, link !== ”);
link = result.find(‘.l-arrow’).attr(‘href) || ”;
$(‘.r-arrow’).attr(‘href’, link).toggleClass(‘active’, link !== ”);
});
},
success : function(urlFragment,target){
_gaq.push();
}
});

I haven’t tested it, but hopefully it will help.

[chrisburton]

@Mottie What if I just move my pagination inside `#ajax`? That way the paragraph text below the articles are not ajaxed as well.

[Mottie]

I wrote that to only update the #ajax section, but moving the nav inside would work too. If you move the nav, you might not need to worry about all the extra code to stop the slider from changing pages.

[chrisburton]

@Mottie Let me try that first and see what happens again.

Edit: Okay so when I click through and land at the 2nd page, if I click the arrow again to get to the third, Ajax fails and appends some weird numerals in the URL.

I also don’t care for the arrows sliding either. I’ll try the solution above.

[chrisburton]

I tried the solution and the entire content collapses. It also does not update the URL of the paginated arrows.

[Mottie]

Hmm, ok try your first method again with putting the nav in with the #ajax content, but instead of hiding/showing the entire block, just target the ajax content. Once you get that working, I’ll look at the wierd numbers in the url.

[chrisburton]

@Mottie If I turn off the show/hide slider, the pagination doesn’t work.

I updated everything so that pagination is inside of `#ajax`. You can even see the number in the URL if you hover over the arrows. You might have to click through a few times to get it to fail.

[Mottie]

I’m still working on it… I’m actually testing my work now ;)

[chrisburton]

I really appreciate it @Mottie!

[chrisburton]

An update from the author of asfar

https://github.com/lautr/asfar/issues/3

[Author]

Posts