Geek Answers Handbook

How do IntroJs reach highlighted areas?

Compatible with intro.js - a very cool way to orient users to the use of program interfaces. I havnt looked at the source in depth, but wondered if anyone could briefly explain what the code does to achieve the selected areas (in particular, dimensions / position / zindexing) to achieve the effect.

Thanks in advance Jay

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

+6
source share
2 answers

I am Afshin, author of Intro.js. Let me introduce you to how this actually works.

In a focused / highlighted element, two separate things happened:
1) Create an auxiliary layer. The auxiliary layer is the white rounded corner layer in the focused element.
2) Change the z-index and position target element to bring the element to all other elements on the page.

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

Absolute / relative : IntroJs just sets the z-index target to 9999999 , so the target goes to the beginning of all the other elements on the page.

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

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

To create an auxiliary level, IntroJs simply gets the height, width, top and left parts of the target element, and then creates a div with the introJs-helperLayer (and absolute position) and adds it to the body .

Conclusion

To focus on an element, IntroJs takes two steps, first creating an auxiliary layer (a rounded corner layer on the page), and then creating the contents of the relative element to bring it to all elements on the page.

+30
source

Good - pretty simple.

  • making an overlay div with a width / height of 100% with a z-index allows you to say 1000 - this is the main base with black opacity;
  • make another overlay that will highlight the specific “step” element with a z-index larger than the base overlay, say, 1001 is a “white” element with an explanation of the tooltip container;
  • finally, set the source element from the page to the position: relative and with the highest index z (1002) to be the highest.
+3
source

More articles:


All Articles