Support for mobile and responsive designs about jquery.scrollto HOT 19 CLOSED

Can you be more specific? what are you trying to achieve and what's the problem you're seeing?

from jquery.scrollto.

I'm seeing a flickr on iOS (ipad, iphone4s, iphone5) when clicking a navigation link. note these are #hash links. Is this something I need to use Local scrollTo for? Code sample below:

    $('nav li a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        if ($menu.hasClass('active')) $menu.toggleClass('active');
        jQuery.scrollTo.window().stop(true);
        var $url = $(this).attr('href');
        $.scrollTo($url, 800);
        return false;
    });


    $('.next-section').click(function(e) {
        e.preventDefault();
        jQuery.scrollTo.window().stop(true);
        var $this = $(this),
            $next = $this.parent().next();
        $.scrollTo($next, 600, {
            onAfter: function() {
                //callback functions
            }
        });
    });

from jquery.scrollto.

After reviewing some closed issues, I updated to localScroll. Is there a way to use localScroll to go to the next element as in the code above (next-section)?

from jquery.scrollto.

Also, is there a way to reference the element (#hash) that's being scrolled to in a callback function?
example:

onAfter: function(anchor, settings) {
$(#hash).addClass('current');
}

from jquery.scrollto.

Looking at the code, I think the first argument should be that element, but the code is wrong and you get the exact "target" setting (which is not always this that you expect). I just changed that and commited as 1.4.6, get the last version.

As for the other question, you could use localScroll and then only add a code that triggers a "click" event on the next link. You need to handle the find-the-next part which seems like you got it already.

You could include serialScroll in the mix maybe, it can play nice with localScroll to some extent, but you're probably better off coding that part yourself.

from jquery.scrollto.

@flesler Thanks for taking a look! updating this file caused an error: Uncaught TypeError: Object [object Object] has no method 'localScroll'

should the implementation change?

from jquery.scrollto.

and my code is:

$('nav').localScroll({
            hash: false,
            offset: -50,
            duration: 600,
            onBefore: function(e, anchor, $target) {
                if ($menu.hasClass('active')) $menu.toggleClass('active');
            },
            onAfter: function(anchor, settings) {
                $('section').addClass('current');
            }
        });

from jquery.scrollto.

You replaced what? I meant that you upgrade scrollTo with the version on Github, localScroll remains untouched.

from jquery.scrollto.

I see. I saw you had committed a change on github for localScroll library so I assumed that was the update 1.4.6 you were referencing. I will update scrollTo library.

Would the callback then be:

       onAfter: function(anchor, settings) {
            $(target).addClass('current');
        }

from jquery.scrollto.

$(anchor).addClass('current');

On Wed, May 22, 2013 at 12:41 PM, Jess Dale [email protected]:

I see. I saw you had committed a change on github for localScroll library
so I assumed that was the update 1.4.6 were referencing. I will update
scrollTo library.

Would the callback then be:

   onAfter: function(anchor, settings) {
        $(target).addClass('current');
    }

—

Reply to this email directly or view it on GitHubhttps://github.com//issues/43#issuecomment-18287216
.

Ariel Flesler

from jquery.scrollto.

So far no issues across devices. Well done! I am working through the piece I mentioned earlier with scrolling to next.

Here is what I have:

       $('.next-section').click(function() {
            var $this = $(this),
            $next = $this.parent().next();
            $next.localScroll({
                hash: false,
                offset: -50,
                duration: 600,
                onBefore: function(e, anchor, $target) {
                    $('#ios5').css('height', '200px');

                },
                onAfter: function(anchor, settings) {
                    $('#ios5').css('height', '0px');
                }
            });
        });

and the HTML:

<div class="next-section"><a href="#">Featured Locations</a></div>

If I understand correctly, localScroll isn't working in this case because the href has not been defined. Is there a way to tell localScroll to use the $next variable as scroll position similarly to the way it works in scrollTo?

from jquery.scrollto.

Would filtering be a better option?

from jquery.scrollto.

Maybe filtering along with the "lazy" setting on true, but simply unbindings seems like the easiest approach.

from jquery.scrollto.

thank you! I couldn't find an example of filtering being used in the demo. Could you point me to a link? Also, not sure what you mean by unbindings.

from jquery.scrollto.

Was looking again through the demos and could not find an example use of filter or lazy (as well as event). Maybe they could be included in a future version of localScroll documentation? For now, is there a way to explicitly set the anchor to a specific DOM Element?

          onBefore: function(e, anchor, $target) {
                $('#ios5').css('height', '200px');
                $next = $this.parent().next();
                $(anchor) = $next;
            },

from jquery.scrollto.

I got confused with another issue I replied to recently. What you need to do is save the last clicked link, or scrolled page, and on the click handler of the "next" link find the following page and scroll to it manually, by manually I mean use scrollTo, localScroll won't do for this case.
Unless, every time you scroll to a section, you change the href of the "next" link to the following section, this could actually be cleaner.

from jquery.scrollto.

I see, so you're saying to set the href of .next a in the After function. for example:

   $('.next-section').localScroll({
        hash: false,
        offset: -50,
        duration: 600,
        onBefore: function(e, anchor, $target) {
            $('#ios5').css('height', '200px');
        },
        onAfter: function(anchor, settings) {
            $('#ios5').css('height', '0px');
                   **$(this).find('a').attr('href') = $(this).parent().next();**
        }
    });

Wouldn't it be easier to allow localscroll to accept params the way .scrollTo( target, settings ); does?
var $this = $(this),
$next = $this.parent().next();
$('.next-section').localScroll($next, 600);

from jquery.scrollto.

You should be adding the return false or event.preventDefault(), that goes without saying. I assumed you were doing that.
Have you tried adding that and see if that fixes the problem?

from jquery.scrollto.

Hi,
I'm using this: https://github.com/zehfernandes/jquery.fullContent
And it doesn't work on iphone.
I'm asking for help - can someone make it work?

from jquery.scrollto.