Skip to main content

Get distances to the top of the document with native JavaScript

Last week I added two new code snippets to my Ditching jQuery resource.

One is used to get your current position on a page from the top of the document. The other will get the distance of any element from the top of the document.

// Get current location's distance from the top of the page
var position = window.pageYOffset;

// Get an element's distance from the top of the page
var getElemDistance = function ( elem ) {
    var location = 0;
    if (elem.offsetParent) {
        do {
            location += elem.offsetTop;
            elem = elem.offsetParent;
        } while (elem);
    return location >= 0 ? location : 0;
var elem = document.querySelector('#some-element');
var location = getElemDistance( elem );

Gumshoe: A framework-free scrollspy script

Last week I release Gumshoe, a lightweight, framework-free script that highlights the current content in the navigation area on single-page sites.

I used a few tricks in Gumshoe to make it more performant:

  1. Navigation links and their associated content are stored in an array when the script is initialized. This means that the script doesn’t have to search the DOM for them on scroll.
  2. I also stored all measurements—things like how tall the document is and how far from the top sections are—to variables on initialization so the script doesn’t need to do as many calculations on the fly.
  3. Like all of my scripts that use scroll and resize events, I’ve added an event throttler to prevent methods from being called an absurd number of times during the course of an event.

Download Gumshoe (and check out the source code) on GitHub.

45 Random Acts of Kindness

Have a rough week? Check out these 45 random acts of kindness.

Web Apps vs. Native Apps

Lukas Mathis has a great post on the web app versus native app debate (that is, amazingly, still going on in 2014):

There are plenty of companies advertising «native apps» that are really nothing else than branded browsers that run a web app. Put a web app inside a native wrapper, and voilà: you have a native app. This works, because web apps have become good enough that most people don’t have to care about the difference anymore. To them, the difference between a native app and a web page comes down to things like an icon on the home screen, the fact that it appears in the task switcher, and the fact that it can receive notifications. All of these things can be provided by a web app with a native wrapper.

And as John Gruber pointed out recently, native versus web isn’t an either/or proposition:

I can’t believe someone is still writing this in 2014. Users love apps, developers love apps — the only people who don’t love apps are pundits who don’t understand that apps aren’t really in opposition to the open Internet. They’re just superior clients to open Internet services. Instagram didn’t even have a web interface for years, but native app clients for iOS and Android didn’t lock Instagram into anything. Their back-end is just as open as it would have been if they had only had a web browser client interface. They just wouldn’t have gotten popular.

90-year-old man arrested for feeding the homeless

From the Sarasota Patch:

The brouhaha over Abbott’s determination to feed the hungry erupted Sunday when Abbott and two local pastors were arrested for feeding people in Fort Lauderdale’s Stranahan Park. Abbott is the founder of Love Thy Neighbor, a local nonprofit that helps the homeless. He’d only handed out a few of the 300 meals he had prepared when police told him to stop or else… Fort Lauderdale passed a new law Oct. 22 that bans public food sharing.

Shame on you, Fort Lauderdale.

Why progressive enhancement still matters

One thing I’ve struggled to answer when people start debating the importance of progressive enhancement is how you enhance something like a camera app.

Jeremy Keith did a fantastic job tackling touch questions like this in his recent post, “Just what is it you want to do?”

Read More…

Vertical centering with CSS

Jake Archibald shared 4 5 techniques for vertically centering content with CSS.

Useful stuff!