We Keep Coding

Align CSS "close button" in announcement bar

I'm working on an announcement bar for my website, but I got stuck on positioning the "close" button.
The bar itself works just fine, but I couldn't get to position the "close" button at the right of the announcement bar, where you usually find them. I've tried using margin-right, padding and similar solutions but they didn't work.
Also, I wanted to find the best way to make the button disappear (along with the bar) once it's clicked
EDIT: Here's the solution, provided by GrafiCode.
Here's the code and you can see it running here:
HTML:
<div id="dabar" class="hideonload"></div>
CSS:
/* top-bar */
#dabar {
background: #1b1c1e;
color: #fff;
font-size: 14px;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;
}
#dabar a {
color: #b5e48c;
border-bottom: 1px;
}
.btn-close {
margin-left: calc(100vw - 48px);
margin-top: -16px;
border: 0;
padding: 0;
background: red;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
flex-flow: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 150ms;
}
.btn-close .icon-cross {
margin: 0;
padding: 0;
border: 0;
background: none;
position: relative;
width: 15px;
height: 15px;
}
.btn-close .icon-cross:before,
.btn-close .icon-cross:after {
content: '';
position: absolute;
top: 6.5px;
left: 0;
right: 0;
height: 2px;
background: #fff;
border-radius: 2px;
}
.btn-close .icon-cross:before {
transform: rotate(45deg);
}
.btn-close .icon-cross:after {
transform: rotate(-45deg);
}
.btn-close .icon-cross span {
display: block;
}
.btn-close:hover,
.btn-close:focus {
transform: rotateZ(90deg);
background: #05c;
}
JAVASCRIPT:
window.onload = function() //executes when the page finishes loading
{
setTimeout(func1, 2500);
};
function func1() {
var el = document.getElementById('dabar');
el.innerHTML = 'Empieza aquí | Start here<button class="btn-close" onclick="this.parentElement.style.display=\'none\'" ><span class="icon-cross"></span></button>';
el.className = 'showtopbar';
}
Thanks a lot for your time!

Mobile menu - CSS / DIV - Dim visible background around menu?

When my mobile menu opens, I would love the rest of the visible background (other than the menu itself) to 'dim.' (Both my pages and menu background are very white in general).
There is a plugin that offers this functionality but in trying to keep the website light, am trying to see if this is possible with just some lines of code?
Googling for quite a while came up with nothing other than the app which is a surprise... maybe I searched the wrong keywords?
Any ideas?
Here is my full code (not my original code, can link various parts to their respective Authors).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
#media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
#media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}

One way of doing this is to assert a blanket div over the entire page, beginning just below the menu bar, then setting that div's opacity to the desired level of dimming.
I have thrown together a very simple proof of concept. Hover the dummy Menu button to observe the effect. Take it onwards from there.
body {
--menu-height: 50px;
}
#page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: yellow;
}
#menu_bar {
position: absolute;
width: 100%;
height: var( --menu-height);
background-color: blue;
}
#menu_item {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 30px;
background-color: white;
line-height: 30px;
text-align: center;
}
#menu_item:hover:after {
content: '';
position: fixed;
top: var( --menu-height);
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.5;
/* Ensure z-index is higher than page's content/data items */
z-index: 2
}
#data {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border: 2px solid black;
padding: 10px;
z-index: 1;
}
#text {
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
}
<div id="page">
<div id="menu_bar">
<div id="menu_item">Menu</div>
</div>
<div id="data">
<span id="text">Hover the "Menu" button...</span><br><br> Lorem ipsum dolor etc
</div>
</div>

How to center text inside CSS spinner?

I found a snippet of CSS somewhere on the Internet that re-creates the cool PayPal spinner, and I made a fiddle out of it:
https://jsfiddle.net/55s5oxkf/5/
It works great but I can't figure out how to place text right in the center of that spinner, something like "Loading...". I've tinkered and tried but can't get anything to work.
Here's the CSS:
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: 35%;
left: 45%;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
And the HTML:
<div id="divSpinner" class="spinner loading"></div>
Placing text in between the opening and closing div elements does nothing. Any ideas?

<center> is no longer supported (center deprecated in html5) so use a class like this:
.centered {
text-align: center;
}
Then use calc to get the correct position for the loading text:
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
$("#btnLoadRecords").click(function() {
$("#divSpinner").show();
setTimeout(function() {
$("#divSpinner").hide();
}, 10000);
});
.centered {
text-align: center;
}
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: calc(50% - 45px);
left: calc(50% - 45px);
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="centered">
<div id="divSpinner" class="spinner loading">
<div class="loading-text">Loading ...</div>
</div>
<button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button>
</div>
</body>

For the HTML:
<div id="divSpinner" class="spinner loading" style="display: none;">
<span>Loading…</span>
</div>
For the CSS, in addition to what you have:
.spinner.loading::before{
// Remove position, top, and left properties
margin: -15px auto -65px auto;
display: block (or flex);
}
This will make it work with your existing code, but what you’ve got is pretty hacky. If you want text to be inside your spinner, you should not use a ::before element. But given what you have, this will work.

this should center the content
html
<div id="divSpinner" class="spinner loading">
<p>hello</p>
</div>
css
.spinner.loading {
display: none;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: 0;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

Add this in your css:
.loading {
position: relative;
text-align: center;
line-height: 140px;
vertical-align: middle;
}
And then just add text in loading div between span, for example:
<div id="divSpinner" class="spinner loading">
<span class="text">Loading..</span>
</div>
And because loading has 8px border add this for text class:
.text {
margin-left: 15px;
}
I think something like this should get you going.

YouTube Video appearing in wrong spot when playing 2nd time on page

I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>

Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

HTML audio player timeline functionality add

I am trying to add HTML audio player. I applied a code there play pause working. I need to add timeline functionality here. But don't know how to do that. Here another problem also I don't know how can I apply play pause in same button. Please help me. Below is my code. sample
#audioplayer{
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
}
.play, .play:hover, .pause:focus{background: url('https://img.pranavc.in/20') ;}
.pause, .pause:hover, .play:focus{background: url('https://img.pranavc.in/30') ;}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="document.getElementById('player').play()"></button>
<button id="pButton" class="pause" onclick="document.getElementById('player').pause()"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>

I use javascript, and change the dom and css.
You need to learn audio event and property.
var audio = document.getElementById("player");
var btn = document.getElementById("pButton");
btn.addEventListener("click", function(){
if (audio.paused) {
audio.play();
btn.classList.remove("pause");
btn.classList.add("play");
} else {
audio.pause();
btn.classList.remove("play");
btn.classList.add("pause");
}
});
var playhead = document.getElementById("playhead"); audio.addEventListener("timeupdate", function(){ var duration = this.duration; var currentTime = this.currentTime; var percentage = (currentTime / duration) * 100; playhead.style.left = percentage * 4 + 'px'; });
#audioplayer{
position: relative;
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
float:left;
outline:none;
}
#pButton.pause {
background: url('https://img.pranavc.in/20') no-repeat;
background-size: 56px;
background-position: center;
}
#pButton.play {
background: url('https://img.pranavc.in/30') no-repeat;
background-size: 56px;
background-position: center;
}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
position: relative;
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
position: absolute;
left: 0px;
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="pause"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>

You need to add Javascript code on page to have this functionality. You can extract the code you want from this code (Nicely explained).
https://www.developphp.com/video/JavaScript/Audio-Play-Pause-Mute-Buttons-Tutorial
https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial

<audio controls>
<source src="Link.mp3" type="audio/mpeg">
</audio>
Try the above Code. Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.
Check this link : http://www.w3schools.com/tags/tag_audio.asp