Focusable – Set a spotlight focus on DOM element

Post by zzarcon » Sun, Dec 14, 2014, 5:54 PM UTC

spdustin wrote: post #18

Since it's tangentially related, is anyone aware of a tool (browser based or Mac-supported) that would take a CSS selector and, rather than spotlight it, capture a screenshot of its bounding box? Ideally, capturing multiple screenshots if there are multiple matching elements?

Post by afshinmeh » Sun, Dec 14, 2014, 7:10 PM UTC

peterjmag wrote: post #16

tsergiu wrote: post #14

This overlay technique works beautifully for guided, interactive tutorials. We've had great success using it in our tutorials to get users quickly up to speed with our product. It works better than the similar "show bubble beside dom element" technique[1] for a few reasons: 1) With bubbles, you need real estate next to the element to display the help text. This often doesn't exist, especially e.g. inside a frame in a…

I've used Intro.js[1] in the past for this technique, and I've been pretty happy with it. [1] http://usablica.github.io/intro.js/

Post by jayflux » Sun, Dec 14, 2014, 9:07 PM UTC

Post by WiseWeasel » Mon, Dec 15, 2014, 12:30 AM UTC

zzarcon wrote: post #6

petercooper wrote: post #3

I'd need to look into the code as I couldn't find a live demo to quickly noodle with, but my first thought was to add a border radius or some sort of blur filter to make it more spotlight-like? :)

You can find a live demo here ( https://github.com/zzarcon/focusable/tree/master/sample-app ). About adding a border-radius, I'll love that feature, in fact I was thinking about implement it, but isn't as easy as it seems. TLDR: Right now they are 4 divs for making the focus enable: 1- Fills the left part of the page. 2- Fills the top part of the page to the top part of the element. 3- Fills the bottom part of the el…

  #overlay-layer .column:nth-child(2):after,
  #overlay-layer .column:nth-child(2):before,
  #overlay-layer .column:nth-child(3):after,
  #overlay-layer .column:nth-child(3):before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
  }

  #overlay-layer .column:nth-child(2):after {
    right: 0;
    bottom: -10px;
    box-shadow: 5px -5px 1px rgba(0,0,0,0.8);
  }

  #overlay-layer .column:nth-child(2):before {
    left: 0;
    bottom: -10px;
    box-shadow: -5px -5px 1px rgba(0,0,0,0.8);
  }

  #overlay-layer .column:nth-child(3):after {
    right: 0;
    top: -10px;
    box-shadow: 5px 5px 1px rgba(0,0,0,0.8);
  }

  #overlay-layer .column:nth-child(3):before {
    left: 0;
    top: -10px;
    box-shadow: -5px 5px 1px rgba(0,0,0,0.8);
  }