Comments (5)
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//issues/84.
from guiders-js.
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.
from guiders-js.
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.
from guiders-js.
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.
from guiders-js.
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"
from guiders-js.
Related Issues (20)
- README says "prev" but the special name value for a back button is "back" HOT 4
- Vertical positioning doesn't take margins into account
- z-index values are ridiculous HOT 1
- Buttons duplication when the tour run second time HOT 3
- Highlight does not work unless attachTo is specified HOT 2
- issue with dehighlightElement
- button onclick runs immediately HOT 1
- One help/tour link to rule all tabs HOT 1
- Responsive design improvement suggestion
- Wrapping onClose callbacks or having global events HOT 2
- Returning guider on next and prev methods HOT 1
- Add a changelog HOT 3
- Tag releases HOT 5
- Whenever something is loading, display the loading animation (non-priority)
- Unobtrusive Fork of Guiders.js HOT 4
- Events should be namespaced
- IE8/9 overlay set to absolute
- Arrows not shown under IE7 HOT 1
- Respond appropriately to screen edge HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from guiders-js.