11–20 of 28 posts
Earlier quoted context omitted.
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.)
no need to manually handle clicks, https://stackoverflow.com/questions/3680429/click-through-a-...
Earlier quoted context omitted.
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.
Maybe an intermediate (or even final) solution could be to make it work using only zepto?
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 (they're within the extension).
[1] http://css-tricks.com/bubble-point-tooltips-with-css3-jquery...
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…
Once again we find on HN a UI project with no link to a live demo on the project page.
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'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? :)
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? :)
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
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/