iPhone/iPad Conditional in jQuery Function

Question

Is it possible to not have "offset: -195" called when on an iPad or iPhone?

        $(window).bind("load", function() {

    $(document).on('click', 'a[href*="#"]', function() {
        var slashedHash = '#/' + this.hash.slice(1);
        if (this.hash) {

            if (slashedHash === location.hash) {
                $.smoothScroll({
                    scrollTarget: this.hash,
                    easing: 'easeOutQuart',
                    speed: 2000,
                    offset: -195
                });
            } else {
                $.bbq.pushState(slashedHash);
            }

            return false;
        }
    });

    $(window).bind('hashchange', function(event) {
        var tgt = location.hash.replace(/^#\/?/, '');
        if (document.getElementById(tgt)) {
            $.smoothScroll({
                scrollTarget: '#' + tgt,
                easing: 'easeOutQuart',
                speed: 2000,
                offset: -195

            });
        }
    });

    $(window).trigger('hashchange');
});

Thanks for you help.

What happens? Do you get any errors? Does it work on other devices (eg. your development machine)? — Reinstate Monica Cellio, Sep 18 '13 at 10:11
the above code works fine. I need to not do the offset part of the scroll on ipads and iphones — Mike Dexter, Sep 18 '13 at 10:14
I don't think I've explained it correctly. The above works fine - as intended. However, if the code is run on an iPhone or iPad I need not to do the offset part. At the moment it does the offset part on an iPhone and iPad and because of the responsive nature of the design it needs to be a conditional part of the function. — Mike Dexter, Sep 18 '13 at 10:21
Thanks - that is clearer. Pass a variable into the offset value instead of a static value, and define that variable by doing some browser/device detection, as shown here... http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript — Reinstate Monica Cellio, Sep 18 '13 at 10:22
thanks for the link. I'm new to jquery and would really appreciate it if you could show me how I would implement that in my code sample. I have tried similar things to your example URL but couldn't get it to work — Mike Dexter, Sep 18 '13 at 10:25
Okay - let me have a deeper look into that and I'll get back to you :) — Reinstate Monica Cellio, Sep 18 '13 at 10:30

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Try this...

var offset = -195;

var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
if (is_uiwebview) {
    offset = 0;
}

$(window).bind("load", function() {
    $(document).on('click', 'a[href*="#"]', function() {
        var slashedHash = '#/' + this.hash.slice(1);
        if (this.hash) {
            if (slashedHash === location.hash) {
                $.smoothScroll({
                    scrollTarget: this.hash,
                    easing: 'easeOutQuart',
                    speed: 2000,
                    offset: offset
                });
            } else {
                $.bbq.pushState(slashedHash);
            }
            return false;
        }
    });
});

$(window).bind('hashchange', function(event) {
    var tgt = location.hash.replace(/^#\/?/, '');
    if (document.getElementById(tgt)) {
        $.smoothScroll({
            scrollTarget: '#' + tgt,
            easing: 'easeOutQuart',
            speed: 2000,
            offset: offset
        });
    }
});

I've just added the section of code at the beginning that checks the useragent to detect AppleWebKit devices. The variable offset is set to -195 initially, and then set to 0 if it is an Apple device. That value is then used in calls to smoothScroll.

The code I used to detect browser type was taken directly from an answer on this question...

detect ipad/iphone webview via javascript

iPhone/iPad Conditional in jQuery Function

1 Answers1