Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Modal-Style Text Selection with Fokus

By  on  

Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in the background of the entire page, allowing only the highlighted block to display at it's normal mode.

View Demo

The HTML

Nothing special needs to be done with the page HTML, and you don't create "active" zones -- simply include the JavaScript file at the bottom of the page:

<!-- at bottom of the page -->
<script src="fokus/js/fokus.min.js" async></script>

The overlay elegantly fades in and out.  Canvas is used to create the overlay, and CSS' pointer-events property is used to ensure event handling consistency.  It would be great if Fokus was a bit more modular, including allowing active zones and customized overlay color, but it's hard to complain about anything else with Fokus.

View Demo

Fokus isn't a necessity for any site, but I was taken aback by how smooth and accurate Fokus is.  Weighing in at just 3KB, it's an impressive little library.  Have an idea for how you'd use Fokus?  Share it!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

  • By
    MooTools Zoomer Plugin

    I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is...

Discussion

  1. patrick

    why not using it when using html5 contenteditable. it would play very nice together by let the user focus on the content he wants to edit.

  2. Bilal

    nice find. one thing; your website search box is broke. i couldn’t search for anything directly from the box and i had to use google for searching your website.

  3. smashercosmo

    Nice plugin. But I think, that implementation is too complex. It would be rather simpler to add outline: 999px solid rgba(0,0,0,0.7) to the focused block instead of rendering canvas.

  4. Isiah

    Nice… but until I was told what to do to make it work in the demo I would never have known! And that’s where it falls down.

  5. Scott Korman

    You could totally use this tool to launch a submenu that allows you to print it, send it to someone or post to twitter, etc. It would be super cool and as always you rock for puttin’ this out.

    • Alex

      This is really the best idea for this snippet. Thanks for sharing!

  6. gabby

    how can you have an option to edit the text selected?
    Thank you

  7. s23q

    where is this to download??

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!