How IntroJs achieve the highlighted areas?

Question

Came across intro.js - a very cool way to guide users on how to use software interfaces. I havnt looked at the source in depth but was wondering if anyone could briefly explain what the code does to achieve the highlighted areas (specifically dimensions/position/zindexing) to achieve the effect.

Thanks in advance Jay

Link: http://usablica.github.com/intro.js/

Answer 1

I'm Afshin, the author of Intro.js. Let me introduce you how it works actually.

In a focused/highlighted element, two separate things happend:
1) Make a helper layer. Helper layer is the white rounded corner layer in focused element.
2) Change z-index and position of the target element in order to bring the element to front of all other elements in the page.

If the position of target element (the element that should be focused/highlighted) is:

Absolute/Relative: IntroJs just set the target element z-index to 9999999, so the target element goes to front of all other elements in the page.

Static: Now, IntroJs set the target element position to relative and then set the z-index to 9999999.

Now, the target element is in the front of all other elements in the page. So, one last step remains, create the helper element.

For creating the helper layer, IntroJs just get the height, width, top and left of the target element and then create a div with class introJs-helperLayer (and position absolute) and append it to the body.

Conclusion

In order to focus on an element, IntroJs does two steps, first creating a helper layer (rounded corner layer in the page) and then make the target element content relative in order to bring it to front of the all elements in the page.

Answer 2

Well - pretty simple.

1. make an overlay div with width/height 100% with z-index lets say 1000 - this is the main bacground with the black opacity;
2. make another overlay which highlight the specific element of the "step" with z-index more then the base overlay let's say 1001 - this is the "white" element with the tooltip container explanation;
3. finally set the original element from the page to be position:relative and with the highest z-index(1002) to be above them all.