hopscotch highlight current element

How about the option to highlight the current element by graying out the rest of the page? This is what Intro.js does: http://usablica.github.io/intro.js/

Aug 17 '13 19:08 drewda

I agree, it is very useful to make everything black and make it highlight te focused object.

Aug 23 '13 16:08 lacivert

+1 for that feature.

Sep 09 '13 14:09 gnatok

I made a small hack for overlay effect: http://jsfiddle.net/8sbDa/2/

But now I see two problems:

To highlight current element I need to have current element. I didn't found how to get it :(
It is just hack. Really need some "native solution".

Sep 09 '13 15:09 gnatok

@gnatok , yes, and it isn't the element we want to highlight. Your solution doesn't help for me unfortunately.

Sep 10 '13 05:09 lacivert

@lacivert new version works good. But, again, is not native solution

http://jsfiddle.net/8sbDa/10/

Sep 10 '13 09:09 gnatok

No, I think not only bubble should highlight, "Click me" element should be highlighted if we are talking about the way of intro.js http://usablica.github.io/intro.js/ . Do I think wrong?

Sep 10 '13 13:09 lacivert

This feature would be very nice indeed, as the highlighting makes the whole tour experience more engaging!

Sep 10 '13 16:09 cilia

+1 for this addition - a very important feature in a tour!

Dec 05 '13 18:12 maxms

+1

Dec 16 '13 20:12 devinfd

+1

Mar 14 '14 01:03 justinkwanlee

Here is a jsfiddle showing it in action... I didn't get all of the original demo styles in there (bootstrap etc), but it's at least working. Notice steps 3-5:

http://jsfiddle.net/plainkeyman/JZqWF/

On my local version, I changed the window resize timeout to 20ms instead of 100ms -- resizing the window was too clunky without it:

    setTimeout(function() {
      self.setPosition(self.currStep);
      resizeCooldown = false;
    }, 20);

Apr 03 '14 02:04 plainkeyman

Actually - this breaks down when the screen width is really small. I'm making a fix for this... using the document width rather than the viewport width to calculate. See this revision:

http://jsfiddle.net/plainkeyman/JZqWF/1/

The project that I'm working on is calling for a box shadow around the 'highlighted' section.. however it would not allow any interaction with the content since it would be a div over the top. Don't know if that would be of any value.

Apr 03 '14 18:04 plainkeyman

+1 for this feature. It will do the justice to the tour as it removes the distraction on the page.

Sep 03 '14 14:09 jpatel3

The hack works, but it's not clean when the element you want to highlight has rounded borders (the color which is not the same as the background color).