Got a minute? Can you help me with my website?

By Shamus Posted Thursday Jul 3, 2014

Filed under: Notices 99 comments

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();
        });
      });

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?

 

Footnotes:

[1] An admin bar and logout buttons and such.

[2] Like this one, for example.

[3] Since you can hide the punchline.

[4] for someone ELSE



From The Archives:
 

99 thoughts on “Got a minute? Can you help me with my website?

  1. Zamalan says:

    I’m not helping much but for me It’s working perfectly fine on the front page and the individual post just like the ones on xkcd. 1 click to show it and another to hide.

    Works in both IE 10 and Firefox 30.0 on Windows 7 SP1.

    Unless I’m misunderstanding something.

    *edit* And now I’m getting the same problem you’re reporting. Whatever you did it worked and it’s now broken again.

    1. Draxom says:

      It also appears to be working fine for me. Both on the front page and in the specific article. I’m running Chrome v35 on windows 7 SP 1(checked both incognito and normal). I’ll try it on a windows 8 machine later on if it’s still not figured out.

      1. Draxom says:

        I just got this to happen. I opened the front page in a new tab(I wanted to watch the SW episode) and when it loaded all the annotations were open and could not be closed. When I refreshed the page they started working properly again. I have not been able to reproduce the behavior again.

        This will be tricky to track down….TO THE DRAX CAVE!

        1. Draxom says:

          I got it to happen again. Leave a comment(you might have to edit the comment as well, testing this now) then open the main page in a new tab. BAM! all annotations are perma popped. It’s got to be something in conflict between the edit timer and the annotations.

          I don’t know enough about the edit timer you use to say what yet, but I’m working on it.

          I’ll also try to continue editing this post instead of making new replies . The edit button disappears when I leave the page though, so we’ll see.

          Edit 1: Edit a comment is not necessary and it does not affect individual browser windows(If you have multiple open at once)

          1. RTBones says:

            You have to love (or not) problems like this. I tried much the same you did, and the footnotes worked as advertised for me.

            1. Draxom says:

              After leaving a comment, when I reload the main page and break the annotations there is a javascript error that does not appear when i load the main page normally.

              Looking at the page source through Chrome shows me the following error:

              Uncaught ReferenceError: jQuery is not defined

              I have a feeling that the comment edit timer is loading in the new tab and crashes the whole load sequence when it runs into a reference for jQuery. Perhaps including the JQuery library in the other widgets will fix your problem.

              addendum: I love debugging things like this. This particular problem poses an extra challenge since i lack a debugger. Fun times indeed.

              1. RTBones says:

                I also enjoy debugging issues like this. I also don’t have a debugger, other than IE spitting errors at me when I tell it to. Still, we have source that worked, and source that is causing Shamus pain. If I helped, even in a small way, I’m happy.

        2. Eruanno says:

          I got a slightly different thing using Chrome on Windows 8.1 – when clicking the article it shows all the annotations for a moment before disappearing again as the page loads fully. Not sure what is up with that… :O

          1. Bryan says:

            That’s this line:

            jQuery(“.refbody”).hide();

            not executing until the page loads. Until then, you see the tags. I think the ideas is to make a sane fallback for people with javascript disabled: no point in hiding the content from them entirely, and giving them no way to get it back.

        3. James Schend says:

          OK it’s been awhile with me and jQuery (which, BTW, is not really all that close to raw JavaScript but…), here’s what I think is going on.

          jQuery(function() { Stuff; });

          A “blank” jQuery function block like that (meaning, one with no DOM selector) is intended to run on page load. So on page load, jQuery will:
          1) hide every element on the page with the class “refBody”.
          2) install a click handler on every element with the class “refNum” (which toggles the visibility of its nextSibling– that is, the element *next to it* in the DOM.)
          3) install a click handler on the page body (everything, basically) that hides any open “refbody” elements– the “stopPropagation” on the refNum handler is to prevent this handler from running if a “refnum” is clicked.

          That said, here’s the likely problems, IMO, ordered from most to least likely:
          1) That jQuery initialization code is running before all the content is written to the page. (Solution: either move the script to the very bottom, defer its execution using a setTimeout(), or look up the jQuery event handler syntax that will install handlers dynamically as new elements are added to the page. The last is probably the most reliable solution.)
          2) The DOM on the homepage is different somehow, moving the little hidden annotations to somewhere other than nextSibling of the clickable number. (Solution: this one’s a bit tricky; you basically need to create an “id” for both elements and look one up based on the “id” of the other. “id” in scare-quotes because you can’t use the *actual* id property to do this, since it must be guaranteed unique.)
          3) EDIT: Knut’s observation brought this possibility up: this jQuery code is running before jQuery is properly initialized. Which means this problem could depend entirely on the client’s bandwidth, and those are always something of a heisenbug. You can use Fiddler in Windows to simulate loading a webpage under low bandwidth conditions.

          — and reading the rest of the page, it looks like that is the problem. WordPress is only putting jQuery on the homepage under some conditions instead of unconditionally.

          Also you should implement Thomas’ suggestion to run the code on DOM Ready (meaning: all the elements are properly loaded and the DOM is complete.) Now that I look at it again, not doing this is a proper bug– it probably only works on XKCD “by accident” because of its simple layout.

          I should also note that there’s a slight design issue with this code, the annotations are *visible by default* when they probably should be hidden by default. Which is why people are seeing them render, then quickly disappear when this jQuery code runs. Fixing this is kind of non-trivial without manually writing your own style to every single annotation element, which is a PITA.

          Since I’m rambling, I could also mention that it would be pretty trivial to rewrite this so it doesn’t rely on jQuery and would work everywhere. Maybe only 2-3 extra lines. jQuery’s pretty ubiquitous, but it’s not yet guaranteed to be everywhere. ;)

          1. Bryan says:

            The homepage periodically *entirely* omits the reference to the jquery javascript.

            Shamus, I suspect this is the problem. jQuery(…) can’t possibly work unless you’ve loaded up the jquery stuff first; it’s not standard javascript, it’s a whole lot of “hacks” (…most of them reasonable) on top of it to make it work the same in all browsers. Because IE sucked back in 2004, mostly. (And it still might, with respect to DOM standards; I haven’t looked in a long time.) :-)

            Of course, now that the homepage is in this state, I can’t see what it looks like *normally* either, so I can’t verify. :-/

            1. krellen says:

              If you read down a bit a couple of us have pinpointed the location of the problem.

  2. RTBones says:

    Silly question – what browser are you using? The front page of you blog has always worked for me (so far, and still does) since you started adding those footnotes. Could this be a browser not handling JS correctly issue? Nothing in that snippet sticks out as bad.

    For the record, I am running IE 10.

    EDIT: Just installed Commodo Dragon (Chrome), and it worked there as well.

    EDIT 2: Do you have a screenshot of the behavior you are trying to get rid of?

    EDIT 3: Also Windows 7 Pro 64-bit

  3. Steve? says:

    You can add me to the list of people for whom it has always worked fine. I’m using Chrome (v35.0) on a Mac (v10.7.5).

    1. ET says:

      I too, always had it work. Up-to-date Firefox (Windows 7), as always. :)

      EDIT:
      Umm…not sure if this is intended or not, but when you click ‘edit’ on your comments, it doesn’t load a little popup window anymore; it just loads in the same window/tab, and then doesn’t go anywhere after you click ‘save’. So…new feature, right Shamus? :P

  4. Nathaniel says:

    It works fine for me too. (Firefox and Chrome, Linux)

  5. Knut says:

    I see that Javascript is called to hide the boxes when the page load (line 3, ‘jQuery(“.refbody”).hide();’)

    What this function will do is to add this style to the element:
    ‘style=”display: none;”‘

    And then line 5 (‘jQuery(this.nextSibling).toggle();’) will toggle them (it’s sibling because ‘this’ is actually the number).

    When using Firebug in Firefox (which is a great debugging tool for all things on the web), I see a error message on the front page: “ReferenceError: jQuery is not defined”. It seems you forgot to load JQuery on the front page?

    Another tip is to add ‘style=”display: none;”‘ to the HTML itself, rather than using Javascript to hide them. There is most likely some delay between the box being loaded and the Javascript being run and hiding the box, which will also be fixed with this solution.

    1. RTBones says:

      Interesting you mention that. Looking at the XKCD source, there is this line above the script definition at the end:

      script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”>/script

        1. RTBones says:

          Nods…that’s what I thought. My JS is rusty, and I don’t have a debugger (though I wonder if I turned on ‘show all script errors’ in IE if I would see it.)

          1. RTBones says:

            BINGO!

            For what its worth, Shamus, turning on script debugging in IE gave me this message:

            Line: 71
            Error: ‘jQuery’ is undefined

            I realize it would appear we have found the missing script, but for the sake of completeness, and the fact that I couldn’t get the problem to happen for me, well, there you go. :)

            EDIT: Also, this caused the problem to happen for me. I feel much better now. :)

        2. Knut says:

          Shamus, I don’t know WordPress enough to say whether you need to add this yourself or if you can ask WordPress to add it for you, but in any case the tag with the missing script is in the header of this article page.

    2. Knut says:

      And I see many people says it works for them. The same was true for me, but only until I cleared the browser cache ;) This is typical when developing web applications.

      Hope this helps :)

  6. Penn says:

    From my point of view, as an RSS follower, what I want from a feed is notification that there’s a new post and a link to it. The full text of the post is nice but not necessary. If RSS feeds all just included post titles and links so that websites could still get those tasty tasty pageviews I’d be fine with that.
    Edit: I’m seeing the behavior you describe in Chrome on Windows 7 and I have no Java skill at all.

    1. Jack Kucan says:

      By the time I finish typing this up they’ll probably be twenty other replies saying the same thing, but Java and Javascript are two different things. (I hope you weren’t making a joke about that and I just missed it.)

    2. Neko says:

      I use RSS in exactly the same way; I just need a file with updated links to poll, which I can middle-click in my browser to open a bunch of articles in new tabs.

      1. Mike says:

        Whereas I loooove full text, and loathe non-full-text RSS feeds.

        Which is off-point, but I want to test the “make a comment to reproduce the problem” thing to see what’s going on there.

        1. bubba0077 says:

          I like full content for most things (I want NSFW things just linked), but I don’t mind clicking through. Internet people need to eat too.

          As for how the footnotes show up on RSS: we get numbers in brackets indicating the are footnotes (e.g., [4]), followed by the text of the footnote in line with the rest. Interestingly, the footnote numbering doesn’t start at 1. For this entry, it started at 4, so I think it starts numbering wherever the original text stops (so if there are three footnotes, the RSS numbers start at 4, if there are four the RSS numbers start at 5, etc.). I’d have to look at previous posts to confirm that.

          1. Erik says:

            I’m a huge RSS fan/reader, but for one-man sites I like where the author is trying to get by on ad income, I always try to click through to the main article (and disable my adblock on the site). If the site isn’t mostly ad-supported, I try to read a full-text feed to avoid dumping bandwidth charges on the author. And for larger commercial publishers, I generally stay in-feed if possible to avoid annoying overlay ads.

            And to be verbose and explicit, here’s an example of how the first link showed up in my RSS feed:

            I'm talking about the little numbers that pop up in a post[4]Like this one, for example.. I ran into them on the XKCD What-If blog.

            As you can see, the text of the annotation is directly in-line with the main body, with no delimiters. It can get confusing for long annotations, but since (so far) annotations only show up here and on XKCD, and I click through to both sites to trigger ad views, I really don’t care.

          2. Blake says:

            I user Thunderbird for my RSS needs, and I just get the [7] without the blue supertext formatting, it’s unclickable, but waving over it shows the contents.

            So it has about 90% of the functionality.

    3. Seconding this, I don’t super care about the contents of the RSS feed as long as something shows up in my reader whenever there is a new post.

      For some sites it’s nice to have the first paragraph so I can skim before deciding to commit to opening the whole thing when reading on my smartphone, but I read every post Shamus puts out so it doesn’t matter to me here.

  7. Nephele says:

    My antiquated work computer (WinXP) handles it just fine. I use Chrome but tried it on IE8 and that worked too.

  8. rayen says:

    currently the only device i’m having that problem on is my iphone. I have no idea if it would be a problem with safari PC side. although i did notice that problem a couple of days ago on my computer. I’m not having the same problem now, so if you messed with it you fixed it.

    1. rayen says:

      … okay now it’s they’re all stuck open…and won’t go away.

    2. guy says:

      I have the problem with the internet app on my android, but Firefox is usually pretty happy for me. Let’s see if the comment thing mentioned above triggers it.

      Yes, yes it does. What on earth?

  9. Daemian Lucifer says:

    Dont know what you did,but while it works on clicking like intended now,it also reveals all the annotations while loading the page.So,success?

  10. O.G.N says:

    Seems to be working fine for me too. Tested with Waterfox, Chrome and the last version of Opera to use the Presto engine rather than being a Chrome skin.

  11. Eric Rossing says:

    The front page works OK in Chrome 35.0.1916.153 m and IE 8 when I just open the front page in a new tab.

    In my RSS feed, the annotation text shows up right in the text of the post: “I'm talking about the little numbers that pop up in a post[4]Like this one, for example..”.

    The weird thing here that I don’t see in XKCD’s What If feed is that the annotation numbers in the RSS feed don’t match the numbers on the page (the annotation quoted above has [4] in my RSS feed, but [1] in the post).

  12. krellen says:

    So someone suggested making a comment breaks it, thus I am making a comment.

    1. krellen says:

      Yes, making a comment DID break it. So it’s probably some clash between the edit code (or the session-id storing piece) and the annotations.

      1. krellen says:

        Okay, random thought, Shamus: can you try moving that code up the page, to come before the content? I’m not sure that will change anything, but it’s worth a shot.

        EDIT: Silly me, that won’t work, the script has to have things to run on. But it’s pretty clear the script simply doesn’t run on the front page, but only after the trigger of the site trying to remember something for you.

        1. krellen says:

          Okay, it is DEFINITELY the edit timer. My edit timer ran out, I reloaded the front page and everything is working fine now.

          Let me explore what is different between those two versions of the front page now.

          EDIT 1: Okay, the page that doesn’t work has this bit after the google analytics .js is loaded:

          <script type=”text/javascript”>

          /*From Ajax Edit Comments*/
          if ( typeof( ajaxurl ) == ‘undefined’ ) { var ajaxurl = ‘http://www.shamusyoung.com/twentysidedtale/wp-admin/admin-ajax.php’; }

          </script>

          The page that DOES work has this bit in that same place:

          <script src=”http://www.shamusyoung.com/twentysidedtale/wp-content/plugins/w3-total-cache/pub/minify.php?file=lczBCsMwDAPQH2pS9klerA6XxN5cl6Z_vw526KlsINDlSbFBY1-EwUEV4_ZMoqWujGWcj7xW-P6tIf7AqcnDKZCb6HD7UJqpJ7BEKtba8XQa5WLV_G79R07BOdCDHHTFJzcNKL8B.js” type=”text/javascript”></script>

          Since I can tell this difference is due to the comment editing, this difference in scripts is very likely why the script doesn’t run on the broken page.

          EDIT 2: And looking at the .js file, the line that is replaced is the line that loads jquery. So figure out why your site is replacing your jquery line with an ajax line and you’ve got your solution.

  13. Thomas says:

    Ok, here’s a quick breakdown.

    > jQuery.noConflict();
    JQuery is a javascript library that makes the language much easier to use. Here it’s trying to make sure that it’s not conflicting with other libraries or versions of itself.

    > jQuery(function() {
    > …
    > });
    Everything between the curly brackets will get run once the page is loaded.

    > jQuery(“.refbody”).hide();
    Select everything with the class “refbody” and hide it (essentially add style=”display:none;” to every element that has class=”refbody” in it)

    > jQuery(“.refnum”).click(function(event) {
    > …
    > });
    Add a click event handler to everything with the class “refnum”. Take note of the event parameter of the inner function.

    > jQuery(this.nextSibling).toggle();
    The thing that was just clicked, find the very next element, and toggle whether it’s hidden or not. It’s a little odd to use toggle() here, show() would make more sense given the rest of the code.

    > event.stopPropagation();
    Stop doing things, by preventing the event from bubbling up. (This way, if the parent element also has a click event, we don’t have several things happening at once. This is important due to the next click event…)

    > jQuery(“body”).click(function(event) {
    > jQuery(“.refbody”).hide();
    > });
    Add a click to the body tag, which hides every element with the class “refbody”. Essentially, if a click event doesn’t get stopped (like in the previous handler), this function will get run every time the user clicks.

    So yeah. In a nutshell, find every “refbody” element, hide it, give all the refnums a function to reveal the next thing, and add a function to the body to hide them all again. Not how I would do it, but it seems to be working well enough. If you want me to, I could write you a slightly better version based on your needs. Least I could do for the hours of pleasant reading you’ve provided me.

  14. Klay F. says:

    One of the things I noticed about those annotations is that for me, they’ll randomly switch from ‘click to view’ to ‘mouse-over to view’ in-between page-visits. From what I can tell its really irregular. Oh, and I’m using Opera.

  15. silver Harloe says:

    edit: also, if the commenters above are correct about jQuery not even being loaded on the front page, that would totally do it :)

    second edit: just found out jQuery( function() {} ); is equivalent to jQuery(document).ready(function() {} ); so nevermind my whole dang post.

  16. Mechaninja says:

    Don’t have a lot of time today, but the few times I’ve tried to read What If on mobile I had this problem.

    I’m sure that helps precisely zero.

  17. Neko says:

    I had never run into this problem until I tried the steps others have suggested, and left a comment then opened the front page in a new tab.

    It perplexes and enrages me that such behaviour is even possible. How is loading your site the first time different to loading it in a separate tab, but after commenting? It’s enough to make me swear off web browsers and do everything via telegram from now on. stop.

    Javascript scares me too. I know enough about it that I know I don’t want to be using it for anything serious anytime soon. However, jQuery is a library that’s apparently designed to try and cover up the pitfalls with a nice decorative rug and is practically a language unto itself. That example code up there looks comparatively sane… although learning the reason behind jQuery.noConflict(); makes me wish that web browsers could support anything, ANYTHING but Javascript.

    FWIW, Front page looked fine until the new post trick, never noticed it until now, Linux Chromium 33 and some older version of Firefox can’t remember.

  18. Jamie Pate says:

    Ok, so, IMO the solution to the problem is /not/ more javascript, but more CSS.

    Add css classes:
    .refbody { display: none }
    .refbody.refbody-visible { display: block; /* or anything but ‘none’ */ }

    change javascript: (it no longer has to be run on document ready)

    jQuery("body").click(function(event) {
    jQuery(".refbody").toggleClass('refbody-visible', false);
    }).on('click', '.refnum', function(event) {
    jQuery(this.nextSibling).toggleClass('refbody-visible');
    event.stopPropagation();
    });

    I always say ‘style them all and let css sort it out’ or something…?
    ALSO: jquery.hide()/.show()/.toggle() are EVIL.

    Oh, and the most important part of programming is knowing where to find documentation and how to read it.. (is something i also say)

    relevant api: http://api.jquery.com/on http://api.jquery.com/toggleClass

    ALSO ALSO: seems like there’s a race condition going on and your client code may be loading before jquery… NO WAIT: I don’t even see jquery in the list of scripts to load on the front page.. Probably the issue.

  19. Piflik says:

    “Curly braces INSIDE of parenthesis? Madness! You'll kill us all!”

    No, I am writing a Lambda Expression (my favorite kind of expression)

    1. Bryan says:

      I once wrote an entire thick-client GUI program in almost purely functional style.

      (It wasn’t *entirely* functional, because the PyGTK API is object-oriented instead, and the modification I had to make to the GTK+ tree-view-data-source class required subclassing. But everything else was functional. Python and first-class functions for the win! …Although Python can’t do unnamed functions unless they consist of nothing but a “return”; its lambdas can’t have side effects.)

      I’ve also written purely-functional javascript libraries to make event handling exactly the same across browsers (grumble grumble IE6 grumble … of course this was back in like 2005 I think). Mostly because at the time, I was familiar with that, but not with javascript’s prototype-based classes. And I wasn’t going to load some random third-party javascript library (*cough* jquery *cough*) that ends up taking over who knows how much of the actual DOM API and makes me think this is normal…

      I’ve also seen people who *only* know jquery get utterly lost when trying to debug javascript using the browser’s builtin javascript console, or the debugger’s console, because they have no idea how to use the DOM. :-/

    2. Kian says:

      What about initializer lists passed as parameters to a function (in C++11 at least)?

    3. postinternetsyndrome says:

      Yeah that’s what I thought too when I read that. :)

  20. Mike says:

    It looks like WordPress is to blame, probably whatever’s driving the comments.

    On the front page before you’ve made a comment, there’s a script link to your minified Javascript. On the front page after you’ve made a comment, that link is gone, and there’s a snippet that starts off with “/*From Ajax Edit Comments*/”

    If you get the minified Javascript to be included properly, everything will work. Which means that you’re in that ever-so-delightful situation where what looks like a coding problem is really a problem with configuring an opaque and maddening tool.

  21. Shamus says:

    Testing this while not logged in so I can see that the rest of you are seeing.

  22. shiroax says:

    I don’t know programming stuff, but maybe more data will help?

    I’m always using lates firefox and I don’t remember seeing yellow boxes uninvited. A minute ago I clicked the annotations from the front page and read them properly.
    I’ve had problems where I clicked them on the front page and they didn’t appear, but i guess that was you turning them off?

  23. Steve C says:

    If someone reports it stuck open it’s probably NoScript. NoScript forces annotations open. Whitelisting the site in NoScript fixes that problem.

    shamusyoung.com
    http://www.shamusyoung.com
    shamusyoung.com/forums/
    forums.shamusyoung.com
    and I’m sure a few others can be considered different websites based on each person’s personal settings. The unformated text above was treated differently even by this comment box.

    1. Mike says:

      Noscript will certainly do it, but it’s not the only cause. Basically, if the Javascript doesn’t execute, the footnote popups default to being visible and undismissable. The Javascript could fail to execute because you have Noscript, but not having jQuery (as happens in the after-comment situation) also causes it to not execute.

  24. Retsam says:

    I’ve been thinking this entire time “the tooltips are nice, but it’s a shame they don’t work the same as the what-if xkcd tooltips”. I didn’t realize they were supposed to be the same tooltips. For me, they’ve never opened on click, I’ve always just had to mouse over them.

  25. Shamus says:

    To make it clear: As of the time of this comment, the problem seems to be resolved according to all the tests I can do.

    If the annotations aren’t working for you, then speak now or put up with the broken-ness forever, because I’m close to closing this issue and moving on. Thanks!

    1. Taellosse says:

      It appears to be working properly for me on the site. Whatever you did has changed the way they appear in my RSS feed, however (I read your site in both places, depending on what it is and my mood). I commented on how these annotations were working in RSS a few weeks ago on another post – the numbers are still starting, weirdly, around 3-5 instead of 1, but now the text of the annotation is appearing as inline text after the number, instead of hidden until a mouseover.

      Not that I necessarily expect you to care that much about how it well it works in the RSS feed, just thought I’d let you know.

    2. Daemian Lucifer says:

      It works almost perfectly.The annotations do get displayed while they are loading,but thats one second at most,so Im not complaining,Im merely pointing it out.

    3. MichaelGC says:

      testing … testing …

      Edit: nope, works fine (this is on iOS). They briefly appear, like Daemian Lucifer says, and then they go away again and operate as normal.

    4. krellen says:

      Okay, I’m replying so I can test to see if it still breaks like it did before.

      EDIT: Okay. The annotations work, but now editing goes to a new page instead of a floating box on the same page.

      EDIT 2: Edits WORK, but I’d say now the edit function is broken instead.

      1. Daemian Lucifer says:

        Really?Let me test that.

        EDIT:Huh,a new page.Well not that edit boxes allowed for much stuff to be seen while doing the edit,but the cancel button doesnt work now,and it did with the boxes.

        EDIT2:Yeah,the edit function is definitely borked.Saving the comment merely changes it,but doesnt return you to the page,and cancel button is useless now.

        EDIT3:Same problems with the delete function.It works,but the send request doesnt bring you back to the page,and cancel button is useless.

        1. MichaelGC says:

          In case it helps with the shooting of troubles, the Edit function has behaved like this (i.e. a new edit page which doesn’t take you back to the comments on save) for some time on iOS.

    5. Kyte says:

      While it’s now fixed, the fact you disabled minification means the page will take longer to load. Now that’s not really a much of an issue given it’s relatively small, but it’s something to consider, and the problem itself (minified javascript is not being loaded on the front page) hasn’t really gone away.
      What minifier do you use? WP-Minify?

  26. lethal_guitar says:

    “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!”

    Well, then you haven’t seen C++’s version of that yet (available since the new C++ 11 standard): Behold, the mighty lambda function!

    int someResult = myCrazyFunction(“foo”, 5, [](int a) {
    return a*100;
    });

    Anyway, this allows for some pretty nice and expressive code if used well. The concept (functions as first-class objects) comes from functional programming originally, but has a lot of benefits in imperative languages as well. Many modern languages support it in some form – even PHP.

    1. Anonymous (or unnamed) functions in javascript is kind of weird yeah, sadly they are overused by so many, as a mostly procedural coder that makes my eye twitch.

  27. Two pet peeves of mine:

    jQuery is not javascript, jQuery is a framework library created in javascript, the fact that you can mix”n’match javascript is purely coincidental, just look at “javascript” sites or Q&A forums, ask a question about javascript and you have a 50% probability the answer requires jQuery, even if the question specifically states “plain javascript” you will still get jQuery based answers.

    There is an old saying, learn to walk before you try to run, in this case jQuery is like jumping in a car and driving away without ever checking if you know where the break pedal is.

  28. Another peeve of mine is the footnote/annotations, those lovely little numbers, shouldn’t they also be listed at the end of the article?
    This is what Wikipedia does, this is what any book or document with footnotes do.

    A combo of footnotes that is also shown as tooltip footnotes is pretty clever, the solution here only does half that. If the post was ever printed the footnotes would not show (currently).

    On the positive side, the “inline” footnotes are read as if they where normal text by screen reader software so, that’s a plus I guess.

    May I suggest that instead of using [1] and [2] and [3] that you just simply use something else. How about just [?] or (?) or something similar to indicate that the reader can click there for some extra info. Heck use (i) which is a (circle with a small i which is one of a few international symbols for information).

    1. Daemian Lucifer says:

      The problem with regular footnotes in a website is that you jump to the bottom of the page,and then have to get back to where you left off.Sure,the back button does this,but in case of on click annotations like the ones used here,you can just click on the same spot where your mouse already was.No need to move the cursor,no need to go for the keyboard.Its much more elegant.Its also something the books cant do,which is why you shouldnt compare web pages with books.

      1. Taellosse says:

        I’ve seen some sites do footnote links, and then clicking on the number/symbol at the beginning of the footnote brings you back to the spot in the body of text where the original notation is located (two different inline hyperlinks, basically). So if that were done, one’s place isn’t lost.

        1. Daemian Lucifer says:

          Yes,thats how wikipedia does it.However,you still have to move your cursor,while this way you dont have to.

          Also,there is the fact that with footnote links,every time you click it,it counts as another page,so if you click a dozen footnotes,and then click them to return back,if you want to go to the previous page of what you were reading you would have to use the back button two dozen and one times,instead of just once.

          1. Taellosse says:

            This is true. Though with footnote links like that, I have a tendency to use the back button (or the equivalent mouse button/keystroke) to return to my place on the page anyway.

  29. Um, I hate to be the bearer of bad news but if I click on “Edit comment” i get brought to a new page with just the comment box. And when I click Save it remains on that page. Not a huge issue since the browser (Firefox 30) has a back button but…

    Also, are the annotation supposed to remain up and require manually clicking them to hide them again? Or are they supposed to work like tooltips?

    1. krellen says:

      It’s an onClick function. It’s supposed to require clicking.

  30. Shamus says:

    Testing comment edit functionality. Again.

    1. Shamus says:

      More testing. Interesting that changing ANYTHING on the comment edit plugin will kill all edit timers.

      1. MichaelGC says:

        Your not-logged-in avatar thingy looks appropriately annoyed and frustrated.

  31. Neko says:

    Not Replying to myself to test things, because apparently I’m a spambot. Oh joy. Errr, let’s write some normal looking text to fill things in, and… I have no idea why I was flagged as a spambot in the first place. Is it the all-caps at the end? I need that to express my exasperation! Okay third time, muttered about my cache maybe being out of date, let’s follow its stupid link and post again! Unless my rapid attempts at posting are also spam-like behaviour…

    So *minifying* the Javascript breaks things? GARGH WHY IS THIS EVEN A THING!

    Edit: Yeah, sorry Shamus, but I was able to reproduce the bug by commenting and then opening your front page in a new tab via middle-click on the title. I’m guessing it’s the thing someone suggested where jQuery isn’t loaded for the front page, but perhaps your admin-bar does load it. Maybe. I dunno. Let’s just go back to all-Flash websites, they were cool.

    1. Probably because minifying does not just reduce whitespace, it also renames (if set to very agressive) the names of functions and variables, and if you are not careful with javascript some stuff may be global where it should not, so you end up with naming clashes.

      The bug is either in the minifyer or in the code in one the javascripts, when not minified the variable or function name is probably still unique. It is also possible there are other conflicts but they do not manifest that easily.

  32. Shamus I created this http://pastebin.com/4JWdeWGc

    This is probably about as simple as it can be done, there is no dependencies on any javascript or css frameworks, there should be no conflicts with any such frameworks either. No hacks or tricks are used either so this should be pretty future proof

    All modern browsers should handle this fine. Depending on how “modern” a browser is the look may vary, box shadows may be an issue on older version of IE.

    In the example I put on pastebin the first note is too long (on purpose) to show how a scrollbar is automatically shown.
    The second example shows how links can be put in the note.

    The look and size of the note is easily changed in the css, I hope the CSS is simple enough that any explanation is not needed, but feel free to ask if there are any questions.

    The important thing is that it’s super easy to use, you simply use a single span tag around the text you wish to turn to a note and and add the snote class to it, the rest is automatic. The span can potentially be replaced with other html tags.

    It is called snote because why not… (or it could stand for “simple note” or “Shamus Note” if you want)

    I tested the code in Firefox 30, IE 11, Opera 22, Chrome 35.

    Oh and the code is placed in the public domain so use and abuse and modify those who want to.

    The icon used in the example is just a example, I would not advise hot linking to whomever is hosting that icon without some research if anyone end up using this in production code.

    If anyone see odd characters in some of the original text written by Shamus it is because somewhere when copy’n’pasting the text the characters for the character set used was not translated to utf8, Oops! My bad, but it is just a visual blemish.

    (For some reason the site is saying I’m trying to post a duplicate comment, and a moment ago it said I was a spambot but that it could be a cache problem, so apologies if this is a double post.)

  33. I improved the code a little: http://pastebin.com/ZcD9sexr

    The only and very important change is that now the entire snote is not displayed by default, so if javascript should fail (or be blocked) then no icon/symbol is shown.

    The old code would just puke out the note text if javascript failed or was blocked.

    This also means that not using the javascripot code on the front page will hide the note fully, requiring people to read the full post to be able to see the note icon and interact with it (if that is desired, using the javascript code should work fine on any page though).

    I also fixed the ‘ character encoding mistake in the example text.

    1. Shamus says:

      Thanks for this. I’ll try and look at it before the weekend.

      1. This is the same as the above only it behaves exactly like on XKCD, instead of automatic show/hide this one requires you to click to shoe and click to hide.
        Automatic http://pastebin.com/ZcD9sexr
        Manual http://pastebin.com/qJwC4ZqS

        The manual one has some javascript kludge and requires javascript to function, the automatic one is pure CSS (except the initialization).

        Here are jsfiddles for the two if you prefer that instead of pastebin.
        Automatic http://jsfiddle.net/6bTH3/
        Manual http://jsfiddle.net/g3DFg/

        You should also see the one flaw of these methods, due to how simple they are they do get cut off if at the top or bottom or left or right of the page itself.
        To ensure the box is always visible will require more javascript (I can’t recall CSS having anything to handle that).

        The manual one may be able to improve further, I’m not keen on having to use snote_0 and snote_1 etc. to control the displaying of the note, there is possibly a CSS way to do this also but I’ve spent too much time on this as it is.

        They work, they can easily be modified (I hope, though the automatic one with the nested functions and [ and } makes me weep), and seem to work/look the same in all major modern browsers.

        For inline notes the manual one is probably better as you do not accidentally have one pop up as you scroll or move the mouse around and it stays up as long as the reader wants.
        The automatic one though might be great in areas you want extra info quickly available but otherwise tucked away. Like a date, url, or even a image.

        I’m not planning to work further on this code myself, so if anyone else want to take a stab at improving it (get rid of the generated inner span ids, and move the box into the page if cut off on a screen edge) then by all means do so as I am curious as how simple or complicated that would be though.

        1. Me and my big mouth…
          http://pastebin.com/YQyYehsp

          I changed the way the manual one works, now if the box ends up outside the viewport area it will move the box inside it so it should never get cutoff.

          Also as a side effect the box that pops up will now center the note/tooltip box on top the span or tag that uses the snote class. It might look like it is centering on the mouse when opening but it’s really centering on the icon (in this example).

          I tested in the same browers again, but the more complex this stuff is the more chance it will break (I still like my original CSS one with only the javascrit init).
          If I where to guess then older versions of IE will most likely have issues with this last iteration of the code.

          I do not see any point in improving this further, only thing that annoys me a bit now is the use of the id=”snote_’ stuff, I wish I knew (off the top of my head) how to avoid that, but I don’t, if anyone else do please chirp up, I prefer to avoid using ids if possible.

          Anyway, I hope this let beginning coders see that you do not need a huge boated popup or tooltip library (there is plenty out there) to get this working.

          1. OFFS!

            http://pastebin.com/mwvSjC0C
            http://jsfiddle.net/2t2pG/

            snote v5 Changes…

            Removed one cursor de-styling and put that in the javascript part. (it turns the cursor normal after the note has popped up, purely cosmetic for the note part only)

            Got rid of the auto generated ids as the node is directly referenced now.

            Got rid of the margin positioning.

            Fixed a PWS (programmer was stupid) bug, hiding the note actually ran through all the code, now it just returns from the function when hidden, lots of CPU was previously wasted.

            The centering of the note is now centered on the center of the underlaying span that has the “snote” class, previously it centered on the top left corner so it was off by whatever the width/height of the icon (in the example) was. Now the note will center automatically on whatever width the icon or span etc is regardless of it’s size.

            I’m gonna go chain myself to the wall now before I end up coding a full CMS…

            1. RTBones says:

              PWS…at that, I have to LOL. We had a slightly more derogatory term for the same thing when the issue in question was discovered by another:

              FYS – Fix Your Sh*t.

            2. *sneaks in from the dark*

              snote v6 (final) http://pastebin.com/BEzd3c7i

              *sneaks away into the dark*

              1. Shamus says:

                Finally taking a look at this. Seems to be working on my staging site. (Although I’m not crazy about the (i) icon. I do like the numbers. I may hack at it to use my numbers.) It even works side-by-side with the old system and the other JS contraptions that have been causing all these conflicts.

                The only problem so far is that Once I dismiss a note I can’t bring it up again. That could be my fault. I need to look at it some more.

                1. Shamus says:

                  Yeah, not being able to recall a note after dismissing it was a problem on my end. It’s all working more or less as intended.

                  Still trying to figure out how to use my footnote numbers. (I do this because it also lets me do [citation needed] type jokes.) I really need a way to have clicking on one element toggle the visibility of the following one. I feel like this is very close to what I need, but JS is a tricky beast. Still working on it.

                  1. Shamus says:

                    Fun fact: I mistakenly made a circular reference that made the JS run forever. Locked up the entire browser window, as well as the window that invoked it. Couldn’t even refresh. Had to kill the process. The fact that this kind of malfunction is possible in 2014 is kind of interesting. I guess there’s nothing malicious you can do with it, just harmlessly annoy the user.

  34. fscan says:

    If you like annotations and jokes, you’ll love Terry Pratchett :)

  35. Phantos says:

    For me, now all of the annotations show up all at the same time on the front page, covering up some of the article text. But it still works fine on individual posts.

  36. krellen says:

    Annotations are back to being broken on the front page after I comment, but the edit works like it used to, so I assume you just undid the fix you did and are working to implement the new annotation code that was written for you instead?

  37. shiroax says:

    The font of the annotations is really small for me now. Not sure if it’s something you did or or something on my side, but it’s a bit hard for me to read now.

    Also they show on the front page after I comment. I never noticed that before.

  38. TSi says:

    Can you put the content of the note in the title attribute instead of that number ?
    Because browsers use the title attribute by default to popup a message containing it’s text, this makes 2 popups apear, one automaticaly with a number in it and another on click with your message.

    To fix this, i’d either replace the title with a made up parameter like “numberthing” and update your javascript by replacing snote_element.title with snote_element.attr(“numberthing”) or fix this entire situation that contains too much javascript for your own good…

    … with this tiny HTML tag that nobody seems to know about <sup title=”like this one” >1</sup>

    The class would thus be useless making your CSS even simpler.

    This would require you to input the numbers manually but then again, it’s possible let ourselves let JS do some work like :

    var supindexes = $(“sup:empty”);
    $(“sup:empty”).text( function( index ) {
    return index + 1;
    });

    example :
    http://jsfiddle.net/772Cc/

    Very small and clean, not sure how it would integrate with your website back office though.

    1. TSi says:

      oops, time out for edition, left too much JS in that previous example, the first line was a test so it should only be this :
      $(“sup:empty”).text( function( index ) {
      return index + 1;
      });

  39. It’s amazing in favor oof me tto have a web site, which is valuable in favor of mmy knowledge.
    thanks admin

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply

Your email address will not be published.