We Keep Coding

Animate just bottom border to width of 0 upon button disabled

function sleep(ms) {
return new Promise (
resolve => setTimeout(resolve, ms)
);
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(5000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() { disableButton(); })
#actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
background-color: white;
border: 1px solid black;
position: relative;
}
#actionButtons:after{
content: "";
position: absolute;
left: -1px;
right: -1px;
height: 0px;
bottom: -2px;
background: black;
}
#actionButtons:disabled:after{
height: 4px;
transform-origin: bottom;
animation: cooldown 5s linear forwards;
}
#keyframes cooldown{
from{
width: 100%;
}
to {
width: 0%;
}
}
<button id="actionButtons"></button>
This snippet is now what I've found as a solution to what I was looking for. Thank you for all the help!
I'm attempting to create a button with a cooldown.
I have javascript setup to disable then enable the button. I want a thicker full width bottom border upon being disabled, and that border to animate to a width of 0, upon which the but is reenabled.
My issue is with the CSS, getting a bottom border created upon disabled that I can then animate. Any animations I use effect the entire button, how can I just access the bottom border? Also, I want it to only animate to 0, once enabled I dont want the animation going back to full width. This is the CSS code I have:
.actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
border: 1px solid black;
}
.actionButtons:disabled {
content: '';
position: relative;
bottom: -6px;
width: 119px;
border-bottom: 2px solid black;
animation: cooldown 10s linear;
}
#keyframes cooldown {
0% { width: 100%; }
100% { width: 0; }
}
Any ideas for how to accomplish this?

So as i said in comment you can use pseudo element to create border and then animate scaleY() of it. In that way you have well performed fluent animation of height.
if you will animate height in px then you will get quantized value to whole one. (tested in chrome)
function sleep(ms) {
return new Promise (
resolve => setTimeout(resolve, ms)
);
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(5000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() { disableButton(); })
#actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
border: 1px solid black;
border-bottom-width: 0;
position: relative;
}
#actionButtons:after{
content: "";
position: absolute;
left: -1px;
right: -1px;
height: 1px;
bottom: 0;
background: red;
}
#actionButtons:disabled {
content: '';
position: relative;
bottom: -6px;
width: 119px;
animation: cooldown 5s linear forwards;
}
#actionButtons:disabled:after{
height: 5px;
transform-origin: bottom;
animation: scale-down 4s linear forwards;
}
#keyframes scale-down{
from{
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
#keyframes cooldown {
0% { width: 100%; }
100% { width: 0; }
}
<button id="actionButtons"></button>

Not exactly sure what you were trying to achieve but you can use transition css-property to auto animate css changes.
In your case, you can add,
transition: border 1s ease;
to animate your border.
I have reduced the sleep to 1s and increased the border width to 10px just for presentational purposes.
Is this what you wanted to achieve ?
function sleep(ms) {
return new Promise(
resolve => setTimeout(resolve, ms)
);
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(1000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() {
disableButton();
})
#actionButtons {
position: relative;
width: 120px;
height: 30px;
margin: 5px;
top: 10px;
left: 40px;
border: 1px solid black;
transition: border 1s ease;
}
#actionButtons:disabled {
content: '';
position: relative;
bottom: -6px;
width: 119px;
border-bottom: 10px solid black;
}
<button id="actionButtons"></button>

How to fix inline coding in html for site map button

I am currently working on a website and the user wants the site map to be a bar at the bottom of the screen with a button kinda built in so that when you click it a site map will slide down or up and then allow the user to click it again and make it go away.
I have the coding for it to go up but once you click it i cant get the button to follow so you can click it again. It just goes behind the site map and is gone. I have to use the coding inline due to the people who designed this site before made the css over 10000 lines long and when you try changing it there is always conflicts and the hosting company is no help on the fix. so i found that putting it in the html coding is the only way to overwrite the crazy css they created.
function footer() {
var footerH = $('footer');
var fH = footerH.height();
$('.fTab').on('click', function() {
$(this).toggleClass('current');
$('footer').slideToggle(500);
});
}
footer();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="fTab" style="width: 100%; height: 3em; position: absolute; bottom: 0; display: block; background: #ffffff; color: #000000; line-height: 4em; text-align: center; font-size: 1.2em; border-radius: 10px 10px 0 0; cursor: pointer; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out;">Site Map</span>
<footer style="position: absolute; display: none; left: 0; width: 100%; height: 30%; background: #ffffff;">
test
</footer>
https://jsfiddle.net/ns16twzq/

$(document).on('click', '#smBtn', function(){
$('#siteMap').css('height', '100%');
$(this).addClass('active');
});
$(document).on('click', '.active', function(){
$('#siteMap').css('height', '100px');
$(this).removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="siteMap" style="position: absolute; width: 100%; height: 100px; left: 0; bottom: 0; background: #333; transition: all ease 0.3s;">
<button id="smBtn" style="margin: 10px auto; display: table; background: #fff; padding: 10px; border-radius: 4px; border: none; transition: all ease 0.3s;">Site Map</button>
</div>

$('#smBtn').on('click', function() {
$('.siteMap').toggleClass('active');
});
.siteMap {
position: absolute;
width: 100%;
height: 100px;
left: 0;
bottom: 0;
background: #333;
transition: all ease 0.3s;
}
.siteMap.active {
height: 100%;
}
#smBtn {
margin: 10px auto;
display: table;
background: #fff;
padding: 10px;
border-radius: 4px;
border: none;
transition: all ease 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="siteMap">
<button id="smBtn">Site Map</button>
</div>

How to morph a plus sign to a minus sign using CSS transition?

I want to create a toggle button that morphs its shape from a plus sign to a minus sign.
Using CSS only, without the use of pseudo-elements.
My desired effect is to have the vertical line in the "+" sign to shrink into the horizontal line.
I know it's possible but I'm not sure which is the best route to take. I was thinking of doing something with the height but I'm worried about the line-height of browsers changing its position in the element.
$('button').on("click", function(){
$(this).toggleClass('active');
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
}
button span {
transition: all .75s ease-in-out;
}
button.active span {
/* Code to morph + to - */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button><span>+</span></button>

Because of the simplicity of the shapes, the easiest way is just to make the + and - with elements. Using pseudo elements would be the cleanest solution, but you can also just use a DOM element and have a slightly messier document structure.
With that in mind, the actual solution is straightforward. We use CSS to position elements to resemble the desired characters, and then "morph" between them by animating that position.
Take a look over the following code, and try to understand what each rule is accomplishing.
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
position: relative;
}
button span {
position: absolute;
transition: 300ms;
background: white;
border-radius: 2px;
}
/* Create the "+" shape by positioning the spans absolutely */
button span:first-child {
top: 25%;
bottom: 25%;
width: 10%;
left: 45%;
}
button span:last-child {
left: 25%;
right: 25%;
height: 10%;
top: 45%;
}
/* Morph the shape when the button is hovered over */
button:hover span {
transform: rotate(90deg);
}
button:hover span:last-child {
left: 50%;
right: 50%;
}
<button>
<span></span>
<span></span>
</button>

Note : please stop editing the question making the answers incorrect
CSS solution
$('button').on("click", function(){
$(this).toggleClass('active');
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 70px;
height: 70px;
position: relative;
font-size: 50px;
cursor: pointer;
border: 0;
outline: 0;
padding: 0
}
.plus,
.minus {
color: #fff;
padding: 10px;
width: 70px;
height: 70px;
line-height: 50px;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
box-sizing: border-box;
transition: .5s all ease-out;
}
.plus {
opacity: 1;
transform: rotate(0deg);
}
button.active .plus {
opacity: 0;
transform: rotate(90deg);
}
.minus {
opacity: 0;
transform: rotate(-90deg);
}
button.active .minus {
opacity: 1;
transform: rotate(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<button>
<span class="plus"><i class="fa fa-plus"></i></span>
<span class="minus"><i class="fa fa-minus"></i></span>
</button>
A (old) CSS solution:
Using pseudo element ::before with content property
$('button').on("click", function() {
$(this).toggleClass('active');
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
}
button span {
transition: all .75s ease-in-out;
position:relative
}
button span::before {
content:"+"
}
button.active span::before {
content:"-"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button><span></span></button>
A (old) jquery Solution:
no need for span, you can do this using text() with a if statement in jquery
$('button').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
transition: all .75s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>+</button>

Ah my bad I've overlooked that OP doesn't want to use any pseudo
elements. But the big advantage with pseudo elements would be that you have less HTML Code and a cleaner structure.
It's also a different morphing animation as OP wants but maybe someone else can use this.
So if you don't mind I'll let my suggestion there.
Maybe something like this?
HTML
<div class="button"></div>
CSS
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #343838;
}
.button {
position: absolute;
width: 55px;
height: 55px;
background: #70975B;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border-radius: 50%;
cursor: pointer;
z-index: 100;
transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}
.button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 2px;
width: 50%;
background: white;
}
.button:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50%;
width: 2px;
background: white;
}
.button.clicked {
transform: translate(-50%, -50%) rotate(360deg);
background: #CC2A41;
}
.button.clicked:before {
width: 0;
}
jQuery
$(".button").click(function() {
$(this).toggleClass("clicked");
});
And here a working example
http://codepen.io/svelts/pen/LkyZoZ

try this
$('button').on("click", function() {
var $this = $(this);
$this.toggleClass('toggle');
if ($this.hasClass('toggle')) {
$this.text('+');
} else {
$this.text('-');
}
});
button {
color: #ecf0f1;
background: #e74c3c;
width: 50px;
height: 50px;
border: 0;
font-size: 1.5em;
transition: all .75s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle">+</button>

Auto Hiding button

On my website I have a hover bar at the top left that when you hover over it, it transitions outward and displays a button which you can press to display more options, but when you suddenly mouse over and go away again, it doesn't look smooth as the button doesn't fade with the div and the button kind of turns square when it the div fades back in. How could I fix it?
function myFunction() {
for (var i = 0; i < 500; i++) {
var x = Math.random() * screen.width;
var y = Math.random() * screen.height;
var star = document.createElement('div');
star.className = 'star';
star.style.left = x + 'px';
star.style.top = y + 'px';
document.body.appendChild(star);
}
}
$(document).ready(function() {
$("button").click(function() {
$('.mercury-lines').toggle();
});
});
$(document).ready(function() {
$("#fade").hover(function() {
$("button").fadeToggle(1500);
});
});
html {
background-color: #000;
overflow-x: hidden;
overflow-y: hidden;
}
#fade {
width: 20px;
height: 100px;
background: #848484;
transition: width 2s;
-webkit-transition: width 2s;
/* Safari 3.1 to 6.0 */
position: absolute;
border-radius: 10%;
top: 10px;
left: -8px;
opacity: 0.6;
filter: alpha(opacity=60);
}
#fade:hover {
width: 200px;
}
.star {
position: absolute;
width: 1px;
height: 1px;
background: white;
z-index: -1;
}
.sun {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
border-radius: 50%;
/*box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;*/
}
#button-change {
position: absolute;
top: 3px;
left: 3px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: none;
display: none;
}
.mercury {
position: absolute;
height: 18px;
/*25px for both*/
width: 18px;
margin-left: 25px;
border-radius: 50%;
/*box-shadow: green 0 0 25px;*/
}
.mercury-orbit {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-left: -101px;
margin-top: -101px;
-webkit-animation: spin-left 30s linear infinite;
}
.mercury-lines {
display: none;
border-width: 1px;
border-style: solid;
border-color: white;
border-radius: 50%;
position: absolute;
height: 225px;
width: 225px;
top: 50%;
left: 50%;
margin-left: -113px;
margin-top: -113px;
}
.moon {
height: 10px;
width: 10px;
}
.moon-orbit {
top: 50%;
left: 50%;
height: 50px;
width: 50px;
margin-left: 6px;
margin-bottom: -34px;
border: 1px solid rgba(255, 0, 0, 0.1);
border-radius: 50%;
-webkit-animation: spin-left 4s linear infinite;
}
#-webkit-keyframes spin-left {
100% {
-webkit-transform: rotate(-360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body onload="myFunction()">
<img class="sun" src="http://www.mprgroup.net/images/august2011/sun_transparent.png">
<div class="mercury-lines">
</div>
<div class="mercury-orbit ">
<img class="mercury" src="http://astronomyandlaw.files.wordpress.com/2013/03/mercury.jpg" />
</div>
<div id="fade">
<button id="button-change">Toggle Orbits</button>
</div>
</body>
</html>

add this for each of your #fade and #button-change in your css
#fade{
overflow:hidden;
}
and spacify the width to button
#button-change{
width: 100px;
}
but let me say that's not a good solution .. you can margin left your #fade and animate it .. I think it will be better
DEMO HERE Using js
in css
#fade{
margin-left :-180px;
}
in js
$(document).ready(function(){
$('#fade').on('mouseenter',function(){
$(this).stop().animate({'margin-left':'0px'},2000);
});
$('#fade').on('mouseleave',function(){
$(this).stop().animate({'margin-left':'-180px'},2000);
});
});
and use all of your code inside just one $(document).ready no need to repeat that
DEMO HERE Using css you can do that with pure css
#fade{
margin-left :-180px;
transition-duration: 2s;
}
#fade:hover{
margin-left: 0px;
transition-duration: 2s;
}

i know this is not the best answer but solves the problem,hope it helps
$(document).ready(function() {
$("#fade").mouseover(function() {
$("button").fadeIn(1500);
});
$("#fade").mouseout(function() {
$("button").hide();
});
});
Demo

How to fade in a HTML5 dialog?

How can I fade in an HTML5 dialog? And by dialog I mean HTML5 <dialog> tag (http://demo.agektmr.com/dialog/).
I tried the following (http://jsfiddle.net/v6tbW/) but for some reason the transition does not work.
HTML
<dialog id="myDialog">
Test
</dialog>
<script>
document.getElementById('myDialog').show(); // note that this is a method of <dialog>, this is not a jQuery method.
</script>
CSS
dialog {
position: absolute;
left: 0; right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
visibility:hidden;
opacity:0;
transition:visibility 10s linear 10s,opacity 10s linear;
}
dialog[open] {
visibility:visible;
opacity:1;
transition-delay:0s;
}
.backdrop {
position: fixed;
background: rgba(0,0,0,0.1);
top: 0;
bottom: 0;
left: 0;
right: 0;
}

You can transition the element if you set display: block on it (and allow time for this style to be applied to the element).
Demo: http://jsfiddle.net/v6tbW/11/
To do this with .showModal(), unfortunately it appears that transitions don't work with only the [open] attribute. They do appear to work if you add another class though:
http://jsfiddle.net/karlhorky/eg4n3x18/

Minimal HTML 5 version
The example below has the benefit of no dependencies or external script needed. The <dialog> tag is handy when opened with showModal as it displays a backdrop over the top of DOM declared around it even with display: relative | absolute on its direct parent.
dialog {
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
dialog[open] {
opacity: 1;
pointer-events: inherit;
}
dialog::backdrop {
background-color: rgba(0,0,255, 0.2);
}
<button onclick="dialog.showModal()">show dialog</button>
<dialog id="dialog">
<p>hi i'm a dialog!</p>
<form method="dialog">
<button>Close</button>
</form>
</dialog>
Using a <form> with method=dialog accomplishes closing the modal without having to handle the close event.
These two references are most enlightening:
https://css-tricks.com/some-hands-on-with-the-html-dialog-element/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
Closing points
As of 11-6-2020, Safari in general does not support this
This makes React portals obsolete for modal purposes

Since you're using jQuery. This is an easier approch:
http://jsfiddle.net/v6tbW/3/
HTML
<dialog id="myDialog">
Test
</dialog>
CSS
dialog {
display: none;
position: absolute;
left: 0; right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
}
jQuery
$(function() {
$('#myDialog').fadeIn(10000);
});

You can consider use
-webkit-animation
#keyframes
dialog[open] {
-webkit-animation: myFadeIn 5.0s ease normal;
}
#-webkit-keyframes myFadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Eample
<style>
/* 👇 Optional. change the background style. */
dialog::backdrop {
background-color: rgba(255, 128, 30, .75);
backdrop-filter: blur(3px);
}
/* 👇 style1: fadeIn */
dialog[open] {
-webkit-animation: myFadeIn 5.0s ease normal;
}
#-webkit-keyframes myFadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 👇 style2: top2center */
dialog#top2center[open] {
// Find your favorite style from here: https://cubic-bezier.com/
// -webkit-animation: myTop2Center 3.0s ease normal;
-webkit-animation: myTop2Center 1.2s cubic-bezier(.33,1.44,.83,.22)
}
#-webkit-keyframes myTop2Center{
from {
transform: translateY(-200%);
}
to {
transform: translateY(0%);
}
}
</style>
<dialog>
<header>FadeIn</header>
<form>
<button>Close</button>
</form>
</dialog>
<dialog id="top2center">
<header>Top2Center</header>
<form>
<button>Close</button>
</form>
</dialog>
<script>
document.querySelectorAll(`dialog`).forEach(dialogElem=>{
const testName = dialogElem.querySelector(`header`).innerText
const frag = document.createRange().createContextualFragment(`<button>${testName}</button><br>`)
const showBtn = frag.querySelector(`button`)
const closeBtn = dialogElem.querySelector(`button`)
showBtn.onclick = () => dialogElem.showModal()
closeBtn.onclick = () => dialogElem.close()
dialogElem.querySelector(`form`).onsubmit = () => false // To stop submit event.
document.body.append(frag)
})
</script>
Help you customize cubic-bezier: https://cubic-bezier.com/

Here's a working example of using css transition that you started with
and proper jquery selector, that adds the "no-ninja" class to your DIV,
on window load event:
http://jsfiddle.net/v6tbW/6/
html:
<dialog id="myDialog">
Test
</dialog>
css:
dialog {
position: absolute;
left: 0; right: 0;
margin: auto;
border: solid;
padding: 1em;
background: red;
color: black;
dispaly:block;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
/*visibility:hidden;*/
opacity:0;
-webkit-transition: opacity 10s linear;
}
dialog[open] {
visibility:visible;
opacity:1;
transition-delay:0s;
}
.backdrop {
position: fixed;
background: rgba(0,0,0,0.1);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.no-ninja{
opacity:1;
}
js:
$("#myDialog").addClass('no-ninja');