jr_overlay present on top of document after reload

[marcin-ciesla]

Hello Ahmed!

Great work with this code is is really something to admire!

However I found some inconvenience with using it in angular app.

1. jr_overlay does not dissapears from page after joyride ends.
2. same situation with page reload (I have cookie to check if tour was performed) jr_overlay shows itself (transparent but still) even if joyride is not fired. as result of those 2 page is 'unclickable' since there is overlay on top of it.

My current workaround was to edit css and set initial value of display:none in .jr_overlay class and in application to hook to onStart() and onFinish() to show/hide this div.

[ahmed-wagdi]

Hey papugoz,

I want to help you out but i'm gonna need some more details like :

1. what are the angular and ng-animate versions you're using?
2. are you using the latest version of the joyride directive?
3. how exactly are you using the cookie to manipulate the joyride?

Right now the overlay is never really removed it's just set to display none/block depending on the joyride state. If the overlay isn't set to false then a jr_overlay_show class is added when joyride is started and removed when it ends. The display property is just toggled depending on that class.

The fastest way to solve this is to recreate this problem on jsfiddle or plunker and share it here so that i can actually see it. Right now i can't seem to recreate this on my end so it's a bit difficult to figure out the problem.

[fadiquader]

such as my problem anyway, thank you ahmed, you saved my life. i solved this problem by using ugly method :D

.jr_overlay{ height:0; } var myEl = angular.element( document.querySelector( '.jr_overlay' ) );

    var joyride = joyrideService;
    joyride.start = true;
    joyride.config = {
           overlay: true,
            onStepChange: function(){ },
            onStart: function(){
                myEl.css({
                    "height":'100%'
                });
            },
            onFinish: function(){
                myEl.css({
                    "height":'0'
                });
            }

[marcin-ciesla]

@ahmed-wagdi

1. I'm using angular and ng-animate 1.5.8.
2. Yes, I'm using it
3. I'm just doing simple check before firing joyride, nothing special.

In my situation .jr_overlay sets it's opacity to 0 but still is on top of page. I'll try to recreate it latrer.

@fadiquader This is similiar to my approach but I just edited .css file instead of doing it in js and I'm operating on display property because I feel it less messy 😄

[fadiquader]

@papugoz you are right, it was a fast solution but not working with multi pages, so i edited css, and i came here again to edit my comment. thank you

[ahmed-wagdi]

@papugoz @fadiquader I'm glad that you worked it out but could you help me recreate this problem? If you're both getting the same problem then there's obviously something wrong with the directive and i'd rather get it fixed so that no one else runs into the same problem.

If you can't recreate it on plunker then could you take a look at the body and let me know if the jr_overlay_show class gets added/removed correctly? Also a screenshot of the overlay's css styles (when it's showing up unexpectedly) in the inspector would be helpful.

[marcin-ciesla]

@ahmed-wagdi Plunker for you

[ahmed-wagdi]

ok i see what the problem is, silly mistake on my part. Made some changes to how overlay works but didn't compile the sass.

Fixed now, sorry for the trouble 😄 .