im using introjs, but I have a problem in somes pages of the website. I have a popup that appears in front of the page, however when I call the intro and point to elements in the popup, the images in the background appear above the popup (see image), without the intro the popup appears fine. And in other pages I do the same but all works good
the css of my popup is like this:
#popup_modal {
/* position: fixed; */
position: absolute !important;
height: 100%;
top: 50px;
width: 98%;
left: 1%;
z-index: 99999999;
overflow: hidden;
}
#popup {
padding: 20px;
border: 1px solid #007793;
width: 470px !important;
min-height: 162px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: #F6F6F6;
border-radius: 4px;
box-shadow: 5px 5px 20px #666;
}
EDIT:
#popup_modal {
/* position: fixed; */
position: absolute !important;
height: 100%;
top: 50px;
width: 98%;
left: 1%;
z-index: 9999 !important;
overflow: hidden;
}
#popup {
padding: 20px;
border: 1px solid #007793;
width: 470px !important;
min-height: 162px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: #F6F6F6;
border-radius: 4px;
box-shadow: 5px 5px 20px #666;
}
Introjs css:
.introjs-helperLayer {
position: absolute;
z-index: 9999998;
background-color: #FFF;
background-color: rgba(255,255,255,.9);
border: 1px solid #777;
border: 1px solid rgba(0,0,0,.5);
border-radius: 4px;
box-shadow: 0 2px 15px rgba(0,0,0,.4);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Try adding a position: relative to the CSS for #popup to force layering to be calculated:
#popup {
padding: 20px;
border: 1px solid #007793;
width: 470px !important;
min-height: 162px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: #F6F6F6;
border-radius: 4px;
box-shadow: 5px 5px 20px #666;
z-index: 999999999;
position: relative; // Default value is "static" but "relative" will cause layering to occur
}
Z-index values are usually ignored in statically-positioned elements, causing weird layering when you have other elements that use different types of positioning.
In my case I had this
After adding inline style in li element of sidebar (style="background-color:#347D87!important;") and adding property 'position:absolute' of class 'introjs-fixedTooltip' in original introjs.css file IT worked!!!
I have spent more than 10 hours with this issue I couldnt find better solution.
Updated:
https://github.com/usablica/intro.js/issues/532
just use this css :
.introjs-fixParent {
position: absolute !important;
}
introjs-fixPrent is placed on top parent of that element so and please use setTimeOut function to move on steps.
Related
My css transition doesn't work. I cannot figure out what the problem is. I am adding the class using JavaScript. The element is not changing display. Here is my code and the link to my codepen. I am trying to make a simple modal for a tic tac toe game. Thanks for any help!
.back {
margin-top: 200px;
}
.box {
display: inline-block;
vertical-align:top;
background: lightgray;
width: 120px;
height: 120px;
margin: 2px 0 2px 0;
border-radius: 20px;
}
h1 {
margin-top: 30px;
font-weight: bold;
font-size: 4em;
}
.popup {
font-family: 'Signika', 'sans-serif';
margin: 200px auto 0 auto;
width: 700px;
height: 270px;
background: skyblue;
border: 6px solid #8dadc3;
box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9);
border-radius: 40px;
position: relative;
z-index: 1;
visibility: visible;
opacity: 1;
transition: all 5s;
}
.popup h4 {
padding-top: 60px;
font-weight: bold;
font-size: 3em;
left: 10%;
position: absolute;
}
.x {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 40%;
}
.o {
margin-top: 130px;
position: absolute;
border: 4px solid #8dadc3;
left: 50%;
}
.popup.hide {
opacity: 0;
visibility: hidden;
}
This is my JavaScript:
$(document).ready(function(){
var chosen;
$('.player').on("click", function(e){
if($(this).hasClass("x")){
console.log("X");
chosen = "X"
} else {
console.log("O");
chosen = "O";
}
$('.popup').addClass('hide');
});
});
link to codepen:
Direct link to code
The problem is you are using the CSS class hide and Bootstrap is set up to apply display: none !important; to that:
https://github.com/twbs/bootstrap/blob/v3.3.6/dist/css/bootstrap.css#L6528-L6530
Change the class name in both the CSS and JavaScript and it will work.
The only problem I've found in your example was typo in class name.
In your JavaScript your are adding .hiding class, but the class is called .hidi . After changing it to .hiding, everything seems to work.
I have a right sidebar.I'm using font awesome angle-left icon to show/hide the sidebar. On click of toggle button side bar pushes the content towards left along with the button & then button(font awesome left-angle) rotates 180 degrees to become (font awesome right-angle) as an animation. It is working fine till here. But when i scroll the page the toggle button is also getting scrolled vertically.
Here I don't want toggle button getting scrolled vertically every time.
I hv tried position: fixed in css by which vertical scrolling is stopped but the sidebar is not pushing the toggle button horizontally. The side bar is getting overlapped on the toggle button (only in firefox).
In chrome its working fine.The vertical scrolling is stopped & the sidebar is pushing the content to left side, but this is not happening in firefox.
css:
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-ms-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background-color: rgba(0, 0, 0, 0.3);
width: 240px;
height: 100%;
}
.content {
width: 100%;
height: 100%;
padding: 10px;
position: relative;
padding-left: 50px;
}
.content #sidebar-toggle {
background: transparent;
color: white;
opacity: 0.5;
border-radius: 1px;
display: block;
position: relative;
padding: 30px 7px;
float: right;
}
.padtop {
line-height: 600px;
color: white;
opacity: 0.5;
position: fixed;
}
.rotate {
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.rotate.side {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
html:
<div class="container">
<div class="col-sm-1">
<a href="#" data-toggle=".container" id="sidebar-toggle">
<i class="fa fa-angle-double-left fa-5x padtop rotate"></i></a>
</div>
</div>
Here is my o/p:
o/p in Firefox
o/p in Chrome
description and example demo for toggle effect..
Demo
HTML
<div class="toggle-button">
<button></button>
</div>
CSS
.toggle-button { background-color: white; margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button button { cursor: pointer; outline: 0; display:block; position: absolute; left: 0; top: 0; border-radius: 100%; width: 30px; height: 30px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: #83B152; border: 2px solid #7DA652; }
.toggle-button-selected button { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }
Javascript
$(document).on('click', '.toggle-button', function() {
$(this).toggleClass('toggle-button-selected');
});
I would like to increase jQuery mobile slider's handle clickable area. As of now, the handle's clickable area is small. so, I am unable to tap and change the range of the handle everytime. I want to have the handle size to be the same but increase the clickable area. My custom CSS is as follows.
.ui-slider-track .ui-btn.ui-slider-handle {
width: 12px;
height: 12px;
margin: -10px 0 0 -10px;
background-color:#0096E2;
padding: 5px;
border-color: #0096E2;
}
div {
position: relative;
width: 100px;
height: 100px;
border: 1px dashed #eee;
cursor: pointer;
transition: background-color 1.5s;
}
div::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: rgb(188,20,20);
border-radius: 2px;
}
div:hover {
background-color: #FFFFDF;
}
<div></div>
So I'm trying to do this typography transformation. I have the letter in all white. When I hover the mouse on top, the top half of the letter should flip down exposing a different color. The problem is that it's flipping down the wrong div.
tback is the lower part of letter A.
tfront is the upper part of letter A.
HTML code:
<div id="letter-container" class="letter-container">
<h2><a href="#">
<div class="twrap">
<div class="tup">
<div class="tback"><span>A</span></div>
<div class="tfront"><span>A</span></div>
</div>
<div class="tbg"><span>A</span></div>
<div class="tdown"><span>A</span></div>
</div></a></h2>
</div>
HERE IS THE CSS:
.letter-container h2 .twrap{
position: relative;
display: inline-block;
width: 100px;
height: 120px;
line-height: 120px;
font-size: 120px;
box-shadow: 1px 1px 4px #000;
}
.letter-container h2 .tbg{
background: #121212;
position: absolute;
color: #f2c200;
width: 100%;
height: 100%;
z-index: -10;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tdown{
height: 50%;
top: 50%;
width: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
background: #151515;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
display: block;
margin-top:-60px;
}
.letter-container h2 .tup{
height: 50%;
width: 100%;
position: absolute;
z-index: 10;
-webkit-transform-origin: 50% 100%;
transition: all 0.3s linear;
color: white;
box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
}
/*Drop down part*/
.letter-container h2 .tup .tback{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
overflow: hidden;
background: #151515;
color: #f2c200;
}
.letter-container h2 .tup .tdown{
background: red;
color: red;
}
.letter-container h2 .tup .tback{
-webkit-transform: rotateX(180deg);
}
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(180deg);
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/g4zja/
Not sure what exactly is the desired effect. Maybe this?
fiddle
.letter-container h2 a .twrap:hover .tup {
-webkit-transform: rotateX(90deg);
}
so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.