We Keep Coding

why is font-awesome icon displaying the icon too small and off center?

;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?

I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.

Custom alert fadeIn but wont fadeOut

I am trying to make my custom alert fade in and out. I am altering its visibility by adding and removing the class "show" to the toast-container div.It fades in fine however it fades out just momentarily before immediately reappearing again. Using inspect element it shows that it encountered this error:
job-application-form.php:463 Uncaught TypeError: Cannot read property 'classList' of undefined
at job-application-form.php:463
which is at the function setTimeout(function(){ cont.classList.remove("show")}, 3000);and the "show" class was not removed from the div.
I do not understand why I am getting this error or how to fix it. Please help.
Div
<div id="toast-container" class="toast-top-right"><div id="toast-type" class="toast" aria-live="assertive" style=""><div id="snackbar">message</div></div></div>
Function:
<script>
function Toast(message, messagetype)
{
var cont = document.getElementById("toast-container").classList.add("show");
var type = document.getElementById("toast-type");
type.className += " " + messagetype;
var x = document.getElementById("snackbar");
x.innerHTML = message;
setTimeout(function(){ cont.classList.remove("show")}, 3000);
}
</script>
Function call in php
$Toast = "We have <strong>successfully</strong> received your message and will get back to you as soon as possible.";
$Error = "toast-error";
$Success = "toast-success";
echo "<script type='text/javascript'>Toast('$Toast', '$Success');</script>";
CSS:
#snackbar {
word-wrap: break-word;
}
#toast-container {
visibility: hidden;
position: fixed;
z-index: 999999;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#toast-container.show {
visibility: visible;
}
#toast-container * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.toast-top-right {
top: 12px;
right: 12px;
}
#toast-container > div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 20px 25px;
width: 300px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-repeat: no-repeat;
-moz-box-shadow: 0 0 12px #999999;
-webkit-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
.toast {
background-color: #030303;
}
.toast-success {
background-color: #51A351;
}
.toast-error {
background-color: #BD362F;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

Problem is in your variable cont which isn't correctly initialized.
Change this line:
var cont = document.getElementById("toast-container").classList.add("show");
to this:
var cont = document.getElementById("toast-container");
cont.classList.add("show");

Dean Strydom, you are almost there. Actually, the error message describes exactly the issue.
var cont = document.getElementById("toast-container").classList.add("show");
in this line, it is your expectation that cont is the toast-container but it isn't. It is the result of classList.add which is just undefined.
By the time, you use cont again to remove the show class, it will attempt to access classList from cont which is in fact undefined.
In summary,
var cont = document.getElementById("toast-container"); // simply save this element first
cont.classList.add("show"); // then manipulate afterwards
Here is a running snippet. Modified to prompt on button click. Hope this helps you understand the issue better. Just play around the styling/animation.
let animating = false;
function Toast(message, messagetype) {
var cont = document.getElementById("toast-container");
cont.classList.add("show"); // correct manipulation
var type = document.getElementById("toast-type");
type.className += " " + messagetype;
var x = document.getElementById("snackbar");
x.innerHTML = message;
setTimeout(function() {
cont.classList.remove("show"); // access it again here
animating = false;
}, 3000);
}
let btn = document.querySelector('button');
btn.addEventListener('click', function(e) {
if (animating) {
return;
}
animating = true;
Toast("hi there", "toast-success");
});
#snackbar {
word-wrap: break-word;
}
#toast-container {
visibility: hidden;
position: fixed;
z-index: 999999;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#toast-container.show {
visibility: visible;
}
#toast-container * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.toast-top-right {
top: 12px;
right: 12px;
}
#toast-container>div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 20px 25px;
width: 300px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-repeat: no-repeat;
-moz-box-shadow: 0 0 12px #999999;
-webkit-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
.toast {
background-color: #030303;
}
.toast-success {
background-color: #51A351;
}
.toast-error {
background-color: #BD362F;
}
#-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
#keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
#-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
#keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
<div id="toast-container" class="toast-top-right">
<div id="toast-type" class="toast" aria-live="assertive" style="">
<div id="snackbar">message</div>
</div>
</div>
<button>Toast!</button>
https://codepen.io/aldnav/pen/gqbEQE

cont is not referencing the element you are looking for. classList.add("show") does not return anything and in JavaScript if function does not return any thing explicitly, the function by default returns undefined. Thus the variable actually holds undefined and you get the error.
Try the following:
<script>
function Toast(message, messagetype)
{
var cont = document.getElementById("toast-container")
cont.classList.add("show");
var type = document.getElementById("toast-type");
type.className += " " + messagetype;
var x = document.getElementById("snackbar");
x.innerHTML = message;
setTimeout(function(){ cont.classList.remove("show")}, 3000);
}
</script>
Demo of the issue:
var cont = document.getElementById("toast-container").classList.add("show");
console.log(cont);
.show{
color: red;
}
<div id="toast-container">Test Container</div>

Css - adding <!DOCTYPE html> make the browser ignore my animation

I'm a new designer so always forget to put a <!DOCTYPE html> first, yesterday I just finished a little loading page with some effects and animation, but I realised that I didn't put <!DOCTYPE html> so I put it.
The problem is that before putting it all animation was normal, but when I put it there some animations who didn't work at all
HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="../css/load.css">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title> FalquOS: Loading ... </title>
</head>
<body onkeypress="uniCharCode(event)" id="bodi">
<div id="head">
<span> Press <p style="color: turquoise;font-size:35px;">Enter</p> to continue !</span>
</div>
<div id="body">
<img id="logo" alt="image" src="../img/img.jpg">
<div id="border"></div>
<div id="text">
<p id="text1">Falqu</p>
<p id="text2">OS</p>
<p id="p1">.</p>
<p id="p2">.</p>
<p id="p3">.</p>
</div>
</div>
<div id="footer">
<hr class="line">
<span id="footext">Falqu0S 2018 ©.<br>All copyright reserved.<br>Credit to Ilyes Medjedoub.</span>
</div>
<script type="text/javascript" src="../js/load.js"></script>
</body>
</html>
CSS:
* {
background: #333;
}
body {
width: 970px;
height: 630px;
margin-right: auto;
margin-left: auto;
}
#border{
position: absolute;
width: 213px;
height: 122px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
margin: 480px 0 0 356px;
transition: 1s;
z-index: 9;
background-color: white;
}
#logo{
position: absolute;
width: 207px;
height: 116px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
margin: 480px 0 0 360px;
transition: 1s;
z-index: 10;
}
#text {
position: absolute;
margin: 290px 0 0 440px;
visibility: hidden;
}
p {
display: inline;
font-size: 50px;
font-family: 'Exo 2', sans-serif;
font-weight: bold;
transform: 1s;
text-shadow: -1px 2px 2px #100;
}
#text1 {
color: #EC4758;
}
#text2{
color: white;
}
#keyframes fadeout {
from {opacity: 0;}
to {opacity: 1;}
}
#p1 {
margin-left: 5px;
color: #F1E5E7;
visibility: hidden;
}
#p2 {
margin-left: 5px;
color: #FF966F;
visibility: hidden;
}
#p3 {
margin-left: 5px;
color: #7EB233;
visibility: hidden;
}
hr.line {
position: absolute;
height: 6px;
width: 650px;
background: url(../img/line.png) repeat-x 0 0;
border: 0;
margin: 480px 0 0 150px;
z-index: 10;
}
#footer{
visibility: hidden;
transition: 1s;
}
#footext{
position: absolute;
text-align: center;
margin: 510px 0 0 385px;
font-size: 20px;
font-family: 'Ubuntu', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
}
#head {
margin: 160px 0 0 320px;
position: absolute;
font-size: 30px;
color: white;
visibility: hidden;
}
#keyframes fadeouta {
from {opacity: 1;}
to {opacity: 0;}
}
JS:
const logo = document.getElementById("logo");
const text = document.getElementById("text");
const p1 = document.getElementById("p1");
const p2 = document.getElementById("p2");
const p3 = document.getElementById("p3");
const footer = document.getElementById("footer");
const border = document.getElementById("border");
const head = document.getElementById("head");
var x = 0;
var y = 0;
function up() {
if(x == 220){
left();
} else {
x = x + 5;
logo.style.marginTop = 480 - x;
border.style.marginTop = 477 - x;
setTimeout(up, 1);
}
}
function left() {
if(y == 160){
text.style.visibility = "visible";
text.style.animation = "fadeout 2s ease";
setTimeout(loading, 1000);
setTimeout(function show(){
head.style.visibility = "visible";
head.style.animation = "fadeout 3s ease";
}, 1500);
} else {
y++
logo.style.marginLeft = 360 - y;
border.style.marginLeft = 356 - y;
setTimeout(left, 1);
}
}
function loading() {
var z = 1200;
setTimeout(function(){
footer.style.visibility = "visible";
footer.style.animation = "fadeout 1s ease";
p3.style.visibility = "hidden";
p1.style.visibility = "visible";
p1.style.animation = "fadeout 1s ease";
setTimeout(function(){
p1.style.visibility = "hidden";
p2.style.visibility = "visible";
p2.style.animation = "fadeout 1ss ease";
setTimeout(function(){
p2.style.visibility = "hidden";
p3.style.visibility = "visible";
p3.style.animation = "fadeout 1s ease";
}, z/3);
}, z/3);
}, z/3);
setTimeout(loading, z);
}
function uniCharCode(event) {
var char = event.which || event.keyCode;
if(char == 13){
document.getElementById("bodi").style.animation = "fadeouta 2s ease";
setTimeout(function(){window.open("index.html", "_self")}, 1000);
}
}
up();
So, before putting the DOCTYPE it was like this:
https://gyazo.com/de4e0eb4de4994804ca41fe0cb837062
And after putting the DOCTYPE it do this:
https://gyazo.com/d140f5608d8627c29099a5d837faee3a
I wish someone could help me.

Add "px":
logo.style.marginTop = (480 - x)+"px";
border.style.marginTop = (477 - x)+"px";
logo.style.marginLeft = (360 - y)+"px";
border.style.marginLeft = (356 - y)+"px";
Like this:
const logo = document.getElementById("logo");
const text = document.getElementById("text");
const p1 = document.getElementById("p1");
const p2 = document.getElementById("p2");
const p3 = document.getElementById("p3");
const footer = document.getElementById("footer");
const border = document.getElementById("border");
const head = document.getElementById("head");
var x = 0;
var y = 0;
function up() {
if (x == 220) {
left();
} else {
x = x + 5;
logo.style.marginTop = (480 - x)+"px";
border.style.marginTop = (477 - x)+"px";
setTimeout(up, 1);
}
}
function left() {
if (y == 160) {
text.style.visibility = "visible";
text.style.animation = "fadeout 2s ease";
setTimeout(loading, 1000);
setTimeout(function show() {
head.style.visibility = "visible";
head.style.animation = "fadeout 3s ease";
}, 1500);
} else {
y++
logo.style.marginLeft = (360 - y)+"px";
border.style.marginLeft = (356 - y)+"px";
setTimeout(left, 1);
}
}
function loading() {
var z = 1200;
setTimeout(function() {
footer.style.visibility = "visible";
footer.style.animation = "fadeout 1s ease";
p3.style.visibility = "hidden";
p1.style.visibility = "visible";
p1.style.animation = "fadeout 1s ease";
setTimeout(function() {
p1.style.visibility = "hidden";
p2.style.visibility = "visible";
p2.style.animation = "fadeout 1ss ease";
setTimeout(function() {
p2.style.visibility = "hidden";
p3.style.visibility = "visible";
p3.style.animation = "fadeout 1s ease";
}, z / 3);
}, z / 3);
}, z / 3);
setTimeout(loading, z);
}
function uniCharCode(event) {
var char = event.which || event.keyCode;
if (char == 13) {
document.getElementById("bodi").style.animation = "fadeouta 2s ease";
setTimeout(function() {
window.open("index.html", "_self")
}, 1000);
}
}
up();
* {
background: #333;
}
body {
width: 970px;
height: 630px;
margin-right: auto;
margin-left: auto;
}
#border {
position: absolute;
width: 213px;
height: 122px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
margin: 480px 0 0 356px;
transition: 1s;
z-index: 9;
background-color: white;
}
#logo {
position: absolute;
width: 207px;
height: 116px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
margin: 480px 0 0 360px;
transition: 1s;
z-index: 10;
}
#text {
position: absolute;
margin: 290px 0 0 440px;
visibility: hidden;
}
p {
display: inline;
font-size: 50px;
font-family: 'Exo 2', sans-serif;
font-weight: bold;
transform: 1s;
text-shadow: -1px 2px 2px #100;
}
#text1 {
color: #EC4758;
}
#text2 {
color: white;
}
#keyframes fadeout {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#p1 {
margin-left: 5px;
color: #F1E5E7;
visibility: hidden;
}
#p2 {
margin-left: 5px;
color: #FF966F;
visibility: hidden;
}
#p3 {
margin-left: 5px;
color: #7EB233;
visibility: hidden;
}
hr.line {
position: absolute;
height: 6px;
width: 650px;
background: url(../img/line.png) repeat-x 0 0;
border: 0;
margin: 480px 0 0 150px;
z-index: 10;
}
#footer {
visibility: hidden;
transition: 1s;
}
#footext {
position: absolute;
text-align: center;
margin: 510px 0 0 385px;
font-size: 20px;
font-family: 'Ubuntu', sans-serif;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
}
#head {
margin: 160px 0 0 320px;
position: absolute;
font-size: 30px;
color: white;
visibility: hidden;
}
#keyframes fadeouta {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<title> FalquOS: Loading ... </title>
<body onkeypress="uniCharCode(event)" id="bodi">
<div id="head">
<span> Press <p style="color: turquoise;font-size:35px;">Enter</p> to continue !</span>
</div>
<div id="body">
<img id="logo" alt="image" src="../img/img.jpg">
<div id="border"></div>
<div id="text">
<p id="text1">Falqu</p>
<p id="text2">OS</p>
<p id="p1">.</p>
<p id="p2">.</p>
<p id="p3">.</p>
</div>
</div>
<div id="footer">
<hr class="line">
<span id="footext">Falqu0S 2018 ©.<br>All copyright reserved.<br>Credit to Ilyes Medjedoub.</span>
</div>

loading animation appears above of scrollbar

I have a project.in that project i need a loading animation. So i created one. but the problem is i can't hide the scroll bar. if i give overflow hidden to my body by css and when loading animation finished i gave overflow auto by js. it will create another problem. (.inner-menus goes down of .puller. and it doesn't goes left properly, it takes space of scroll bar.)the reason I detected: when window loads there is no scroll bar and js take window width and minus .puller width from window width and set the value as .inner-menu width and there is no window's scroll bar width.(chrome scrollbar width is 17px.but other browser's scroll bar width is nor 17px) . if i go full page it just OK because it re take window width and minus .puller width from window width and set the value as .inner-menu width(this time there is scroll bar).
so i just want that the animation div goes overly scroll. Is it possible? if not please try to give another solution.
thanks
without body overflow hidden.
$(window).load(function() {
$(".loaderBg").delay(5000).fadeOut("slow");
})
$(document).ready(function() {
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('.inner-menu').width($(window).width() - (pullerDimensions +2));
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
(function($) {
$(".puller").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 50
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 50));
}
});
}(jQuery));
});
* {
margin: 0px;
padding: 0px;
outline: 0;
}
body {
background: #3F51B5;
color: #FFF;
font-family: arial;
}
.content {
height: 200vh;
}
.menu {
background: #FFF;
color: #333;
display: block;
width: 100%;
left: calc(-100% + 49px);
height: 150px;
font-size: 20px;
border-bottom: 1px solid #A09E9E;
right: 0px;
position: absolute;
width: 100%;
}
.inner-menu {
display: inline-block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #333;
color: #fff;
height: 150px;
}
.loaderBg {
height: 100vh;
width: 100vw;
width: 100%;
position: fixed;
z-index: 1000;
background: #333;
overflow:hidden;
}
.puller {
font-size: 20px;
position: absolute;
top: 0;
right: 0px;
border-left: 1px solid #A09E9E;
border-right: 1px solid #A09E9E;
left: auto;
text-align: center;
width: 50px;
height: 150px;
line-height: 150px;
cursor: hidden;
}
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loaderBg">
<div class="loader"></div>
</div>
<div class="content">
<div class="menu">
<div class="inner-menu">
menu item-1<br>
menu item-2
</div>
<div class="puller">
>
</div>
</div>
</div>
With overflow hidden
$(window).load(function() {
$(".loaderBg").delay(5000).fadeOut(1000, function(){
$("body").css("overflow", "auto");
});
})
$(document).ready(function() {
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('.inner-menu').width($(window).width() - (pullerDimensions +2));
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
(function($) {
$(".puller").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 50
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 50));
}
});
}(jQuery));
});
* {
margin: 0px;
padding: 0px;
outline: 0;
}
body {
background: #3F51B5;
color: #FFF;
font-family: arial;
overflow: hidden;
}
.content {
height: 200vh;
}
.menu {
background: #FFF;
color: #333;
display: block;
width: 100%;
left: calc(-100% + 49px);
height: 150px;
font-size: 20px;
border-bottom: 1px solid #A09E9E;
right: 0px;
position: absolute;
width: 100%;
}
.inner-menu {
display: inline-block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #333;
color: #fff;
height: 150px;
}
.loaderBg {
height: 100vh;
width: 100vw;
width: 100%;
position: fixed;
z-index: 1000;
background: #333;
overflow:hidden;
}
.puller {
font-size: 20px;
position: absolute;
top: 0;
right: 0px;
border-left: 1px solid #A09E9E;
border-right: 1px solid #A09E9E;
left: auto;
text-align: center;
width: 50px;
height: 150px;
line-height: 150px;
cursor: hidden;
}
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
#-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
#keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #ffffff;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loaderBg">
<div class="loader"></div>
</div>
<div class="content">
<div class="menu">
<div class="inner-menu">
menu item-1<br>
menu item-2
</div>
<div class="puller">
>
</div>
</div>
</div>

Make this change in your JS.
var calcWidth; // declare calc width as global
$(window).load(function() {
$(".loaderBg").delay(2000).fadeOut(1000, function(){
$("body").css("overflow","auto");
calcWidth(); // call here
});
});
$(document).ready(function() {
calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('.inner-menu').width($(window).width() - (pullerDimensions +2));
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
(function($) {
$(".puller").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 50
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 50));
}
});
}(jQuery));
});

Mask animation with circular div in css

I am creating a google-material-design-like button with a ripple effect but my animation is showing up as a square shape when I want it to be circle.
This happens because the animation reaches a size bigger than the div it is in, and then fills the edges of the outer div making it look like a square. Is there a way to set the outer div itself to be a circle, because even though I've set border-radius: 50%, the div itself (not the shape created within the div) is still a square.
html:
<div id="imgs">
<div id="button"></div>
</div>
css:
#button{
position: relative;
overflow: hidden;
height: 56px;
width: 56px;
border-radius: 50%;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
}
.drop{
display: block;
position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 50%;
transform: scale(0);
}
.drop.animate {
-webkit-animation-name: ripple;
-webkit-animation-duration: 0.65s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes ripple {
100% {opacity: 0; transform: scale(2.5);}
}
I thought that giving the #button the property of overflow: hidden would create the masked effect, but it didn't.
javascript:
var parent, ink, d, x, y;## Heading ##
$("#imgs #button").click(function(e){
element = $(this);
if(element.find(".drop").length === 0)
element.prepend("<span class='drop'></span>");
drop = element.find(".drop");
drop.removeClass("animate");
if(!drop.height() && !drop.width())
{
d = Math.max(element.outerWidth(), element.outerHeight());
drop.css({height: d, width: d});
}
x = e.pageX - element.offset().left - drop.width()/2;
y = e.pageY - element.offset().top - drop.height()/2;
//set the position and add class .animate
drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});
Here is a working fiddle where you can see the effect the above code generates. How can I alter it so that the ripple animation shows up round (confined to the round button) as opposed to squared (expanding over the button's boundaries)?

This issue is caused by a reported bug in chrome. There isn't a fix yet but there is a simple work-around that doesn't affect the aesthetic.
You need to add a transform to the element: -webkit-transform: rotate(0.000001deg); It can be so small as to be imperceptible, but that should be enough to fix it by promoting the paint order of the elements.
var parent, ink, d, x, y;
$("#imgs #button").click(function(e) {
element = $(this);
if (element.find(".drop").length === 0)
element.prepend("<span class='drop'></span>");
drop = element.find(".drop");
drop.removeClass("animate");
if (!drop.height() && !drop.width()) {
d = Math.max(element.outerWidth(), element.outerHeight());
drop.css({
height: d,
width: d
});
}
x = e.pageX - element.offset().left - drop.width() / 2;
y = e.pageY - element.offset().top - drop.height() / 2;
//set the position and add class .animate
drop.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
#button {
position: relative;
overflow: hidden;
height: 56px;
width: 56px;
border-radius: 50%;
-webkit-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
box-shadow: 0 1px 5px 0 rgba(50, 50, 50, 0.75);
-webkit-transform: rotate(0.000001deg); /* This is the important bit */
}
.drop {
height: 56px;
width: 56px;
display: block;
position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 90%;
transform: scale(0);
}
.drop.animate {
-webkit-animation-name: ripple;
-webkit-animation-duration: 0.65s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
border-radius: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgs">
<div id="button"></div>
</div>
Here is a breakdown of the bug:
https://code.google.com/p/chromium/issues/detail?id=157218