search

fortesinformatica / Sideshow

Sideshow is a powerful javascript library which aims to reduce your user's learning curve by providing a way to create step-by-step interactive tours. Explain the features of your application, control your end-user's interaction with your UI, emphasize what you're explaining in each step by masking it. Just think! The sky is the limit!
http://fortesinformatica.github.io/Sideshow
Apache License 2.0
86 stars 31 forks source link

Target indicator shown when target overflows its container and is hidden #19

Open peteallen opened 9 years ago

peteallen commented 9 years ago

We have a container in our page which hides overflowing content with the overflow: scroll property. The result when using Sideshow is that the target indicator appears even when the target has not been scrolled into view. This is kind of hard to explain/visualize, so I created a fiddle to demonstrate the issue:

https://jsfiddle.net/39y8e0dh/

I am interested in contributing to the project and we need to get this issue fixed before we can go live with Sideshow, so I volunteer to fix it. I wanted to check with you first to find out whether this issue was known and whether there was already a plan to fix it. Otherwise, I'll start working on it. I'm uncertain what the best way is to determine whether the target is truly visible; any suggestions would be appreciated.

Thanks, Pete

P.S. We love the framework. Thanks for all your hard work.

DanielApt commented 9 years ago

I wasn't aware of this issue, but @alcidesqueiroz has built the logic of the positioning, so I'd double-check.

By all means please contribute :)

Will be able to have a look at it this weekend.

alcidesqueiroz commented 9 years ago

@peteallen, due to the amount of possibilities when it comes to structuring a page layout (e.g. nested elements with overflow auto or scroll), it's extremely difficult to find out a generic solution for this situation. Unfortunately, Sideshow can't be responsible for checking if a target/subject is really visible. A lot of factors should be considered in order to infer if an element is visible or not, like the window scroll itself, the independent scrolling of elements, z-index, display, opacity, visibility, position, transform... wow, this would be a herculean job :).

So, in your case I'd bet in an ADHOC solution, something like using the Document.elementFromPoint() method, it's experimental, but it has a good browser support. If you have another idea, please keep us up-to-date!

If you wanna contribute a little more with Sideshow, you can reach me on Skype at alcidesqueiroz.

Regards

peteallen commented 9 years ago

After spending some more time with it, I'm inclined to agree with you. I came up with the idea of allowing a custom function to be defined in the config for each target, but that would require a change to the way targets are defined to allow a different method to be supplied for each target in the scenario where multiple targets are defined.

With that in mind I think we will probably work around the issue for our immediate need, but I'll let you know if I can think of a more generic solution.