Comments (7)
chawkichalladia
commented on May 29, 2024
did you find a solution to this ?
from driver.js.
jacob-js
commented on May 29, 2024
did you find a solution to this ?
A solution to this is to always initialize the driver inside the eventListener callback.
Instead of this:
const driver1 = driver({
steps: [
{
element: '#counter',
popover: {
title: "Welcome to the tour",
description: "Welcome to the tour",
align: 'end',
side: 'bottom'
}
},
{
element: '.icon-toggle-right',
popover: {
title: "Welcome to the second tour",
description: "Holla la tour",
align: 'end',
side: 'left'
}
}
]
});
const driver2 = driver({
overlayColor: 'yellow',
overlayOpacity: 0.2,
steps: [
{
element: "#vite-logo",
popover: {
title: "Here is Vite",
description: "A tool for building web applications",
}
},
{
element: ".vanilla",
popover: {
title: "Here is JavaScript",
description: "A programming language for the web",
}
}
]
});
document.querySelector('#tour').addEventListener('click', () => {
driver2.drive();
});
driver1.drive();Do this:
const driver1 = driver({
steps: [
{
element: '#counter',
popover: {
title: "Welcome to the tour",
description: "Welcome to the tour",
align: 'end',
side: 'bottom'
}
},
{
element: '.icon-toggle-right',
popover: {
title: "Welcome to the second tour",
description: "Holla la tour",
align: 'end',
side: 'left'
}
}
]
});
document.querySelector('#tour').addEventListener('click', () => {
const driver2 = driver({
overlayColor: 'yellow',
overlayOpacity: 0.2,
steps: [
{
element: "#vite-logo",
popover: {
title: "Here is Vite",
description: "A tool for building web applications",
}
},
{
element: ".vanilla",
popover: {
title: "Here is JavaScript",
description: "A programming language for the web",
}
}
]
});
driver2.drive();
});
driver1.drive();This way the driver2 object doesn't overwrite the first one. I think this is worth mentioning somewhere in the documentation.
from driver.js.
chawkichalladia
commented on May 29, 2024
I actually used the setConfig instead of initializing a new driver. I had a global driver and a bunch of configs that I set whenever I need them.
from driver.js.
jacob-js
commented on May 29, 2024
I actually used the
setConfiginstead of initializing a new driver. I had a global driver and a bunch of configs that I set whenever I need them.
Do you get the ability to call driver's methods individually(per config)?
from driver.js.
chawkichalladia
commented on May 29, 2024
Do you get the ability to call driver's methods individually(per config)?
I'm not following. I just call the functions from the driver() instance after I set the config. so far I haven't faced any issues with that. is this what you meant ?
from driver.js.
jacob-js
commented on May 29, 2024
Do you get the ability to call driver's methods individually(per config)?
I'm not following. I just call the functions from the
driver()instance after I set the config. so far I haven't faced any issues with that. is this what you meant ?
Oh I see, by invoking the functions from driver() after setting the config, the newly set configuration takes precedence over the previous ones. Then what you're suggesting is an alternative way to achieve the desired result.
from driver.js.
chawkichalladia
commented on May 29, 2024
what I suggested was the only way I found that worked for my situation. but depending on the use case, it can be an alternate implementation.
from driver.js.
Related Issues (20)
- Add onOverlayClicked callback
- Can ‘getConfig("animate")’ be replaced with ‘isAnimatedTour’ ？
- Can ‘getConfig("animate")’ be replaced with ‘isAnimatedTour’ ？
- Is there a way to make the overlay mask fixed to an element area instead of the entire body? HOT 1
- (Re) Support the feature to move next on click outside the element
- Can the position of a popover be fixed?
- Can this work with Canvas elements? HOT 2
- How can I make the popup display while the project can be clicked normally?
- How can I customize a popover and button using MUI?
- Step positions are erratic HOT 1
- Missing data
- [Suggestion] Add disableActiveInteraction to Drive Step Configuration.
- Skip step for missing element
- [Feature Request] Expose step index in DOM HOT 1
- Hide "previous" button on step 1 HOT 1
- [Bug] Methods hasNextStep and hasPreviousStep do not return boolean HOT 1
- [Feature Request] Lifecycle events HOT 1
- aria-controls attribute removed during runtime. HOT 3
- Highlight element in parent window from iframe HOT 1
- Missing close button in Popover example & personal project
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 driver.js.