search

IGreatlyDislikeJavascript / bootstrap-tourist

Quick and easy way to build your product tours with Bootstrap Popovers for Bootstrap 3 and 4. Based on Bootstrap-Tour, but with many fixes and features added.
63 stars 36 forks source link

highlightOpacity on backdropOptions #39

Closed ibastevan closed 5 years ago

ibastevan commented 5 years ago

I noticed the highlight opacity only applies when you step from previous or next. If you apply the backdropOptions highlightOpacity on initial step or page reload, it doesn't apply the Opacity.

backdropOptions: {
                        highlightOpacity: 0.2
                    }
IGreatlyDislikeJavascript commented 5 years ago

That's odd, I can't reproduce that. These steps correctly set the opacity on the first step for me:

    var tourSteps = [
                    {
                        element: "#hrefIndex",
                        title: "Step 1",
                        content: "Opacity 0",
                        backdropOptions:    {
                                                highlightOpacity:           0
                                            }
                    },
                    {
                        element: "#hrefIndex",
                        title: "Step 2",
                        content: "Opacity 1",
                        backdropOptions:    {
                                                highlightOpacity:           1
                                            }
                    },
]

I can't see a bug in the code either, the flow is the same for first step/reloaded step and any subsequent step:

showStep() -> showStepHelper() -> _showPopoverAndOverlay() -> _updateBackdropElements() -> if backdrop not visible -> _showBackdrop() -> _showHighlightOverlay() -> $(DOMID_HIGHLIGHT).css(...opacity...)

ibastevan commented 5 years ago

That's strange, i did a fiddle and it seems to work ok - https://jsfiddle.net/a8x67z31/. But it doesn't work on my site. I will try and do some testing.

ibastevan commented 5 years ago

This is a bit strange. None of the backdrop options will work on a page load. For some reason it thinks every step of my tour is true for if(typeof step.backdropOptions.animation.highlightShow == "function") so, the highlight function in the "else" statement is invalid for my tour.

ibastevan commented 5 years ago

I can't reproduce the error in a fiddle. So i wonder if something is causing a conflict on my site. I will need to go through it all and figure this out. If you have any suggestions on where i should look that would be great, otherwise i will let you know how i get on with my debugging.

ibastevan commented 5 years ago

Ok so i found the issue. It seems to be my version of jQuery 2.1.4 is not compatible with tourist. If i upgrade to 3.3.1 it works just fine. My company is moving to bootstrap 4 next week so i guess i will just have to wait until then. Fiddle for my own reference (https://jsfiddle.net/Lg6k3e08/2/)

IGreatlyDislikeJavascript commented 5 years ago

Good to know jquery compatibility. Strange that it doesn't work on page load though, it's the same $.css() call. Maybe it's a jquery bug... Shall we close this or dig into it out of interest to find the cause?

ibastevan commented 5 years ago

I would like to say let's just go ahead and close this as i am now on 3.3.1. Only thing i can think of is if this issue is in jquery 1.12.4 because anyone using Wordpress will have this issue as Wordpress uses 1.12.4 and that wont be changing anytime soon.