Develop Reference

How to make font icon be full of a block element?

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>

Blocks expanding issue with z-index

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

Adding a light to javascript w/ ping test

I want to display this light if a certain condition is true in javascript using an if statement. How can I add an external CSS class to a javascript if statement?
Here is my css code:
.beacon{
position:absolute;
background-color:#32CD32;
height:1.5em;
width:1.5em;
border-radius:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}
.beacon:before{
position:absolute;
content:"";
height:1.5em;
width:1.5em;
left:0;
top:0;
background-color:transparent;
border-radius:50%;
box-shadow:0px 0px 2px 2px #32CD32;
-webkit-animation:active 2s infinite linear;
animation:active 2s infinite linear;
}
#-webkit-keyframes active{
0%{
-webkit-transform:scale(.1);
opacity:1;
}
70%{
-webkit-transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
#keyframes active{
0%{
transform:scale(.1);
opacity:1;
}
70%{
transform:scale(2.5);
opacity:0;
}
100%{
opacity:0;
}
}
this is the javascript code:
<div class="too white">
<script language="javascript">
url = "http://www.511virginia.org/"
ping = new XMLHttpRequest();
ping.onreadystatechange = function(){
if(ping.readyState == 4){
if(ping.status == 200){
document.write("Website is up");
}
else {
document.write("Website is down");
}
}
}
ping.open("GET", url, false);
ping.send();
</script>
</div>

It depends on any framework you're using. For example, if you're using jQuery then change a DOM element's CSS using .css(property, value). Angular has it's own methods. For raw DOM manipulation take a look at the w3c page on JavaScript HTML DOM - Changing CSS, which shows the following.
document.getElementById(id).style.property = new style

Element doesn't disappear for some browsers

Put simply, loading animation (with white background) should appear as the homepage loads. It should then disappear following loading completion. Working fine for Chrome, but not IE and Firefox (animation works but does not disappear, which may be JS related).
***EDIT - I've temporarily removed the html as the website is active and needed by our customers.
Take a look here: www.championfreight.co.nz
HTML
<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1997">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:50%; z-index:1998">
<div id="followingBallsG_1" class="followingBallsG">
</div>
<div id="followingBallsG_2" class="followingBallsG">
</div>
<div id="followingBallsG_3" class="followingBallsG">
</div>
<div id="followingBallsG_4" class="followingBallsG">
</div>
</div>
</div>
JS
window.onload = function()
{
document.getElementById("followingBallsG").style.visibility = "hidden"
document.getElementById("backgroundcolor").style.visibility = "hidden"
}
CSS
#backgroundcolor{
background-color:white
}
#followingBallsG{
position:relative;
width:100px;
height:8px;
}
.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#followingBallsG_1{
-moz-animation-delay:0s;
}
#followingBallsG_1{
-webkit-animation-delay:0s;
}
#followingBallsG_1{
-ms-animation-delay:0s;
}
#followingBallsG_1{
-o-animation-delay:0s;
}
#followingBallsG_1{
animation-delay:0s;
}
#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}
#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}
#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}
#keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}
50%{
left:93px;
background-color:#000000;
}
100%{
left:0px;
background-color:#000000;
}
}

Ah! I get it. But that is likely to not work in Firefox because they turn off animations while "loading another page". The only way to have an animation working is to use AJAX to do the loading. That's a bit of work and you may have a problem with search engines if you do that because AJAX won't be run by search engines and you will not get any clicks from search engines, so bad idea...

How to have CSS/JavaScript pop-up to transition in?

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.