Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Document load order requirements (when anchors.add() should be called) #69
Took me a while to figure out the usage, but in my webpack-built application, I included anchor-js like this:
@k-funk, this is a great idea. We forgot to include more usage examples when we added support for modules (webpack, etc). I think the best place for something like this is on the
@bryanbraun Turns out that my example doesn't actually implement all of anchorjs functionality. Linking someone to anchors doesn't work since the id isn't on the page at load time. I actually don't understand how AnchorJS does this in the first place. If the fragment isn't part of the initial html, how does AnchorJS navigate to an ID that it created, after the page is done loading? I don't see any of that in your source files.
@k-funk, the IDs don't need to be in the original HTML payload. Browsers need to complete a number of actions in the loading lifecycle before they trigger the "jump" behavior based on the URL fragment. For example, they can't jump before the DOM is fully loaded, otherwise they might not find the ID. Also, if they jump too early in the rendering process, they might jump to the wrong place on the page.
All of this gives you time to run JS and add the IDs into the markup.
Different browsers jump at different times, but the recommended way to include AnchorJS is before the closing body tag of your HTML document. This means it'll run early in the process, before DOMContentLoaded is complete.
I've done some rough testing to see "how late" I can run AnchorJS in various browsers and have it "still work". In case you are curious, here's what I found (the browser name is listed where they last successfully jumped to the anchor):
In short, you're good if you run AnchorJS before or on DOMContentLoaded.
The last thing I'll say, is that there's a number of people who use AnchorJS without adding IDs to the page. They often have tools that generate IDs on the backend but they use AnchorJS as an easy way to sprinkle the UI links onto the page. That's a valid use-case that ignores the load-time situation altogether.
added a commit
Sep 14, 2016
I've created a sample repo using webpack/jquery/anchorjs for you to see my behavior.
From what I'm gathering, using jquery's
is going to be too late?
A lot of web applications start after that event.
If it's required to use
then it seems like that should be well documented, since it's very uncommon to listen to that particular event, in my experience.
@k-funk, I haven't experienced any issues testing it in a
Thanks for putting together that sample repo. I'm in the middle of a busy couple of weeks right now (ran a marathon yesterday, going to a wedding in a couple of days), but I'll test it out the next time I get a chance.
referenced this issue
Sep 30, 2016
Correct me if I'm wrong, but it seems like the sam issue is happening in your jsfiddle: https://fiddle.jshell.net/bryanbraun/nc6rL9hk/show/light/#return-of-the-jedi
@k-funk, ok, I checked out your repo and confirmed that it's not working as expected (and yep, I'm seeing it in that JSFiddle as well). Thanks for putting those together. You're right, we're going to need to add some documentation for this. I've updated the issue title to reflect that (since @afeld put in a PR for the node/commonJS documentation).
I'd like to dig into the details a bit more so we can document it right. A few questions I have are:
I'll see what I can find.
We should probably get a better demo than that jsfiddle too...
I'm doing a more accurate round of testing (and adding the test files to the repo). Here's what I found:
The results were consistent with the last set of results, but more detailed. Big takeways:
I've pushed these tests up to the anchorjs repo so people can try them out, if desired (see
All-in-all, this is enough to convince me to add documentation, instructing users to trigger the
We can add a warning that including it on