Hello Elena,

Your plugin is awesome, simple to use and flexible, perfect for a hurry man like me.

Here is the problem I face with my own application : I have a webapp with a lot of HTML layers and positionning tricks so I guess the plugin may be a bit lost sometimes.
For some of my elements, the guide seems stuck to the top of my page, I'm nt really sure what's going on but like I said the application is very complex so figuring out absolute/relative positionning is a nightmare.

After searching a bit in the code I found that bottom position is not well managed

Inside function Guide.prototype._attachToElement the bottom is computed as

bottom: docHeight / 2 > elOffset.top ? 'auto' : elOffset.bottom

As the bottom property doesn't exist in the offset function, it should be

bottom: docHeight / 2 > elOffset.top ? 'auto' : this.$highlightedElement.outerHeight(true)

It is working for my app but I may be missing something from your code, so if you can have a look that would be great

Thx !

Hi, I've installed guides.js on my webpage https://24onoff.no/interaktiv-demo/ and it's working really well. However, I have one issue. I'm trying to trigger an event when the first demo ends with the .guides({end: }), but for some reason the event is triggered on declaration instead of when the guide ends.

I'm trying to set it up this way:

$(document).ready(function(){
      startGuide = $.guides({
         guides: [{
               html: 'Velkommen til en interaktiv demo av 24onoff. <br>Klikk for å starte!'
            }, {
                  element: $('.system-menu'),
                  html: 'Dette er navigasjonsmenyen som tar deg rundt i systemet. <br><span class="guide-next">Neste</span>',
                  color: '#fff'
            }, {
                  element: $('#log-hour'),
                  html: 'Du trykker på denne knappen for å føre timer. <br><br> La oss ta en titt på hvordan det gjøres.',
            }, {
                  end: onEndFunction()
            }]
      });
});

Is this an error on my end regarding implementation, or is this an error with the plugin?

For example :

step 1 --> step 2 --> step3( data loads after an ajax request) --> step 4.

can we delay step 3 to load?

Hey there, first of all awesome plugin!

Just found your plugin while trying to add a simple page guide and I found this weird behaviour. My page is 100vw x 100vh and I wanted to point a element that has bottom and right value equal to 32px. This is how it looks like:

Looking at the demo I found that you didn't have this issue, but is not a 100vw x 100vh page, so I thought in set the body height to 200vh and set the overflow to hidden on start and 100vh on end. And that solve the problem!

I don't know if its a expected behaviour or not, but maybe this can help someone