Support for mobile and responsive designs

[jessicaldale]

Any plans for this?

[flesler]

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

[jessicaldale]

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

[jessicaldale]

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

[jessicaldale]

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

[flesler]

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.

[jessicaldale]

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

[jessicaldale]

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

[flesler]

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

[jessicaldale]

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

[flesler]

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

On Wed, May 22, 2013 at 12:41 PM, Jess Dale notifications@github.comwrote:

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

[jessicaldale]

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?

[jessicaldale]

Would filtering be a better option?

[flesler]

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

[jessicaldale]

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.

[jessicaldale]

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;
            },

[flesler]

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.

[jessicaldale]

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

[flesler]

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?

[ghost]

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?