Comments (19)
using z-index in css does not resolve the problem.
from angular-intro.js.
I tried setting overlayOpacity: 0, but that doesn't work either.
IF I could get the overlayOpacity option to work, what would be a valid range of numbers [0 -100]? [0.0-1.0]?
from angular-intro.js.
I foud out the range is [0.0-1.0], but that doesn't affect the whited out content, just the darkened rest of the screen.
from angular-intro.js.
After opening app > bower_components > intro.js > introjs.css, I was able to toy around with the z-index and transparency for the .introjs-helpLayer and .introjs-overlay css classes.
However, I can't exactly match the content brightness in the plunker example. Any ideas?
It appears that I have to overlay my content with a white emphasis block (.introjs-helperLayer), but I have to make the white at just the right level of transparency so that the content is visible. However I set it, the overlay darkens the content I'm trying to emphasize... so My site is kind of in an odd state at the moment. I would really appreciate any help on this!
Cheers!
from angular-intro.js.
Is there a set of preferred z-index settings to get the same output as the plunker demo?
from angular-intro.js.
I think the site linked below demonstrates the issue I'm currently having (Even if it is another angular open source's demo).
http://dutchcoders.github.io/angular-tour/
from angular-intro.js.
I ran into the same problem. This is most likely a stacking-context issue.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
I didn't write the plugin, but I'm pretty sure for it to work properly the element being highlighted needs to be in the same stacking context as the transparent background. Otherwise the transparent background sits above the thing being highlighted and the opacity is applied. It looks like the plugin does some work to try and erase other stacking contexts; specifically it adds this rule:
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
}
However, there are other ways to create stacking contexts (e.g. applying a transform rule).
I forked the default plunker and added a transform, you can see it here: http://plnkr.co/edit/VFmvq7Q2ox4xe8BU0zeg?p=preview
Click the demo button and I'm pretty sure you'll see the effect you're describing. The only difference between my plunker and the official is this extra css rule:
.jumbotron {
transform: translateX(0%);
}
Hope that helps!
EDIT: Note that this is definitely an issue in the underlying intro.js plugin; I don't think it has anything to do with the angular wrapper.
from angular-intro.js.
I have made these layers the same, but it did not resolve the issue. I've
been toying with this all day and am no closer than before. Despite how I
set the z-index, the content highlighted by intro.js still has a z-index=0,
but so does everything else on the page, so it either highlights
everything, is buried under the other contents of the page, or completely
censors out the content that I wish to highlight. :( le sigh
On Tue, Nov 4, 2014 at 3:47 PM, Ian McDowell [email protected]
wrote:
I ran into the same problem. This is most likely a stacking-context issue.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
I didn't write the plugin, but I'm pretty sure for it to work properly the
element being highlighted needs to be in the same stacking context as the
transparent background. Otherwise the transparent background sits above the
thing being highlighted and the opacity is applied. It looks like the
plugin does some work to try and erase other stacking contexts;
specifically it adds this rule:
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
}However, there are other ways to create stacking contexts (e.g. applying a
transform rule).
I forked the default plunker and added a transform, you can see it here:
http://plnkr.co/edit/VFmvq7Q2ox4xe8BU0zeg?p=previewClick the demo button and I'm pretty sure you'll see the effect you're
describing. The only difference between my plunker and the official is this
extra css rule:.jumbotron {
transform: translateX(0%);
}Hope that helps!
—
Reply to this email directly or view it on GitHub
#33 (comment)
.
from angular-intro.js.
To clarify, z-index is relative to stacking context, there's no such thing as an absolute z-index. So you could have element 1 with a z-index: 100000, and element 2 with a z-index: 1, but element 2 can show on top. This happens when element 2 is on a stacking context that sits on top of the stacking context of element 1. I made the simplest plunker I could think of to show this: http://plnkr.co/edit/qjGGMBtRhADGCRsEixW1?p=preview
from angular-intro.js.
Hi all, I had same issue. The problem was I was applying background color to parent element. After I applied background color to the element this issue was resolve.. Please correct me if I'm wrong..
from angular-intro.js.
Same as here, did you guys solve this problem?
from angular-intro.js.
I am having the same issue, is there a status update on this?
from angular-intro.js.
+1
this is pretty bad sometimes. will this get fixed? or anyone got a solution?
from angular-intro.js.
@chino23 I ended up using other intro plugin :(
from angular-intro.js.
@lfreneda which one?
from angular-intro.js.
@chino23 > https://github.com/xbsoftware/enjoyhint
from angular-intro.js.
Thanks!
from angular-intro.js.
I have been experimenting with this directive and was seeing the same issue.
On a parent, of the tour element that was showing the problem, I have this css declaration:
-webkit-transform-style: preserve-3d;
That declaration helps with some transition effects that are applied to other children.
To fix the issue, I updated the introjs.css to be:
.introjs-fixParent {
z-index: auto !important;
opacity: 1.0 !important;
-moz-transform-style: inherit !important;
-webkit-transform-style: inherit !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
so removing the child 3d space that the transform-style created fixed the issue.
Hope this helps others.
from angular-intro.js.
@Shawful
I'm with the same mistake
is overlapping
some help ?
from angular-intro.js.
Related Issues (20)
- Angular Example Problem HOT 1
- Append tour html to DOM element different than body.
- 1st time I am not able to load modal ui proper
- Change state and URL without closing Intro
- Commercial use? HOT 2
- Angular 1.6.9 HOT 1
- Can we get rid of bower? It's 2018 HOT 3
- Issue with loading from webpack
- Question: Install warnings and how to build the intro.js
- Sample code for using hints
- How to call anther tour after completing first tour
- Purchase license for commercial use? HOT 2
- Intro.js v2.9.3, onExit duplicate calls
- How to use with Typescript in Angularjs?
- How include in webpack?
- introJs is not a function using webpack
- Add new custom button
- IntroJs helper is black on ios HOT 1
- Intro.js not working with jquerymodal
- IntroJS element selection does not work with angular components
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 angular-intro.js.