• Posts
  • RSS
  • ◂◂RSS
  • Contact

  • Preview On Hover

    June 24th, 2020
    meta, tech  [html]
    A couple years ago, Wikipedia added a feature where if you hover over an internal link you'll see a preview of the target page:

    Other sites with similar features include gwern.net:

    And LessWrong:

    In general, I like these features a lot. They dramatically lower the barrier the following internal links, letting you quickly figure out whether you're interested. On the other hand, they do get in the way. They pop up, overlapping the text you're reading, and mean you need to be paying more attention to where the mouse goes.

    I decided I wanted to add a feature like this to my website, but without any overlap. The right margin seemed good, and if you're reading this on jefftk.com with a window at least 1000px wide then hovering over any link from one of my blog posts to another should show a preview:

    Here are my five most recent posts if you'd like to give it a try:

    There are a lot of options for how to implement this, but I decided to use an iframe that just loads the relevant page. Feel free to look at the page source and see exactly how it works, but the general idea is:

    • It loads the page directly, not a stripped down version like the examples above. My pages are simple enough that this is fine.

    • It's a preview, not a full page, so set scrolling=no.

    • It's a same-origin ("friendly") iframe, so I can reach into it and add a click listener, so clicking on the iframe takes you through to the previewed post.

    • I don't want comments, ads, analytics, or anything else potentially slow to run, and I don't use JS for rendering, so I use sandbox to turn off JS.

    • Once it's open it stays open until you hover a different preview.

    • It appears vertically aligned with the hovered link, and moves with the page out of view as you scroll down.

    • If you hover over a second link close to the first one, it reuses the same vertical position to avoid looking jumpy.

    • If you hover many links in quick succession it starts loading the first one immediately, and then discards any links that have been overtaken by events.

    I'm pretty happy with it, but if you find any bugs let me know!

    Comment via: facebook, lesswrong

    Recent posts on blogs I like:

    How to Build High-Speed Rail with Money the United States Has

    The bipartisan infrastructure framework (BIF) just passed the Senate by a large margin, with money for both roads and public transportation. Unlike the 2009 Obama stimulus, the BIF has plenty of money for high-speed rail – not just $8 billion as in the 20…

    via Pedestrian Observations July 31, 2021

    Collections: The Queen’s Latin or Who Were the Romans, Part V: Saving And Losing an Empire

    This is the fifth and final part (I, II, III, IV) of our series asking the question ‘Who were the Romans?’ How did they understand themselves as a people and the idea of ‘Roman’ as an identity? Was this a homogeneous, ethnically defined group, as some ver…

    via A Collection of Unmitigated Pedantry July 30, 2021

    Songs about terrible relationships

    [Spoilers for several old musicals.] TV Tropes lists dozens of examples of the “I want” song (where the hero of a musical sings about their dream of escaping their small surroundings). After watching a bunch of musicals on maternity leave, I’m wondering h…

    via The whole sky July 17, 2021

    more     (via openring)


  • Posts
  • RSS
  • ◂◂RSS
  • Contact