jQuery plugin for smooth back to top and follow me navigation, disabling Bootstrap popover caching, Modernizr IE detection extension

I wrote some jQuery plugins for this site – to get smooth scrolling back to top and navigation that follows you down the page. Here’s the code. The usage is in the comments.

/* jquery plugin to scroll window to the top */
$(function() {
    var up_timer = 0;
    var viewportLeft;
    var viewportTop;

    $.getPosition = function() {
        viewportLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
        viewportTop = document.body.scrollTop || document.documentElement.scrollTop;
    };

    $.pageup = function(x, y) {
        if (up_timer) {
            clearTimeout(up_timer);
        }
        if (y >= 1) {
            $.getPosition();
            var divisionY = (viewportTop - (viewportTop / 5));
            var Y = Math.floor(divisionY);
            window.scrollTo(viewportLeft, Y);
            up_timer = setTimeout("$.pageup(" + viewportLeft + "," + Y + ")", 2);
        } else {
            window.scrollTo(viewportLeft, 0);
            clearTimeout(up_timer);
        }
    };

    $.scrollup = function() {
        $.getPosition();
        $.pageup(viewportLeft, viewportTop);
    };
});

/* Usage: call $.scrollup(); to scroll to the top smoothly */
/* To enable an element to follow you down the page smoothly */
function enableFollowNav(navElement,padding) {
            var $sidebar = navElement,
                $window = $(window),
                offset = $sidebar.offset(),
                topPadding = padding;

            $window.scroll(function() {
                if ($window.scrollTop() > offset.top) {
                    $sidebar.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: 0
                    });
                }
            });
        }
/* Usage: call enableFollowNav([jquery element],[amount of topPadding]) to make the element follow you down the page when you scroll. */

Bootstrap popover caching
Bootstrap popovers are very nifty and neat, and I love using them. So, Bootstrap popovers rely on the data-title and data-content attributes of the HTML5 elements its called upon. However, in one of my applications, I noticed that my popover content was not changing, despite the fact that I had changed the data-title and data-content of the element. Why am I changing the data-content of my element? well in my EmberJS view code, I have a computed property that is dynamically updating.

popoverContent: function() {
            var quantity = this.get('controller.model.quantity');
            return "You have added " + quantity + " cases of beer to your basket."
                + "<br/> <a href='#/shopping_cart'>Go to shopping basket</a>";
        }.property('controller.model.quantity'),

And in my handlebars template, I have the data binding to that computed property defined:

<button data-html="true" {{bindAttr data-content=view.popoverContent}} >Add to Basket</button>

So in this case, I need the bootstrap popover to not cache my content. The solution to this is to just disable this feature of the plugin like so:

    $.fn.popoverNoCache = function(option) {
        return this.each(function() {
            var $this = $(this)
                , data = $this.data('popover')
                , options = typeof option == 'object' && option
            if (!data) {
                $this.data('popover', (data = new Popover(this, options)))
            } else {
                data.options.content = $(this).attr('data-content');
                data.options.title = $(this).attr('data-title');
            }
            if (typeof option == 'string') {
                data[option]()
            }
        })
    }

This way, this caching feature of the bootstrap popover is disabled, and it will update with fresh content every time your data attributes change. Of course this is not for everyone, which is why I’m not going to submit a pull request to the github or anything, but its useful if other people are using data bindings for their popovers (a similar solution exists for bootstrap tooltips as well).

Modernizr IE detection
Modernizr is a really good feature detection library, and for the most part you should use its built in detection for properties.
But there might be a time where you just need to detect IE in general. So Here’s an extension for Modernizr to detect that. It works up to IE10. Usage is in the comments.

/** IE detection **/
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// Modernizr.ie === undefined
// If you're in IE (>=5) then you can determine which version:
// Modernizr.ie === 7; // IE7
// Thus, to detect IE:
// if (Modernizr.ie) {}
// And to detect the version:
// Modernizr.ie === 6 // IE6
// Modernizr.ie > 7 // IE8, IE9, IE10 ...
// Modernizr.ie < 9 // Anything less than IE9
// ----------------------------------------------------------
Modernizr.ie = (function(){
    var undef,rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer')
    {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat( RegExp.$1 );
    }

    return ((rv > -1) ? rv : undef);
}());

Videos
I made some miscellaneous videos I forgot to post last month. Here is one on imitating a northeastern accent, a review of my pedalboard, and a music video I did for a one direction song.




My wrist also healed (yay!) so now I can go back to jamming… here’s a nice little funky blues jam with my wah pedal.

And here’s a nice piano cover of Coldplay as well 🙂