

Focusable – Set a spotlight focus on DOM element - zzarcon
https://github.com/zzarcon/focusable

======
tsergiu
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 Firefox
sidebar. By fading everything else out, it is easy to have the help text in a
different location.

2) Bubbles are typically not as high contrast as the overlay, so they are a
weaker mechanism for drawing attention.

3) With the overlay technique, you can highlight multiple elements at once,
which is impossible with bubbles. This is critical when you need to explain
how two things relate to each other, and something that seems to be missing in
this library.

You can check out how we did our interactive tutorials at
[http://www.parsehub.com](http://www.parsehub.com) (they're within the
extension).

[1] [http://css-tricks.com/bubble-point-tooltips-with-
css3-jquery...](http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/)

~~~
peterjmag
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/](http://usablica.github.io/intro.js/)

~~~
zzarcon
Yes, intro.js is a great lib, I know that, but for me has an important missing
feature; you can't interact with the focused element, I mean, you don't have
any mouse event or similar... this is the only bad thing I think.

~~~
afshinmeh
Thanks for this feedback dude, I will concentrate to address remaining issues,
including what you mentioned.

Cheers :)

------
colinramsay
Looks great, and glad to see that removing the jQuery dependency is on your
todo list!

~~~
zzarcon
Thanks sir! At the beginning I tried to implement the lib only with the Dom
api, but was a little painful because isn't very agile and tedious... so I
ended with the jQuery dependency, thing that I want to remove in the future.

~~~
danmaz74
Maybe an intermediate (or even final) solution could be to make it work using
only zepto?

~~~
notduncansmith
(shameless plug) Here's a similar library with no dependencies :)

[https://github.com/notduncansmith/showcase](https://github.com/notduncansmith/showcase)

------
spdustin
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?

~~~
zzarcon
I think that you're looking for is that
[http://html2canvas.hertzen.com/](http://html2canvas.hertzen.com/) :D

------
petercooper
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? :)

~~~
zzarcon
You can find a live demo here
([https://github.com/zzarcon/focusable/tree/master/sample-
app](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 element to the bottom
part of the page. 4- Fills the right part of the page.

These divs are absolute positioned inside a wrapper that have disabled the
pointer events to enable the interaction with the focused element.

So for that reason I can't simply add a border-radius for the active element.

This images can help me to explain you how it works
[http://cl.ly/image/3g2K2N1j1S3S](http://cl.ly/image/3g2K2N1j1S3S)
[http://cl.ly/image/031j3p283235](http://cl.ly/image/031j3p283235)

~~~
Rygu
Create a 5th div that exactly overlays the focussed element, and give the
overlay an inset box-shadow. (You may need to pass through mouse events
programmatically.)

~~~
RubyPinch
no need to manually handle clicks,
[https://stackoverflow.com/questions/3680429/click-
through-a-...](https://stackoverflow.com/questions/3680429/click-through-a-
div-to-underlying-elements)

~~~
zzarcon
Yeah! is the approach I also follow in the library, you can check it here
[https://github.com/zzarcon/focusable/blob/master/app/focus-e...](https://github.com/zzarcon/focusable/blob/master/app/focus-
element-overlay.js#L165)

------
jayflux
I've attempted to remove the jQuery dependancy
[https://github.com/zzarcon/focusable/pull/11](https://github.com/zzarcon/focusable/pull/11)

------
cardamomo
This reminds me a lot of Fokus
([http://lab.hakim.se/fokus/](http://lab.hakim.se/fokus/)).

------
tanveerhn
This would be great for user on-boarding of our product. Perfect timing...
will let you know how it goes.

------
dhpe
Thanks, this is useful.

