4 ms·

Focusable – Set a spotlight focus on DOM element

48 points by zzarcon 12y ago

colinramsay 12y ago
Looks great, and glad to see that removing the jQuery dependency is on your todo list!
- zzarcon 12y ago
  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 12y ago
    Maybe an intermediate (or even final) solution could be to make it work using only zepto?
    - notduncansmith 12y ago
      (shameless plug) Here's a similar library with no dependencies :) https://github.com/notduncansmith/showcase https://github.com/notduncansmith/showcase
petercooper 12y ago
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 12y ago
  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 12y ago
    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.)
    - zzarcon 12y ago
      That's sounds good and easy, and can accomplish the goal, I'll open a PR for try your approach, thanks!
    - RubyPinch 12y ago
      no need to manually handle clicks, https://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements https://stackoverflow.com/questions/3680429/click-through-a-...
      - zzarcon 12y ago
        Yeah! is the approach I also follow in the library, you can check it here https://github.com/zzarcon/focusable/blob/master/app/focus-element-overlay.js#L165 https://github.com/zzarcon/focusable/blob/master/app/focus-e...
  - Domenic_S 12y ago
    That isn't a live demo. Once again we find on HN a UI project with no link to a live demo on the project page.
    - zzarcon 12y ago
      Sorry man, you're right, I updated the Readme and put there a live demo link. Hope you like http://www.mrdrozdov.com/focusable/sample-app/index.html http://www.mrdrozdov.com/focusable/sample-app/index.html
      - Domenic_S 12y ago
        Awesome, thanks. After you focus a non-header area, how do you get back to a normal state? Clicking around doesn't remove the black area, ESC doesn't either. Mac/Chrome.
- mrdrozdov 12y ago
  I forked the repo, and used github pages to host the sample-app code. You can view a live demo here: http://www.mrdrozdov.com/focusable/sample-app/index.html http://www.mrdrozdov.com/focusable/sample-app/index.html
  - zzarcon 12y ago
    So cool man, I just added your link to the Readme, thanks for the support!
dhpe 12y ago
Thanks, this is useful.
cardamomo 12y ago
This reminds me a lot of Fokus (http://lab.hakim.se/fokus/ http://lab.hakim.se/fokus/).
tsergiu 12y ago
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 12y ago
  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 12y ago
    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 12y ago
      Thanks for this feedback dude, I will concentrate to address remaining issues, including what you mentioned. Cheers :)
  - afshinmeh 12y ago
    Thanks!
spdustin 12y ago
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 12y ago
  I think that you're looking for is that http://html2canvas.hertzen.com/ http://html2canvas.hertzen.com/ :D
jayflux 12y ago
I've attempted to remove the jQuery dependancy https://github.com/zzarcon/focusable/pull/11 https://github.com/zzarcon/focusable/pull/11
tanveerhn 12y ago
This would be great for user on-boarding of our product. Perfect timing... will let you know how it goes.

48 points by zzarcon 12y ago

colinramsay 12y ago

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

zzarcon 12y ago
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 12y ago
  Maybe an intermediate (or even final) solution could be to make it work using only zepto?
  - notduncansmith 12y ago
    (shameless plug) Here's a similar library with no dependencies :) https://github.com/notduncansmith/showcase https://github.com/notduncansmith/showcase

petercooper 12y ago

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 12y ago
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 12y ago
  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.)
  - zzarcon 12y ago
    That's sounds good and easy, and can accomplish the goal, I'll open a PR for try your approach, thanks!
  - RubyPinch 12y ago
    no need to manually handle clicks, https://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements https://stackoverflow.com/questions/3680429/click-through-a-...
    - zzarcon 12y ago
      Yeah! is the approach I also follow in the library, you can check it here https://github.com/zzarcon/focusable/blob/master/app/focus-element-overlay.js#L165 https://github.com/zzarcon/focusable/blob/master/app/focus-e...
- Domenic_S 12y ago
  That isn't a live demo. Once again we find on HN a UI project with no link to a live demo on the project page.
  - zzarcon 12y ago
    Sorry man, you're right, I updated the Readme and put there a live demo link. Hope you like http://www.mrdrozdov.com/focusable/sample-app/index.html http://www.mrdrozdov.com/focusable/sample-app/index.html
    - Domenic_S 12y ago
      Awesome, thanks. After you focus a non-header area, how do you get back to a normal state? Clicking around doesn't remove the black area, ESC doesn't either. Mac/Chrome.
mrdrozdov 12y ago
I forked the repo, and used github pages to host the sample-app code. You can view a live demo here: http://www.mrdrozdov.com/focusable/sample-app/index.html http://www.mrdrozdov.com/focusable/sample-app/index.html
- zzarcon 12y ago
  So cool man, I just added your link to the Readme, thanks for the support!

dhpe 12y ago

Thanks, this is useful.

cardamomo 12y ago

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

tsergiu 12y ago

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 12y ago
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 12y ago
  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 12y ago
    Thanks for this feedback dude, I will concentrate to address remaining issues, including what you mentioned. Cheers :)
- afshinmeh 12y ago
  Thanks!

spdustin 12y ago

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 12y ago
I think that you're looking for is that http://html2canvas.hertzen.com/ http://html2canvas.hertzen.com/ :D

jayflux 12y ago

I've attempted to remove the jQuery dependancy https://github.com/zzarcon/focusable/pull/11 https://github.com/zzarcon/focusable/pull/11

tanveerhn 12y ago

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