Focusable – Set a spotlight focus on DOM element
1–10 of 28 posts
Re: Focusable – Set a spotlight focus on DOM element
#2Looks great, and glad to see that removing the jQuery dependency is on your todo list!
Re: Focusable – Set a spotlight focus on DOM element
#3I'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? :)
Re: Focusable – Set a spotlight focus on DOM element
#4Looks great, and glad to see that removing the jQuery dependency is on your todo list!
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.
Re: Focusable – Set a spotlight focus on DOM element
#5Looks great, and glad to see that removing the jQuery dependency is on your todo list!
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?
Re: Focusable – Set a spotlight focus on DOM element
#6I'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 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/031j3p283235
Re: Focusable – Set a spotlight focus on DOM element
#7I'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…
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.)
Re: Focusable – Set a spotlight focus on DOM element
#8Thanks, this is useful.
Re: Focusable – Set a spotlight focus on DOM element
#9Earlier quoted context omitted.
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…
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.)
That's sounds good and easy, and can accomplish the goal, I'll open a PR for try your approach, thanks!
Re: Focusable – Set a spotlight focus on DOM element
#10Earlier quoted context omitted.
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…
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-...