-1

I cannot seem to get the number of the step on top of the highlighted area as expected. I have version 0.5 of both js and css.

enter image description here

Any idea of what the problem is afshinm??

THanks a lot!

Fernando C Martinelli
  • 91
  • 9
  • Well going on the information you gave us, it could be just about anything! – Paddyd Sep 03 '13 at 08:57
  • Sorry! If you click here you'll see the page live and be able to investigate the problem: [link](http://test.preplounge.com/en/dashboard.php?keyid=92b933b597fe397f8fc95beeddf44d47&user_id=4784) Thanks a lot! – Fernando C Martinelli Sep 03 '13 at 13:16
  • You should add the relevant code here, or else create a JSfiddle! – Paddyd Sep 03 '13 at 13:18
  • on JSfiddle it works. Somehow in our website it does not. So if someone would be willing to help they would have to take a quick look into our code on the link in my comment above. Sorry for that! – Fernando C Martinelli Sep 06 '13 at 12:42

1 Answers1

0

I have the same problem, but unfortunately I've been unable to find a clean solution. In my case I believe it has something to do with using bootstrap 2. I narrowed the cause down to stacking contexts and I tried playing around with opacity to fix it, which worked, but created more bugs - you can find more on the opacity fix here.

If you don't want to read all of that text - go through the parents of the element you are highlighting with intro.js and add "opacity: 0.99" and you might be lucky to fix the problem and not get hit with other problems.

However, if that is out of the question, then the solution I went with was to reposition the numbers via the intro.js onchange callback like so:

intro.onchange(function(targetElement) {
   $(".introjs-helperNumberLayer").css("top", "-32px");
   $(".introjs-helperNumberLayer").css("left", "-1px");
});

Thanks to this, the numbers are farther away from the contents and nothing overlaps anymore.

Protagonist
  • 492
  • 1
  • 6
  • 17