We Keep Coding

Full screen overlay menu toggle

I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay.
I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: 0.35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: 0.35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
<div class='container'>
<h1>Top right corner, click it!</h1>
</div>
<div class='button_container' id='toggle'>
<span class='top'></span>
<span class='middle'></span>
<span class='bottom'></span>
</div>
<div class='overlay' id='overlay'>
<nav class='overlay-menu' id="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>

I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As 'fulloverlay' is the Id of the parent nav element so instead of selecting it like:
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
You can write like this:
$("#fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
then it works.

Set a visit count down using cookies

My site uses an anti-adblock that prevents people from entering it, but no one likes to see advertisements, so I've decided to look for a way to let new visitors use the site a few times before the message to disable adblock appears.
I tried to use cookies to record a number, and every time the person visits subtract the number, delete the old cookie, create a new one with the number subtracted, so when the number is equal to 0 the anti-adblock appears, but it is confusing for me I barely started learning javascript.
Is there any easier way to do this or cookie is the best option? How do I do this?
Sample page of my anti-Adblock: https://www.stackexample.ml/adblock
My anti-adblock code:
NOTE: My website is static.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
if( window.canRunAds === undefined ){
div2.style.display="block"
div3.style.display="none"
b.style.display="block"
span.style.color="#d06079"
span.innerHTML="Desative o Adblock"
}else{
div1.style.display="block"
div3.style.display="none"
span.innerHTML="Adblock desativado"
//código para liberar a pagina aqui
}
};
.cont {
width:320px;
margin:18% auto;
}
#b {
border:1px solid #ba5269;
background-color:#d06079;
color:white;
border-radius:6px;
padding:15px;
font-size:18px;
display:none;
margin:25px auto;
}
#on{
display:none;
margin:22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display:none;
}
#v {
font-family:arial;
font-size:35px;
color:green;
display:block;
text-align:center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide{
display:none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before, .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
.sa-icon.sa-success {
border-color: transparent\9;
}
.sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9;
}
.sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9;
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
#-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
#-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right: 4px solid #a5d7a7;
border-bottom: 4px solid #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
margin:22px auto;
}
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes loading {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right: 6px solid #fff;
border-bottom: 6px solid #fff;
height: 100%;
width: 100%;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-ms-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</body>
</html>

If you are looking to maintain a counter, you can use Local Storage for the same.. for example,
Note: You won't be able to run this code here due to the restrictions by StackOverflow, as am using localStorage
You can see it in action here instead (keep refreshing the page for 3 times and you'll see) - https://codepen.io/anon/pen/qvaYQK
Here, am initializing the counter of adcounter with 1 if not found, if found, I just increment it if the ads are blocked, if it crosses 3, I just show the modal to the user. If user disables the adblock, I reset the counter back to 0.
I've also refactored your code a bit, there is a massive chunk of code which can still be refactored.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
var getWrapper = document.getElementById('ad-blocker-modal');
var showModalAfterVisits = 3; //show modal after 3 visits
var getCounter = localStorage.getItem('adcounter');
if(!getCounter) {
localStorage.setItem('adcounter', 0); // initialize Local Storage
}
function checkForAdBlocker() {
if (!window.canRunAds) {
if(getCounter < 3) {
//keep incrementing the counter unless the counter reaches 3 and return
localStorage.setItem('adcounter', ++getCounter);
return;
}
getWrapper.classList.remove('hide');
div2.style.display = "block"
div3.style.display = "none"
b.style.display = "block"
span.style.color = "#d06079"
span.innerHTML = "Desative o Adblock"
} else {
localStorage.setItem('adcounter', 0); //reset if adblock is disabled
div1.style.display = "block"
div3.style.display = "none"
span.innerHTML = "Adblock desativado"
}
}
checkForAdBlocker();
};
.cont {
width: 320px;
margin: 18% auto;
}
.hide {
display: none;
}
#ad-blocker-modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}
#b {
border: 1px solid #ba5269;
background-color: #d06079;
color: white;
border-radius: 6px;
padding: 15px;
font-size: 18px;
display: none;
margin: 25px auto;
}
#on {
display: none;
margin: 22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display: none;
}
#v {
font-family: arial;
font-size: 35px;
color: green;
display: block;
text-align: center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide {
display: none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before,
.sa-icon.sa-success::after {
content: '';
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
transform: rotate(-45deg);
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
transform: rotate(-45deg);
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
animation: rotatePlaceholder 4.25s ease-in;
}
.animateSuccessTip {
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
animation: animateSuccessLong 0.75s;
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
transform: rotate(-45deg);
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right-color: a5d7a7;
border-bottom-color: #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
animation: loading 1s infinite linear;
margin: 22px auto;
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right-color: #fff;
border-bottom: #fff;
height: 100%;
width: 100%;
border-radius: 50%;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
Some content on my Website
<div id="ad-blocker-modal" class="hide">
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</div>
</body>
</html>

From Sass into Css

Can someone help me to convert this sass code into just clear css,of course need animation to still work,i think that here will be needed a bit more js code,beforehard thanks.
https://codepen.io/anon/pen/ENqppw
<div class="search">
<span class="search_icon"></span>
</div>
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin:22px;
transition: all .3s ease;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search_icon').on('click', function() {
$('.search').toggleClass('open clicked');
});
});

.search {
width: 100px;
height: 100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin: 50px;
position: absolute;
}
.search.open {
width: 90%;
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin: 22px;
transition: all .3s ease;
}
.search_icon:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.search_icon:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open .search_icon {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left: 95%;
}
.open .search_icon:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
.open .search_icon:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}

here you go, you can use this site to help you with converting http://www.sassmeister.com/
.search {
width: 100px;
height: 100px;
background: #3a3a3a;
transition: all 0.4s ease;
margin: 50px;
position: absolute;
}
.search.open {
width: 90%;
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid red;
display: block;
position: relative;
margin: 22px;
transition: all .3s ease;
}
.search_icon:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.search_icon:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: red;
transform: rotate(-45deg);
transition: all .3s ease;
}
.open .search_icon {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left: 95%;
}
.open .search_icon:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
.open .search_icon:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}

How to make a concentric circle on an existing circle which shows on anchor tag click

I have a small circle on top of which is a "+" button. When clicked, a circle shows up (a dotted one) and the data from my database is shown along its circumference.
Now I want another concentric circle outside of this, and it should also show on the button click, along with the first circle.
function toggleDiv(divId){
$("#"+divId).toggle();
}
.post-share{
display: block;
width: 74px;
height: 34px;
margin: 40px 0px 0px 0px;
background: #3e599a;
text-decoration: none;
width: 110px;
font: 12px;
color: #FFFFFF;
position: relative;
position:fixed;
top: 40%;
left: 50%;
z-index:99;
text-align: center;
vertical-align: middle;
}
.post-share span{
width: 15px;
height: 18px;
padding: 3px;
display: block;
position: absolute;
top: -24px;
right: 0;
background-color: #080563;
color: #FFFFFF;
font-weight: bold;
vertical-align: middle;
font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
text-indent: 0;
}
.social-buttons-text {
font-size: 4px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
text-align: left;
}
.sphere{
height: 80px;
width:80px;
border-radius: 50%;
}
/* for circle */
* {
padding: 0px;
margin: 0px;
transition: 1s;
}
html {
background-color: hsla(190, 60%, 50%,1);
overflow: hidden;
}
#wrapper {
margin: 200px auto;
height: 200px;
width: 600px;
}
.bubble {
border-radius: 100%;
height: 40px;
width: 40px;
display: inline-block;
margin: 0px 15px 0px 15px;
}
.animate {
animation: scaleWobble 2s infinite alternate ease;
}
#red {
background-color: hsla(350, 50%, 50%, 1);
}
#yellow {
background-color: hsla(70, 50%, 50%, 1);
}
#green {
background-color: hsla(120, 70%, 40%, 1);
}
#keyframes scaleWobble {
from {
height: 100px;
width: 100px;
}
to {
height: 125px;
width: 125px;
}
}
/**
* Position icons into circle (SO)
* http://stackoverflow.com/q/12813573/1397351
*/
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
.deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); }
.deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
.deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
.deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
.deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); }
.deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
.deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); }
.deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); }
.deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
.deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); }
.deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); }
.deg180 { transform: translate(-12em); }
.deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); }
.deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); }
.deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
.deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); }
.deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); }
.deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); }
.deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); }
.deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); }
/* this is just for showing the angle on hover */
.circle-container a:not(.center)::before {
position: absolute;
width: 7em;
color: white;
opacity: 0;
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 1px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after{
opacity: 1;
}
.circle-container a:not(.center)::after {
position: absolute;
left: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: #fffea1;
content: attr(myattri);
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="post-share sphere yellow" id="name">erwerew
<span>+</span>
</span>
<div id="myContent" class='circle-container' style="display:none">
</div>

This may not be 100% the answer you are looking for, but it seems whatever you are doing, you may be making it more complicated then it needs to be.
You can create these circles by using a div with a border-radius:50%;
See this example which i think is acheving what you want with a lot less code.
JsFiddle Demo: https://jsfiddle.net/yfpnbf4z/3/
$("#circleToggle").click(function() {
$("#circle1").fadeToggle("slow");
$("#circle2").fadeToggle("slow");
if ($("#circle1").is(":hidden")) {
$("#circleToggle").html("+");
} else {
$("#circleToggle").html("-");
}
});
.container {
background: #333;
position: relative;
height: 500px;
width: 500px;
}
.button {
position: absolute;
left: 230px;
top: 5px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
background: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
}
.circle {
border-radius: 50%;
border: 1px dashed red;
display: none;
}
#circle1 {
position: absolute;
top: 150px;
left: 150px;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
color: #fff;
}
#circle2 {
position: absolute;
top: 50px;
left: 50px;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="button" id="circleToggle">+</div>
<div class="circle" id="circle1">Some data</div>
<div class="circle" id="circle2"></div>
</div>
I hope this is useful to you mate.

how to make a search bar responsive using jquery or css3

function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('.search-input').val('');
}
}
.search-wrapper {
position: absolute;
left: 79%;
top: -25px;
transform: translate(-50%, 50%);
}
.search-wrapper .input-holder {
height: 70px;
width: 70px;
overflow: hidden;
background: black;
border-radius: 16px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width: 400px;
border-radius: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width: 100%;
height: 50px;
padding: 0 70px 0 20px;
position: absolute;
top: 0;
left: 0;
background: transparent;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
opacity: 0;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width: 70px;
height: 70px;
border: none;
border-radius: 6px;
background: #fff;
padding: 0;
outline: none;
position: relative;
z-index: 2;
float: right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height: 50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width: 22px;
height: 22px;
display: inline-block;
vertical-align: middle;
position: relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before,
.search-wrapper .input-holder .search-icon span::after {
position: absolute;
content: '';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
background: #FE5F55;
border-radius: 2px;
left: 9px;
top: 18px;
}
.search-wrapper .input-holder .search-icon span::after {
width: 14px;
height: 14px;
border: 4px solid #FE5F55;
border-radius: 50%;
left: 0;
top: 0;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top: 24px;
right: 20px;
width: 25px;
height: 25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right: -50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before,
.search-wrapper .close::after {
position: absolute;
content: '';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search-wrapper">
<div class="input-holder">
<input type="text" class="search-input" placeholder="Type to search" />
<button class="search-icon" onclick="searchToggle(this, event);"><span></span>
</button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
After a lot of research, changes I finally managed to make and position my search bar. But according to me it is not performing the search function. for example, if I type anything in it like 'home' and press the search icon nothing happens. So I want to ask whether I am wrong i.e. the search function is working and secondly I want to make it responsive like Google's search bar. I mean I want it to remember searches and also shorten the results as I type.
Any help would be highly appreciated. Thanks :)

I highly recommend you to use Bootstrap. It only uses CSS and is leightweight. You can find it well documented at Bootstrap Forms and W3S. If you don't want to use a Framework you can try building something for yourself. For that purpose you can simply look again at bootstrap (or another CSS Framework) and copy whatever you want to use.
Again, you should use a CSS Framework for responsive designs, they help alot and make your life easier.
Regards, Megajin