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 do I make my multiple choice code written in CSS & JS to only select one option? Currently I can select both

I am having a bit of trouble here, and I am sure this is an easy fix. I am very inexperienced in Javascript & I am trying to learn how to code better looking sites.
Basically I am using this code for selecting iOS or Android, but I want to be able to only select one or the other. Instead I am able to select both. Could someone please help explain how to select either one or the other? Preferably when selecting one it automatically deselects the other if the other is already selected. I would really appreciate help! Thank you very much.
https://codepen.io/cmpackagingllc/pen/JVLPjq
HTML
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
Javascript
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

$("li").click(function () {
var isActive = $(this).find('.borderOverlay').length;
$('.borderOverlay').remove();
if(!isActive) {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

You just have to remove the other's .borderOverlay.
You can do that by using $(this).siblings() and this will select all other li except the one that was clicked on.
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
$(this).siblings().find('.borderOverlay').remove();
}
});
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>

There is a reason semantic HTML is a thing - there is an element that does this natively - the input type="radio".
<h1>Device</h1>
<div class="wrap">
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-apple"></i>
<div class="borderOverlay"></div>
</label>
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-android"></i>
<div class="borderOverlay"></div>
</label>
</div>
We place them within a label, so clicking anywhere within the label triggers the radio.
When a radio is pressed, all other radios with the same 'name' will be updated.
This will also accept input from space/enter not only click (as do <button> elements). Simply adding an 'click' eventListener will also apply for these keys.
And are also focusable by keyboard navigation (using the Tab Key), which is quite important but gets omitted way too much.
You can easily hide the actual buttons:
.wrap > label{
position: relative;
}
.myRadio {
position: absolute;
opacity: 0;
z-index: -1;
}
And also style them directly with pure CSS:
.myRadio:checked ~ .borderOverlay {
/* rules for showing borderOverlay animation */
}
And loop them when a change occurs:
var radioButtons = Array.from(document.getElementsByClassName('myRadio'));
radioButtons.map(function(radio){
radio.addEventListener('change', function(e){
var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
// do something with **selectedTarget**
};
});

jQuery function firing only once,

I want to have 2 search box styles, one above 1000px and one below 1000px. I made that available through media queries in CSS, and then I put function on click on my element, but its only firing once, and then I need to refresh the page for it to act again. I am new to all of this, and I've searched for solutions to this problem for eight hours. I think the problem is caused by search-form--active when you click on search-trigger. But I don't know how to disable this function when browsing in under 1000px wide.
I’m working on WordPress, already created theme, called Yuuta.
$(document).on('click', '.search-trigger', function() {
$('.search-overlay').addClass('show');
if ($('.site-header .search-form').hasClass('search-form--active')) {
/* hide search field */
$('.site-header .search-form').removeClass('search-form--active');
} else {
/* show search field */
$('.site-header .search-form').addClass('search-form--active');
/* focus search field */
$('.site-header .search-field').focus();
}
/* show/hide search form via search icon */
if ($('.site-header .search-trigger').hasClass('search-form--active')) {
/* hide search field */
$('.site-header .search-trigger').removeClass('search-form--active');
} else {
/* show search field */
$('.site-header .search-trigger').addClass('search-form--active');
}
});
.search-trigger {
position: absolute;
right: 0.5em;
top: 28px;
width: 40px;
text-align: center;
}
#media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
}
.search-trigger:before::after {
clear: both;
content: "";
display: table;
}
.search-trigger.search-form--active:before {
font-size: 1.6em;
line-height: .9em;
content: "\4d";
}
.search-trigger:hover {
color: inherit;
}
.site-header .search-form {
position: absolute;
right: 65px;
bottom: 150px;
width: 90px;
opacity: 0;
}
.site-header .search-form input.search-field {
width: 5em;
font-size: 1em;
border-width: 0;
padding: .4em .4em .4em 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
position: relative;
bottom: 5px;
}
.site-header .search-form .search-submit {
display: none;
}
.site-header .search-form.search-form--active {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
display: block;
top: 28px;
opacity: 1;
}
<a class="search-trigger"></a>
<?php get_search_form(); ?>

Responsive show/hide menu malfunctioning

In a new design I've been working on, there is a sidebar, which is meaning to be shown fully while browsing using desktop. On mobile, the menu is meant to be collapsed into a button, which, when clicked, is supposed to expand. Former function seems to work perfectly fine, but latter doesn't; when you press this button, nothing seems to happen at all.
Would anyone mind helping me look into this and figure out what the issue is, please?
function(window, document) {
var layout = document.getElementById('layout'),
f - menu = document.getElementById('f-menu'),
f - menuLink = document.getElementById('f-menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
f - menuLink.onclick = function(e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(f - menu, active);
toggleClass(f - menuLink, active);
};
}(this, this.document));
body {
color: #777;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#f-menu,
.f-menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
padding-left: 0;
}
#layout.active {
position: relative;
left: 150px;
}
#layout.active #f-menu {
left: 150px;
width: 150px;
}
#layout.active .f-menu-link {
left: 150px;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
margin-bottom: 50px;
line-height: 1.6em;
}
.header {
margin: 0;
color: #333;
text-align: center;
padding: 2.5em 2em 0;
border-bottom: 1px solid #eee;
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 300;
}
.header h2 {
font-weight: 300;
color: #ccc;
padding: 0;
margin-top: 0;
}
.content-subhead {
margin: 50px 0 20px 0;
font-weight: 300;
color: #888;
}
/*
The `#f-menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#f-menu {
margin-left: -150px;
/* "#f-menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
/* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#f-menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #f-menu.
*/
#f-menu .pure-menu,
#f-menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#f-menu .pure-menu ul,
#f-menu .pure-menu .f-menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#f-menu .pure-menu li a:hover,
#f-menu .pure-menu li a:focus {
background: #333;
}
/*
This styles the selected menu item `<li>`.
*/
#f-menu .pure-menu-selected,
#f-menu .pure-menu-heading {
background: #2A759B;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#f-menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#f-menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.f-menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.f-menu-link {
position: fixed;
display: block;
/* show this only on small screens */
top: 0;
left: 0;
/* "#f-menu width" */
background: #000;
background: rgba(0, 0, 0, 0.7);
font-size: 10px;
/* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.f-menu-link:hover,
.f-menu-link:focus {
background: #000;
}
.f-menu-link span {
position: relative;
display: block;
}
.f-menu-link span,
.f-menu-link span:before,
.f-menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.f-menu-link span:before,
.f-menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.f-menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
#media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px;
/* left col width "#f-menu" */
left: 0;
}
#f-menu {
left: 150px;
}
.f-menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .f-menu-link {
left: 150px;
}
}
<a href="#f-menu" id="f-menuLink" class="f-menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="f-menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="#">Community</a>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</div>
</div>
<div id="layout">
Content goes here.
</div>

I asked in the comments about your variables and specifically "do they throw exceptions?"
They actually do:
SyntaxError: Unexpected token -
The variable names are invalid. Update those and your JS will start working. Here's a Fiddle with updated variable names:
http://jsfiddle.net/jpattishalljr/50jnq2hf/