Comments (10)
@joshberg Hello, we are not able to reproduce this issue with older version of sweetAlert v6 as the documentation for this version isnβt available public.
Any chance you could share documentation of test environment to investigate this issue?
from guidechimp.
Sorry about that. I do have a work around that is working for me. I modified the css line on GuideChimp from fixed to absolute:
.gc .gc-fixed{
position: absolute;
}
Granted it is not the best solution because I don't know what else will break, it is at least a workable solution so that I can move forward. Here is the CSS for that version of sweetalert2. Thank you for your help.
sweetalert2.zip
from guidechimp.
I attempted both of those... They did not work for me. I ended up doing this.
let guide = GuideChimp(tour);
let removedFixedInterval;
guide.on('onStart', function(){
removedFixedInterval = setInterval(function(){
$('.gc-control').removeClass('gc-fixed');
}, 500);
});
guide.on('onStop|onComplete', function(){
clearInterval(removedFixedInterval);
});
guide.start();
Still not the best, but visually it looks good and it does not modify the libraries at all. I'll consider this issue closed as we exhausted all avenues and I am content with my solution. Thank you for all your help!
from guidechimp.
Hello @joshberg , can you tell me which version of GuideChimp and sweetAlert2 you are using?
No issues were found on Guidechimp v. 4.0 and sweetAlert2 v. 11.
Here is my code:
const tour = [{
element: '#example',
title: 'Title',
description: 'Lorem ipsum...'
}];
const guide = GuideChimp(tour, { position: 'right' });
Swal.fire({
title: 'It is example!',
html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
icon: 'info',
confirmButtonText: 'Cool',
didOpen() {
guide.start();
},
})
And this result I have:
from guidechimp.
I am using GuideChimp 4.0 and SweetAlert2 6.4.2. Unfortunately there are a lot of breaking changes that keep us from updating to the latest version of SweetAlert2.
Here is my snippet that is responsible. The tour starts before the SweetAlert2 is displayed which is why I am using the lazy load plugin.
var tour = [];
tour.push({
element: '#category-fav',
title: 'Step 1: Deleting a Favorite',
description: 'Open the Favorites category.',
triggers: {
next: {
element: '#category-fav'
}
}
});
tour.push({
element: '#dft-issues',
title: 'Step 2: Deleting a Favorite',
description: 'Click and hold on the defect you would like to remove from favorites.',
triggers: {
next: {
element: '#dft-issues'
}
}
});
tour.push({
element: '#modalContentId',
title: 'Step 3: Deleting a Favorite',
description: 'Click on the box or the words "Add (defect) to favorites" to uncheck the box.',
triggers: {
next: {
element: '#addDefectToFavorites'
}
}
});
tour.push({
element: 'swal2-confirm',
title: 'Step 4: Deleting a Favorite',
description: 'Click on Save Changes to save. Discard changes to cancel.',
triggers: {
next: {
element: '.swal2-confirm'
}
}
});
GuideChimp(tour).start();
from guidechimp.
I can give the sweetalert2 files that we have in the project. I cannot release the other parts. Basically, I have list of divs contained in a div. When the user clicks on a specific div called out in the tour, it opens up a list of more divs (i.e. their favorites). The user performs an action on their favorites (long click) and a swal opens. The tour steps should display on their but they do not.
sweetalert2.zip
Intersting discovery, unchecking this css or setting it to absolute seems to fix the issue for me.
.gc .gc-fixed{
position:fixed;
}
from guidechimp.
@joshberg I didn't find the css file in your zip archive. Is this a public website? Could you provide us the link here or via email at [email protected]
I was able to get guidechimp to highlight the element correctly using setTimeout, this is not a GuideChimp problem, it is a sweetalert v6 problem because sweetalert does the onOpen function before the bounce animation finishes.
const tour = [{
element: '#example',
title: 'Title',
description: 'Lorem ipsum...'
}];
const guide = GuideChimp(tour, { position: 'right' });
swal({
title: 'It is example!',
html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
confirmButtonText: 'Cool',
onOpen() {
setTimeout(() => {
guide.start();
}, 300);
}
});
from guidechimp.
@joshberg I do not recommend that you change the styles of this class, otherwise the tour display may contain issues in some cases, I think you should pay attention to the sweetalert animation and start the tour after any animations.
I haven't got any issues with sweetalert v6 with the js and css you gave me:
// it is my code
const tour = [{
element: '#example',
title: 'Title',
description: 'Lorem ipsum...'
}];
const guide = GuideChimp(tour, { position: 'bottom' });
swal({
title: 'It is example!',
html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
icon: 'info',
confirmButtonText: 'Cool',
onOpen() {
setTimeout(() => {
guide.start();
}, 300);
}
});
from guidechimp.
Unfortunately the sweet alert opens after the tour is going. It is part of the sequence... Is there a way to force the tour step to redraw or delay the drawing? I could perhaps call the step to redraw after the alert is opened.
from guidechimp.
You can use the onBeforeChange event listener to delay the step:
const tour = [
{
element: '#example',
title: 'Title',
description: 'Lorem ipsum...',
onBeforeChange() {
return new Promise((s) => {
// delay of 500 ms
setTimeout(() => {
s();
}, 500);
});
}
},
];
or if you want to redraw, use the "refresh" function:
swal({
title: 'It is example!',
html: '<span id="example" style="color: red">This element needs to be highlighted</span>',
icon: 'info',
confirmButtonText: 'Cool',
onOpen() {
// refresh highlighting and position
guide.refresh();
}
});
from guidechimp.
Related Issues (20)
- Request to add below mentioned features
- Guidechimp can't be imported from skypack
- Error with VueRoute when jump to other route/page HOT 9
- Contitional move to the next step HOT 1
- Problem with selected/highlighted element HOT 17
- No progress bar is displayed HOT 1
- Licensing works on localhost with HTTP/HTTPS but will not work on server using HTTP HOT 2
- Labs64 contact us form HOT 2
- Do not break tour on clicks within current box HOT 2
- Enlarge the highlighted zone HOT 2
- How can I bind the guidechimp refrence to custom button onClick event HOT 1
- Guidechimp attribution issue. HOT 5
- How can I get the context that I send on moving next step HOT 1
- Interaction with highlighted element is not working in angular 7 HOT 7
- Remove blinking animation when moving a step with an element to a step without an element HOT 1
- Offline Licensing
- Custom buttons based on 'a' tag not showing up HOT 1
- HTML step configuration data-guidechimp-interaction boolean value does not work HOT 2
- Migrate GuideChimp chrome extension
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 guidechimp.