Comments (43)
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:
- 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".
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
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.
Related Issues (20)
- SVGs for sprites?
- Using functions or helpers for target prop
- How to use this library using TypeScript in ng4? HOT 1
- How would I implement a way to cancel the tour if the user navigates away?
- Current step
- FeatureRequest: on-demand Tours
- Hopscotch with tabset
- Issue with going back between multi-site steps between pages
- nextOnTargetClick doesn't work while animating in.
- onStart and onEnd being executed as soon as I start the tour. HOT 1
- How to set up onNext function, when using a database to set up the steps properties? HOT 11
- How to create multiple tours on one page? HOT 5
- sprite-green and sprite-orange don't work HOT 2
- Is it possible to fixe the "popup" on not fixed target
- Customizable theme (background color and text color)
- Visibility for templating and `setRenderer` HOT 1
- Add multiple pages for tour?
- Why previous and Next button displayed after some delay in safari 12.1?
- hopscotch and iframes
- Addclass not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hopscotch.