Guiders-JS
Guiders-JS copied to clipboard
pickhardt
Highlight does not work with divs
I'm using guiders with the highlight option. It appears to highlight input elements, but not divs. I've verified that it is applying the guiders_highlight class to the element. But it appears to not actually highlight anything.
Is there any way to get highlight to work with divs?
Highlight works by adding a class "guiders_highlight" to the div, giving it a higher z-index.
Have you tried a few things:
- ensuring your css file has a high z index for guiders_highlight? (It's set to 101 by default)
- check the position attribute of your div
If there is a bug, I suspect it is something along the lines of "the div is getting the guiders_highlight class, but the elements inside the div aren't benefitting from the higher z-index because the position attribute was left empty"
Jeff Pickhardt [email protected]
On Thu, Jan 17, 2013 at 6:48 PM, Douglas Tarr [email protected]:
I'm using guiders with the highlight option. It appears to highlight input elements, but not divs. I've verified that it is applying the guiders_highlight class to the element. But it appears to not actually highlight anything.
Is there any way to get highlight to work with divs?
— Reply to this email directly or view it on GitHubhttps://github.com/jeff-optimizely/Guiders-JS/issues/84.
I agree that there is a bug. I don't know exactly how to solve it, though. I've replicated it: perhaps your div doesn't have a background color? I've found that added a bg color helped me, when I replicated it.
Thanks @pickhardt. I ran into a similar issue when the div did not have a background color. Adding a background color makes the div look much better.
Also stumbled across that issue, setting a white background works fine for my case.
For a cleaner solution, you could lay a white highlighting-backdrop under the element to highlight, so that z-order(backdrop) < z-order(white background) < z-order(highlighted element), Tricky thing is to put the white background into the same position and size as the element.
Bootstrap-tour does this, see https://github.com/sorich87/bootstrap-tour for an example.
Sometimes it's just a z-index annoyance and changing the background color isn't enough. Make sure to set your highlighted element's position to "relative"
