I have an on boarding tour in at my.bonify.de. It offers a similar experience to introjs.
We implemented this in a very ugly way using a cutout div with a very large box-shadow. We would like to improve upon this and use an overlay like introjs since it seems to have much better performance than our dirty hack.
Having read this, I do not understand how introjs works since the element to be highlighted should definitely be in a lower stacking context.
I have tried replicating the behaviour with our own onboarding but I can not get the element in the page to rise above the overlay.
I would like to know how introjs achieves this, I thought that this block of code was the secret but when I put a debugger the class is not added.
Easy, you just put a relative element with higher z-index on top of a fixed element. Sample classes:
.fixed-elem {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
background: rgba(0,0,0,0.75);
}
.relative-elem {
position:relative;
z-index:10;
}
Here is a working fiddle:
https://jsfiddle.net/7ergcfvq/1/
Look at demo step 1 of intro.js, the <h1>Intro.js</h1> element has .introjs-relativePosition and .introjs-showElement, so it got position:relative and z-index:9999999!important.
And the <div class="intros-overlay">'s z-index 999999, smaller than <h1> & <div class="introjs-helperLayer">
Related
Ive added an animation in CSS, the idea is that when i hover over an image of food it shows me its details as shown:
but when i add a part of css animation code , the card's background becomes transparent.
if i remove the following code it shows the result as described in 1st image, writing this results in 2nd image
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:2400px;
display:block;
}
Rest of code is uploaded on Github
https://github.com/mareyam/Maryam-s-Restaurant
There is a problem with the z-index values, since your Restaurant component is not a children of your App component. The img components have a z-index of 999, that's why you can see the menu images. But the detail block below doesn't. You can solve it by adding the following CSS rule:
.container-fluid {
z-index: 4;
}
However I recommend avoid using too much z-index, it's very hard to maintain. Always try to solve that kind of issue with a proper nesting of your components.
this is the website I'm working on: http://labbrini.netsons.org and on its left side I have a div (#puntate) that should be on top of the javascript of the big lips logo (#logo) that shows up over everything. Of course I need the links of #puntate being clickable even when logo shows over it. z-index doesn't works for this. Can somebody help me with this positioning?
While inspecting your code in my browser, I saw that you were using px for z-index.
Dont give any units for z-index
In your CSS, replace,
z-index: 900px;
with
z-index: 900;
As, stated in the docs
The z-index property specifies the z-order of an element and its
descendants.
And, order doesnt have a unit. Thus no need for any units. Any element with a higher z-index will be on top of other elements.
Thank you all. The value to the z-index was my stupid mistake. But I needed to tinker a little bit more in order to get what I wanted. I created another div #left2
<div id="left"></div>
<div id="left2"><div id="puntate"><ahref="http://labbrini.netsons.org/Labbrinip1">
Labbrini p.1 - Lorem ipsum dolor sit amet</a><br/>
</div></div>
so that my div in question (#puntate) belongs to the new one and I set the background-color to transparent in order to see below the old one with the color transition:
#left2 {
background-color : transparent;
position:fixed;
display: table;
z-index:1000;
width:50%;
height:100%;
position:fixed;
bottom:0;
left:0;
}
and of course the z-index of #puntate is set to an higher value than #logo
I'm sorry for not having posted previously the code.
Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.
This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/
You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript
I am creating a small html file for myself just to try some new things. so far, I have a header, a background, and a center area for content. it is in the center and the position is set as fixed.
I want to make it so when someone scrolls down, the center area will move up. So there wont be large white-space at the top. Also, when they scroll up, so the center is near the top, it wont go over the header.
I"m sure this can be done with JavaScript. But, I'm not too sure how.
I'm sorry if this is unclear.
I recommend using jquery to accomplish this.
You can bind an event listener to the scroll event, the handler is passed an event object with all the information you need to achieve your desired result (scrolltop, pageX, pageY, etc....)
Once you have captured the scroll event, you can tell where the user scrolled to (how far down), and position your div accordingly.
http://api.jquery.com/scroll/
This could be achieved using javascript or Jquery (Jquery being the easiest of the two).
1.) Use arbitrary pixels to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > 120px)
{
....perform div transition...
}
}
OR
2.) Use the position of the target div to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
{
....perform div transition...
}
}
If you use the second solution, be sure that you call Jquery and this script after the DOM is loaded i.e. after </body>. Otherwise it won't be able to define the #TargetDiv.
This can be done without use of jquery or javascript, if you are looking to do what I think you are.
http://jsfiddle.net/wN8c8/
by setting your content to a fixed size and setting the content to overflow:auto;
likewise, you could also set your page background-attachment to fixed, and create the illusion that the text is 'appearing' without the page moving. You can certainly go more in-depth with it using scripting, but it really depends on your intention.
z-index will also allow you to build your page in layers, so that you can determine what shows and what is hidden behind other page elements.
body {
background-color:yellow;
}
#header{
position:fixed;
width: 100%;
height:20px;
background-color:red;
z-index:2;
}
#content{
position:fixed;
width:80%;
height:60%;
background-color:#ddd;
overflow:auto;
margin:0px 10%;
z-index:1;
}
<div id="header"></div>
<div id="content">
This is some content.<br/>
This is some content.<br/>
This is some content.<br/>
</div>
I'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the top menubar of wordpress once you are logged. You can add images/links on the left, on the right, or both sides.
The most javascript menus libraries that I've found are not as nice as this one, some of them only add buttons/link on one side or centered ...
See the attached image.
thanks
EDIT:
Bootstrap provides this functionality out of the box. Even if you don't need the entire Bootstrap framework, it's easy to separate what you need from the rest.
For a quick and simple sticky navigation bar (with none of the more involved extras, such as drop-down menus, etc.), you can use the following CSS:
#bar {
position:fixed;
top:0;
left:0;
right:0;
height:36px;
background: black;
}
... and then add whatever you need to it, e.g.
<div id=bar>
<img class=bar-left src=logo.png />
<div class=bar-right>Login button!</div>
</div>
and the CSS:
.bar-left {
float:left;
}
.bar-right {
float:right;
}
This works well enough. As for jQuery, you could use it to dynamically add elements to the navbar with its .append() and .prepend() methods.