I have been running into some weird issues with will-change: transform while I add this property to the img and div tags. Basically, I have a div as a container that contains an img element as its child and I am scrolling through these images in webkit. Adding will-change-tranform greatly improves the scrolling performance, but as you scroll you intermittently see images disappear(or hidden). Any answers to fix this problem would be great as I have exhausted most of the solutions I have tried from online resources.
I am attaching the code snippet for the CSS:
".cell" and ".pagNum" are class name attributes for the div.
".pageNum" is a page number div on top of the img div(.cell). ".cell" div contains the img element.
img {
position: relative;
-webkit-user-drag: none;
will-change: transform;
}
.cell {
position: absolute;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
will-change: transform;
}
.pageNum {
display: inline-block;
position: absolute;
top: 273px;
background-position: center;
text-align: center;
line-height: 36px;
min-width: 36px;
padding-left: 6px;
padding-right: 6px;
-webkit-border-radius: 3px;
background-color: rgba(0, 0, 0, .50);
color: white;
font-size: medium;
font-weight: bold;
text-shadow: 0px 1px 0px #000000;
left: 50%;
margin: 0px 0 0 -32px;
will-change: transform;
}
Related
By default, the handles in React rc-slider are translated by -50% and their style is that the handle overlaps the rail,
but I need the handles to be contained within the rail, after expanding the rail and shrinking the handles the style presents as below
as you can see, the handles are outside the track and I need them to be contained within, I have tried to translate them by zero or by 0 for the left one and 100% for the right one, but this would cause them to overlap one another like so if not that they overlap, this would be the behavior I am after
here are my styles
.rc-slider {
position: relative;
height: 16px;
padding: 5px 0;
width: 100%;
border-radius: 6px;
touch-action: none;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: transparent;
display: flex;
align-items: center;
}
.rc-slider * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
position: absolute;
width: 100%;
background-color: #f9f8f8;
height: 100%;
border-radius: 6px;
}
.rc-slider-track {
position: absolute;
height: 100%;
border-radius: 6px;
background-color: #CDEA9F;
opacity: 70%;
}
.rc-slider-handle {
position: absolute;
width: 24px;
height: 12px;
cursor: pointer;
cursor: -webkit-grab;
cursor: grab;
border-radius: 40%;
background-color: #8ECC29;
touch-action: pan-x;
}
.rc-slider-handle-1 {
transform: translateX(0) !important; <- this is wrong as can overlap
}
.rc-slider-handle-2 {
transform: translateX(-100%) !important;<- this is wrong as can overlap
}
because the width is set dynamically I can not scale it or anything. I ran out of ideas so please help :)
Thanks a lot
I want to get the element to move to another elements when the elements are hovered on.
Those elements are sibling since I want the one to overlay the another.
The following HTML and CSS give me not bad result.
But I don't want to use constant values for "width" and "left" to animate them.
Is there some way to place the moving element on the hovered elements without using constant position values?
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 105px;
left: 0;
background-color: #1abc9c;
}
nav .start-blog,
a:nth-child(2):hover~.animation {
width: 105px;
left: 105px;
background-color: #e74c3c;
}
nav .start-projects,
a:nth-child(3):hover~.animation {
width: 135px;
left: 210px;
background-color: #3498db;
}
nav .start-about,
a:nth-child(4):hover~.animation {
width: 115px;
left: 345px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 130px;
left: 460px;
background-color: #e67e22;
}
nav {
margin: 27px auto 0;
position: relative;
display: table;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
white-space: nowrap;
}
nav a {
line-height: 50px;
padding: 2px 30px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
<nav>
Home
Blog
Projects
About
Contact
<div class="animation start-home"></div>
</nav>
I couldn't find the way to do it with only CSS, so I used JavaScript and modify style of elements.
It was kind of what I did not want to do.
If you know how to do it with only CSS, let me know.
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.
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'm making some breadcrumbs and restricting the width of them using text-overflow so the text does not spill over. I have wrote a jQuery script which enlarges the size of the breadcrumb when the user hovers over it.
My problem is that when the breadcrumb is enlarged, they end up too long to fit inside the container. I need to make the width of the other breadcrumbs smaller and at the same time, make the highlighted breadcrumb longer.
I have wrote a script for this but it is very buggy. The reason is that when other breadcrumbs are shrunk down in size, the position of the highlighted breadcrumb moves.
I would like the highlighted breadcrumb to expand in size outwards, so that it remains in the same position. But the breadcrumbs around it shrink in size to allow everything to fit on.
Is this do-able?
Here's a fiddle of what I've got so far-
http://jsfiddle.net/8FPeS/
And here's my jQuery code:
$('.breadcrumbButton').mouseenter(function(){
$('.breadcrumbButton').css({width:'30px', minWidth:'30px'});
$(this).css({width:'auto', minWidth:'80px'});
});
$('.breadcrumbButton').mouseleave(function(){
$('.breadcrumbButton').css({width:'80px', minWidth:'80px'});
$(this).css({width:'80px'});
});
I've re-coded it from scratch to hopefully get it to work to Codepen/JSFiddle
HTML
<ul id="container">
<li>Network Accessories
<li>DYMO
<li>Labelling Solutions
<li>Labelling Solutions
<li>Sound Proof Data Cabinets & Server Racks
<li>Labelling Solutions
<li class='active'>Dymo Flexible Nylon
</ul>
CSS
body {
font-family: 'Tahoma', sans-serif;
font-weight: bold;
}
#container {
width: 735px;
border: 1px solid red;
padding-top: 10px;
padding-bottom: 10px;
float: left;
list-style: none;
margin: 0;
}
#container li:first-child {
margin-left: -20px;
}
#container li {
margin-right: 22px;
background: #eee;
border-right: none;
text-decoration: underline;
padding: 10px 5px;
float: left;
height: 16px;
position: relative;
}
li:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 17px 17px;
border-color: transparent transparent transparent #eee;
position: absolute;
top: 0px;
right: -17px;
}
li:before {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 18px 18px;
border-color: #eee #eee #eee transparent;
position: absolute;
top: 0;
left: -18px;
}
#container li a {
font-size: 11px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
overflow: hidden;
display: block;
max-width: 30px;
line-height: 15px;
text-align: center;
}
.active {
background: #333365 !important;
}
.active:before {
border-color: #333365 #333365 #333365 transparent;
}
.active:after {
border-color: transparent transparent transparent #333365;
}
.active a {
max-width: 1000px;
color: #fff !important;
}
.hover {
max-width: 1000px !important;
}
JS
$('li').mouseenter(function(){
$('.active a').css('max-width', '40px');
$(this).children('a').addClass('hover');
});
$('li').mouseleave(function(){
$(this).children('a').removeClass('hover');
$('.active a').css('max-width', '1000px');
});
Hope this helps!