I have a blocks overview, and when you click on one block it expands.
When clicking outside the expanded block, or on the "x", it resizes back to the default size.
But there are two issues I don't know how to solve.
When you click on a block with Chrome/Safari, the z-index updates a millisecond too late and it doesn't look smooth. (Firefox on MAC is okay when expanding.)
When it's expanded and goes back, the z-index needs to be higher than the other blocks. So, when it goes to normal the site looks a lot better.
So, when clicking, it should add z-index:2; and when it's resizing back to default size the z-index needs to be 1 so its higher than the others ( which are 0) but, when another is expanding, that needs to be the highest.
Can anyone help me with this? I'd rather use some JS magic for this, maybe inline style?
I also made a jsfiddle to show what I mean.
https://jsfiddle.net/fourroses666/sp7vbtok/2/
HTML:
<div class="grid">
<div class="grid-item">
<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
<div class="g-more">Bla bla bla.</div>
<div class="g-close">x</div>
</div>
</div>
</div>
JS
$(".grid-item").on("click", function(){
$(".grid-item").removeClass("active");
$(this).addClass("active");
});
$(".g-close").on("click", function(e){
e.stopPropagation();
$(this).closest(".grid-item").removeClass("active");
});
CSS
.grid{width:875px; margin:20px auto;}
.grid:after {content:''; display:block; clear:both;}
.grid-item{width:175px; height:175px;}
.g-more{display:none; position:absolute; top:175px; height:175px; width:175px; transition:all 1s ease-in-out; opacity:0; padding:20px;}
.active .g-more{opacity:1; display:block;}
.grid-item{float:left; width:175px; height:175px; background:#ddd; color:#fff;}
.grid-item:before{display:block; padding:0;}
.grid-item-wide, .grid-item-wide .g-inner, .grid-item-wide .g-item{width:350px; height:175px;}
.g-inner{cursor:pointer; overflow:hidden; z-index:1; width:175px; height:175px; transition:all 1s ease-in-out; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:left 50%;}
.active .g-inner{width:350px; height:350px; position:relative; z-index:2; cursor:default;}
.open-left.active .g-inner{margin-left:-175px;}
.open-top.active .g-inner{margin-top:-175px;}
.g-item{width:175px; height:175px; position:relative;}
.g-close{cursor:pointer; position:absolute; right:-50px; bottom:-50px; width:50px; height:50px; line-height:50px; font-size:35px; display:none; opacity:0; text-align:center; transition:all 1s ease-in-out;}
.active .g-close{opacity:1; right:0; top:auto; bottom:0; z-index:5; display:block;}
try to use insted
.active .g-inner {
width:350px;
height:350px;
}
with transform:scale and transform-origin (-if you want set pivot x and y as top-left) like this:
.active .g-inner {
transform: scale(2);
transform-origin: left top;
}
its work fine for me
Related
I want to make a rotated animation of a font icon, but I can not let the center be the right place, The rotation is always offset a little.
Here is the example:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
JSFiddle : https://jsfiddle.net/217z69sm/2/
It seems like font-awesome are aware of this, and there suggestion seems to be to switch to the svg version, or to use display: block:
Icon Animation + Wobbles
We’ve worked hard to keep icons perfectly
centered when they are spinning or pulsing. However, we’ve seen issues
with several browsers and the web fonts + CSS version of Font Awesome.
Through a lot of investigation this appears to be an issue with web
fonts in general and not something we can directly fix. We do have a
couple of ways you might be able to work around this:
Switch Frameworks - Switch to the SVG with JavaScript version, it’s
working a lot better for this. Set the display of the animating icon -
Use display: block; where you can. This seems to help a lot with this
issue.
Taken from https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons
I can't say that I can see the difference which using display: block gives here, perhaps others can spot it or add an explanation of why it might help:
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
div {
padding:0;
margin:0;
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:20px;
}
.inner {
line-height:0;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#block {
display: block;
}
.two {
left: 75px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"/>
<div class="container"><div class="inner"><i class="fas fa-adjust"></i></div></div>
<div class="container two"><div class="inner"><i class="fas fa-adjust" id="block"></i></div></div>
I analysis that the icon has some unbalance margins, which is creating a little offset when we try to rotate it.
here, I remake the same icon,
check if it works for you.
#keyframes circle {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.container {
position:absolute;
top:50px;
left:50px;
border:1px solid red;
font-size:300px;
}
.inner {
padding: 2px;
animation-timing-function: linear;
animation-name:circle;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.rot{
border: 10px solid black;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to left,black 0%, black 50%, white 50%,white 100%);
}
<div class="container">
<div class="inner">
<div class="rot">
</div>
</div>
</div>
I've been trying to come up with a solution to this design issue, which seems simple but it's perplexing me.
I have content fixed to the bottom of the screen - some of it is always present, some is hidden from time to time.
The crux is that I want the content above to drop down. I have had some success with javascript but its not perfect. The nearest I've got so far is using max-height.
https://jsfiddle.net/6jax19gf/29/
The fiddle is a working representation of what I'm trying to achieve using max-height. However, max height isn't ideal because much of the content is dynamic.
I'd like to come up with a better solution that isn't hard-coded using max-height.
#fixed-footer {
position:fixed;
left:0;
bottom:0;
width:100%;
}
#fixed-footer-floating {
padding:0 16px;
margin-bottom:16px;
box-sizing:border-box;
}
.fab-button {
background-color:lime;
display:inline-block;
height:40px;
width:40px;
border-radius:50%;
}
#fixed-footer-auto {
background-color:red;
color:white;
text-align:center;
transform: translateY(0);
transition: max-height 0.2s ease-out;
max-height: 76px;
}
.some-content {
padding:14px 16px;
box-sizing:border-box;
}
#fixed-footer:hover #fixed-footer-auto {
transform: translateY(100%);
transition: transform 0.2s ease-in, max-height 0.4s 0.2s ease-out;
max-height: 0;
}
<div id="fixed-footer">
<div id="fixed-footer-floating">
<a class="fab-button"></a> This content always floats above the red box!
</div>
<div id="fixed-footer-auto">
<div class="some-content">This area is responsive so may expand or contract vertically depending on the screen size and page state. It's content can be made to made disappear completely on certain events.</div>
</div>
</div>
Hover over the bottom red area to make the content disappear. This would usually be triggered using javascript.
I have a popup javascript I am using on one of my html pages.
It works fine, but... when I tried to add a second one in a different location, the script would not function.
I'm not sure what I am doing wrong.
I need at least three of these on one webpage in different locations.
Any advice would be appreciated.
Here is the basic script....
<!DOCTYPE html>
<html>
<head>
<script>function myfunction() {var popup1 = document.getElementById("popup1"); popup1.classList.toggle("showpopup1");}</script>
<style>
body {margin:0;}
/* popup container */
.popup1 {
margin-left:200px;
margin-top:200px;
margin-bottom:0px;
position:relative;
display:inline-block;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
/* The actual popup */
.popup1 .popup1text {
visibility:hidden;
background-color:#555;
color:#fff;
border-radius:10px;
padding:8px 8px 8px 8px;
width:400px;
height:80px;
position:absolute;
text-align:left;
z-index:1;
bottom:130%;
left:50%;
margin-left:-210px;
}
/* Popup arrow */
.popup1 .popup1text::after {
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-5px;
border-width:5px;
border-style:solid;
border-color:#555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup1 .showpopup1 {
visibility:visible;
-webkit-animation:fadeIn 1s;
animation:fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn{from {opacity: 0;} to {opacity: 1;}
#keyframes fadeIn{from {opacity: 0;} to {opacity:1 ;}
</style>
</head>
<body>
<div class="popup1" onclick="myfunction()">POPUP 1<span class="popup1text" id="popup1">Popup 1 Text</span></div>
</body>
</html>
Is it possible to CSS animate a div's left property resulting in a div that's floated next to it moving the same incremental amount automatically?
I've produced some jsfiddle code that demonstrates my question not working the way I would like it to. Click on the red square to see it animate, albeit over the top of the blue square.
I would like #block1 to be able to in effect push #block2 by animating the CSS property 'left' of block1.
CSS:
* {
margin:0;
padding:0;
}
.red {
float: left;
position: relative;
width:100px;
height:100px;
background-color: #F00;
}
.blue {
float: left;
width:100px;
height:100px;
background-color: #00F;
}
.animateMenu {
-webkit-animation: myfirst 0.5s forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {left: 0px;}
to {left: 100px;}
}
HTML
<div id="block1" class="red"></div>
<div id="block2" class="blue"></div>
Javascript
$("#block1").on( { "mousedown" : onInteraction } );
function onInteraction(e) {
$("#block1").removeClass("animateMenu").addClass("animateMenu");
}
http://jsfiddle.net/6edgsanb/
Many thanks for any help in advance.
Instead of animating left, animate margin-left. Here's a modified fiddle.
I'm trying to figure out how to make a div pop-up with CSS and a small amount of JavaScript. I've gotten as far as being able to click a link, have a box pop up, and while it's up the screen around it is grey, and if you click the grey the pop-up goes away. However, I can't get it to fade in rather than just appear instantly. Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "block"
pop.style.display = "block"
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "100%"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var pop = document.getElementById(el)
cvr.style.display = "none"
pop.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity = 50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#popup {
display:none;
left:100px;
top:100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
}
#cover-link {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="cover"><a id="cover-link" href="#" onclick="closePopUp('popup');"></a></div>
<div id="popup">
Some Words
</div>
Show
</body>
</html>
The important parts are these:
From the JavaScript:
pop.style.opacity = "1"
pop.style.webkitTransform = "scale(1, 1)"
From the CSS:
opacity:0;
-webkit-transform:scale(.5, .5);
-webkit-transition:all .5s ease-in-out;
Everything appears to be working except the -webkit-transform:scale(.5, .5); is being ignored when the pop.style.webkitTransform = "scale(1, 1)" is in the JavaScript, and the -webkit-transition:all .5s ease-in-out; just isn't doing anything. If you think you know something that may work you can copy the block of code above and alter it; it's already a complete HTML file.
The idea is to get it to fade something like this does:
<html>
<head>
<style type="text/css">
.message {
left:100px;
top: 100px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
border:1px solid gray;
opacity:0;
-webkit-transform: scale(.95, .95);
-webkit-transition: all .5s ease-in-out;
}
.message p {
padding:80px 0;
border-radius:3px;
}
.info:hover + .message {
opacity: 1;
-webkit-transform: scale(1, 1);
}
</style>
</head>
<body>
<div class="info">
<p>Hover</p>
</div>
<div class="message">
<p>A Simple Popup</p>
</div>
</body>
</html>
The main issue that you have is that you're moving from display: none to display: block. The transition won't work like that. Since you already have opacity to hide the div, and you're also using position: absolute, I don't think there's a good reason to not leave the div at display: block.
I also think you would be best served by moving the properties that you want the div to have when it's shown into a CSS class and just adding and removing that class during the appropriate triggers. That makes it easier to modify them in the future, too.
I created a jsBin with the recommended changes.