EDIT II:Thanks to Roger Hà¥gensen, the old system has been replaced with a new one that should fail gracefully (and not cover the screen in boxes) if Javascript fails for some reason. It also doesn’t conflict with the comment editing plugin. And it looks a little nicer. Also, each post now has its own numbering, instead of the first post having annotations 1, 2, 3 and the next post having 4, 5, 6. That was… awkward.
So, solid improvements all around. Thanks to Roger Hà¥gensen for the help.
EDIT: It looks like the problem wasn’t the Javascript after all. I turned off the JS “minification” option and it started working for me. However, as an admin my page loads with some extra crapAn admin bar and logout buttons and such. that might skew my results. So I’ve commented on a fresh browser window, left a comment, and annotations seem to be working.
So we’re in a state where it works in all cases that I can test. PLEASE let me know if the annotation boxes are stuck open for you. If nobody has any further problems, I’ll call it fixed. Enough. For now.
Original post:
I don’t know anything about javascript. Which means I really should never use it. I mean, that’s a pretty basic rule, right? Don’t copy & paste code you don’t understand.
But the thing is this: I really, REALLY like annotations. I’m talking about the little numbers that pop up in a postLike this one, for example.. I ran into them on the XKCD What-If blog. They’re great for expanding on a side-thought without cluttering up the main body of the article. They’re handy when writing faux-technical articles that require lots of footnotes to save me from Death By Nitpick. They’re great for jokesSince you can hide the punchline..
So I swiped the footnote code from XKCD. It works fine when reading individual posts, but on the front page of my website the pop-out text isn’t properly hidden. (I have NO IDEA what it does to RSS feeds. Not too worried about that. People reading via RSS have already decided they want the words but not the formatting. That’s fine, but it makes sense to design your site for the people who actually visit the site.)
If you read this post by itself, those annotation boxes above will work as intended: They will be hidden until you click the related footnote. If you view the exact same content on the front page, the boxes appear expanded at the outset, and clicking on the footnote does nothing. I am baffled by this problem.
In both cases, the system is driven by this code, which is at the bottom of the HTML:
1
2
3
4
5
6
7
8
9
10
11
| jQuery.noConflict();
jQuery(function() {
jQuery(".refbody").hide();
jQuery(".refnum").click(function(event) {
jQuery(this.nextSibling).toggle();
event.stopPropagation();
});
jQuery("body").click(function(event) {
jQuery(".refbody").hide();
});
}); |
jQuery.noConflict();
jQuery(function() {
jQuery(".refbody").hide();
jQuery(".refnum").click(function(event) {
jQuery(this.nextSibling).toggle();
event.stopPropagation();
});
jQuery("body").click(function(event) {
jQuery(".refbody").hide();
});
});
I don’t want to give up annotations. Up until now I’ve hacked around the problem by disabling the annotations on the front page. That prevents the “Yellow boxes everywhere!” problem, but it’s confusing and people keep reporting this as a bug.
I’ve consulted the Google Oracle, but finding solutions for specific problems like this is pretty difficult. And I’m not fluent in JS enough to begin to unravel this myself. (The connections between JS and HTML are non-obvious and confusing as hell.) I will say that the JS syntax is deeply alarming to a C programmer. Curly braces INSIDE of parenthesis? Madness! You’ll kill us all!
This is normally a situation where you’d need to suck it up and ask folks at (say) Stack Overflow. But the path of least resistance is to just ask my readers. The output is right in front of you, we have a reproducible example of the problem in action, and the source is freely available.
For the record: The title of this post is one of the most bone-chilling phrases a friend can say to you. The irony is intentional. I am now the Dumb Friend, oblivious but well-meaning, who figures that since they don’t understand the problem, it’ll probably be easyfor someone ELSE to solve.
Still. I’m hoping this turns out to be true, that for one person out there this is trivial to solve. Is it you?
Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.
T w e n t y S i d e d
