Grow your CSS skills. Land your dream job.

jQuery slide

  • # January 30, 2013 at 5:07 pm

    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

    # January 30, 2013 at 8:57 pm

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

    # January 31, 2013 at 8:44 am

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

    # January 31, 2013 at 10:00 am

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

    # January 31, 2013 at 10:11 am

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

    # January 31, 2013 at 10:50 am

    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.

    # January 31, 2013 at 10:56 am

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

    # January 31, 2013 at 10:59 am

    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.

    # January 31, 2013 at 11:00 am

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

    # January 31, 2013 at 11:08 am

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

    # January 31, 2013 at 11:12 am

    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.

    # January 31, 2013 at 11:18 am

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

    # January 31, 2013 at 12:56 pm

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

    # January 31, 2013 at 1:42 pm

    I really appreciate it @Mottie!

    # January 31, 2013 at 2:24 pm

    An update from the author of asfar

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

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

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