highlight current element about hopscotch HOT 43 OPEN

It can be done in combination with Focusable

var tour = { id: "hello-hopscotch", steps: [ { title: "Ayuda", content: "Algunos módulos tienen un panel de ayuda como este. Haz clic en el título para desplegar mas información.", target: "accordionAdyuda", placement: "bottom", onShow: function() { Focusable.setFocus($('#accordionAdyuda')); } } ], onStart: function() { Focusable.hide(); }, onEnd: function() { Focusable.hide(); }, onClose: function() { Focusable.hide(); } }; hopscotch.startTour(tour);

from hopscotch.

If I had a real need to do this, I'd implement own custom highlighting/focus/dim solution and integrate it with hopscotch. This framework is not going to evolve.
Using onNext, onEnd one can get access to currently processing elements (to focus on)

That's exactly what I'm doing now. After hours spent on this repo I started to implement the feature by myself.

UPD: used Domlight + hopscotch.listen('show', ()=>{}) to highlight target defined in tour step.

from hopscotch.

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

from hopscotch.

For all those looking for this feature, you can achieve it very easily by using the callback's to trigger a class or whatever action you require. Just create a absolute div with minor opacity/correct z-index' and your good to go.

from hopscotch.

If I had a real need to do this, I'd implement own custom highlighting/focus/dim solution and integrate it with hopscotch. This framework is not going to evolve.
Using onNext, onEnd one can get access to currently processing elements (to focus on)

from hopscotch.

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

from hopscotch.

+1 for that feature.

from hopscotch.

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

But now I see two problems:

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

from hopscotch.

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

from hopscotch.

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

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

from hopscotch.

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?

from hopscotch.

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

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

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);

from hopscotch.

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.

from hopscotch.

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

from hopscotch.

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).

from hopscotch.

+1 for this feature. Great plugin.

from hopscotch.

any update on this enhancement ?

from hopscotch.

Getting error:
TypeError: el is null
if (el.addEventListener) {

What can be the issue? I replaced JS and CSS with JSFiddle code.

from hopscotch.

Sorry - I've been swamped and haven't been able to get back to it.

@gr1g you are right - that would be nice to update.
@ajinkyagadewar if I have time I will look into it.

from hopscotch.

We are waiting for this feature I see :)
I hope .

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

• 1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

This is such a highly requested feature, this should be our proof-of-concept for plugin support, IMO.

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

I have add the possibility to highlight the target element

See my PR :
#332

Inspired by intro.js and @plainkeyman

Add an overlay feature (overlay + mask) as intro.js

And add ability to :

• allow click on element under mask
• don't allow click on element under mask
• add a specific click handler on mask
• override backgroud mask color
• add a specifik mask clas

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

+1

from hopscotch.

Is it possible to use focusable for this? Focusable can only focus on a single element. If you focus on the control, the bubble will look dimmed.

I saw the PR from @Akta3d , it looks awesome but the devs discarded it because is belongs to a plugin infrastructure that does not exist after a year. Any way we can help?

from hopscotch.

For all those looking for this feature, you can achieve it very easily by using the callback's to trigger a class or whatever action you require. Just create a absolute div with minor opacity/correct z-index' and your good to go.

How would you deal with elements that aren't positioned explicitly? Increasing z-index will not affect them, and simply speaking such elements will stay behind the div with minor opacity.

from hopscotch.