Forums

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

Home Forums JavaScript jQuery slide

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #42374
    chrisburton
    Participant

    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

    #122892
    chrisburton
    Participant

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

    #82394
    Mottie
    Member

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

    #82310
    chrisburton
    Participant

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

    #82268
    Mottie
    Member

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

    #75897
    Mottie
    Member

    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.

    #75612
    chrisburton
    Participant

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

    #74213
    Mottie
    Member

    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.

    #74208
    chrisburton
    Participant

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

    #72586
    chrisburton
    Participant

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

    #72587
    Mottie
    Member

    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.

    #122912
    chrisburton
    Participant

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

    #122933
    Mottie
    Member

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

    #122934
    chrisburton
    Participant

    I really appreciate it @Mottie!

    #122939
    chrisburton
    Participant

    An update from the author of asfar

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

Viewing 15 posts - 1 through 15 (of 25 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.