We Keep Coding

How to change/toggle a icon inside a button using bootstrap 5 and jquery?

So I want to change the icon inside my button when it is click so the first icon is <i class="fas fa-bars"></i> and the second icon onclick should be <i class="fas fa-times"></i> So how can I achieve this? On my button click I want the bootstrap offcanvas opening from the left so I have added offcanvas attributes in my html code
button_div is my main button please ignore rest of CSS
I just want to know how to change/toggle icon inside a button when the button is clicked
body{
margin: 0;
padding: 0;
}
#media screen and (min-width: 300px) and (max-width: 500px){
.hero_image{
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div{
width:50px !important;
height:50px !important;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
display: block !important;
border: none;
}
.nav_tabs{
margin-top: 2em;
}
.hero_name{
margin-left: auto !important;
}
.left_bar{
width: 80% !important;
padding-left: 1.5em !important;
padding-right: 1.5em !important;
}
.socials{
width: 100%;
}
}
#media screen and (min-width: 500px) and (max-width: 700px){
.hero_image{
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div{
width:100px;
height:100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
display: block !important;
border: none;
}
.nav_tabs{
margin-top: 2em;
}
.hero_name{
margin-left: 1em !important;
}
}
#media screen and (min-width: 700px) and (max-width: 900px){
.hero_image{
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div{
width:100px;
height:100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
display: block !important;
border: none;
}
.nav_tabs{
margin-top: 2em;
}
}
}
#media screen and (min-width: 900px) and (max-width: 920px){
.hero_image{
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div{
width:100px;
height:100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
border: none;
display: block !important;
}
.nav_tabs{
margin-top: 2em;
}
}
/* .fa-times{
display: none !important;
}
.button_div:active .fa-times{
display: block !important;
}
.button_div:focus .fa-times{
display: block !important;
}
.button_div:active .fa-bars{
display: none !important;
}
.button_div:focus .fa-bars{
display: none !important;
} */
.fas .fa-times{
display: block !important;
}
.hero_name{
display: flex;
height: 100vh;
align-items: center;
margin-left: 3em;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 4em;
}
.button_div{
width:100px;
height:100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
right: 0;
margin-top: 1em;
margin-right: 1em;
display: none;
}
.left_bar{
height: 100vh;
background-color: #030C13;
margin: 0;
}
.hero_image{
position: relative;
height: 100vh;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-position: center;
background-position: right;
background-size: cover;
background-repeat: no-repeat;
}
.img-thumbnail{
border: none !important;
}
.profile_pic {
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: 3em;
display: flex;
justify-content: center;
box-shadow: -1px 0px 0px 14px #262837
}
.name{
display: flex;
justify-content: center;
margin-top: 1em;
color: #FCFEFF;
}
.fb_div{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.tw_div{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
}
.lg_div{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.fa-twitter {
font-size: 20px;
left: 16px;
position: absolute;
top: 15px;
color: white;
cursor: pointer;
}
.fa-facebook-f {
font-size: 20px;
left: 19px;
position: absolute;
top: 15px;
color: white;
cursor: pointer;
}
.tw_div:hover{
background-color: #377DB3;
}
.tw_div:hover .fa-twitter{
color:white ;
}
.fb_div:hover{
background-color: #377DB3;
}
.fb_div:hover .fa-facebook-f{
color: white;
}
.lg_div:hover{
background-color: #377DB3;
}
.lg_div:hover .fa-instagram{
color: white;
}
.fa-instagram {
font-size: 24px;
left: 15px;
position: absolute;
top: 12px;
color: white;
cursor: pointer;
}
.fa-skype{
font-size: 24px;
left: 15px;
position: absolute;
top: 12px;
color: white;
cursor: pointer;
}
.fa-linkedin-in{
font-size: 24px;
left: 15px;
position: absolute;
top: 12px;
color: white;
cursor: pointer;
}
.sky_div{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.sky_div:hover{
background-color:#377DB3 ;
}
.sky_div:hover .fa-skype{
color: white;
}
.ld_div{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.ld_div:hover{
background-color:#377DB3 ;
}
.ld_div:hover .fa-linkedin-in{
color: white;
}
.nav_tabs{
display: flex;
}
.nav-link{
color: #92959D ;
margin-bottom: 1em
}
.nav-link:hover{
color: white;
}
.fa-home{
color: #377DB3;
font-size:1.5em;
}
.fa-user{
color: #5F656F;
font-size:1.5em;
}
.nav-link:hover .fa-user{
color: #377DB3;
}
.fa-file{
color: #5F656F;
font-size:1.5em;
}
.nav-link:hover .fa-file{
color: #377DB3;
}
.nav-link:hover .fa-list-alt{
color: #377DB3;
}
.fa-list-alt{
color:#5F656F ;
font-size:1.5em;
}
.nav-link:hover .fa-server{
color: #377DB3;
}
.fa-server{
color: #5F656F;
font-size:1.5em;
}
.nav-link:hover .fa-envelope{
color: #377DB3;
}
.fa-envelope{
color: #5F656F;
font-size:1.5em;
}
.nav-item a{
margin-left: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 8</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
<div class="icon_div">
<span id='myIcon' ><i class="fas fa-bars"></i></span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am posting my code snippet below

$(document).on('click', '.toggleBtn', function(){
$('#myIcon').children().toggleClass('fa-times')
})

There are 2 way to do that, first you can make 2 css class one simple with font bars and when have class .clicked switch to other content of font awesome wich is times
#myIcon i::before {
content: "\f0c9";
}
#myIcon.clicked i::before {
content: "\f00d";
}
Then with javascript toggle class .clicked on $('#myIcon').toggleClass('clicked');
OR
just make a var = 0; and toggle between value
let toggleVar = 0; // somewhere outside function on click
if(toggleVar === 0) {
$('i').removeClass('fa-bars').addClass('fa-times');
toggleVar = 1;
} else {
$('i').removeClass('fa-times').addClass('fa-bars');
toggleVar = 0;
}

You just need to add a JavaScript function and handle the button onClick
function toggleIcon() {
const child = document.getElementById('myIcon').childNodes[0];
if (child.className === 'fas fa-bars')
child.className = "fas fa-times";
else
child.className = "fas fa-bars";
}
body {
margin: 0;
padding: 0;
}
#media screen and (min-width: 300px) and (max-width: 500px) {
.hero_image {
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div {
width: 50px !important;
height: 50px !important;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
display: block !important;
border: none;
}
.nav_tabs {
margin-top: 2em;
}
.hero_name {
margin-left: auto !important;
}
.left_bar {
width: 80% !important;
padding-left: 1.5em !important;
padding-right: 1.5em !important;
}
.socials {
width: 100%;
}
}
#media screen and (min-width: 500px) and (max-width: 700px) {
.hero_image {
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
display: block !important;
border: none;
}
.nav_tabs {
margin-top: 2em;
}
.hero_name {
margin-left: 1em !important;
}
}
#media screen and (min-width: 700px) and (max-width: 900px) {
.hero_image {
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
display: block !important;
border: none;
}
.nav_tabs {
margin-top: 2em;
}
}
}
#media screen and (min-width: 900px) and (max-width: 920px) {
.hero_image {
height: 100vh !important;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
background-position: right !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
.button_div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
top: 0;
right: 0;
margin-top: 1em;
border: none;
display: block !important;
}
.nav_tabs {
margin-top: 2em;
}
}
/* .fa-times{
display: none !important;
}
.button_div:active .fa-times{
display: block !important;
}
.button_div:focus .fa-times{
display: block !important;
}
.button_div:active .fa-bars{
display: none !important;
}
.button_div:focus .fa-bars{
display: none !important;
} */
.fas .fa-times {
display: block !important;
}
.hero_name {
display: flex;
height: 100vh;
align-items: center;
margin-left: 3em;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 4em;
}
.button_div {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #66ACDC;
position: absolute;
right: 0;
margin-top: 1em;
margin-right: 1em;
display: none;
}
.left_bar {
height: 100vh;
background-color: #030C13;
margin: 0;
}
.hero_image {
position: relative;
height: 100vh;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-position: center;
background-position: right;
background-size: cover;
background-repeat: no-repeat;
}
.img-thumbnail {
border: none !important;
}
.profile_pic {
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: 3em;
display: flex;
justify-content: center;
box-shadow: -1px 0px 0px 14px #262837
}
.name {
display: flex;
justify-content: center;
margin-top: 1em;
color: #FCFEFF;
}
.fb_div {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.tw_div {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
}
.lg_div {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.fa-twitter {
font-size: 20px;
left: 16px;
position: absolute;
top: 15px;
color: white;
cursor: pointer;
}
.fa-facebook-f {
font-size: 20px;
left: 19px;
position: absolute;
top: 15px;
color: white;
cursor: pointer;
}
.tw_div:hover {
background-color: #377DB3;
}
.tw_div:hover .fa-twitter {
color: white;
}
.fb_div:hover {
background-color: #377DB3;
}
.fb_div:hover .fa-facebook-f {
color: white;
}
.lg_div:hover {
background-color: #377DB3;
}
.lg_div:hover .fa-instagram {
color: white;
}
.fa-instagram {
font-size: 24px;
left: 15px;
position: absolute;
top: 12px;
color: white;
cursor: pointer;
}
.fa-skype {
font-size: 24px;
left: 15px;
position: absolute;
top: 12px;
color: white;
cursor: pointer;
}
.fa-linkedin-in {
font-size: 24px;
left: 15px;
position: absolute;
top: 12px;
color: white;
cursor: pointer;
}
.sky_div {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.sky_div:hover {
background-color: #377DB3;
}
.sky_div:hover .fa-skype {
color: white;
}
.ld_div {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1D212B;
padding: 1.5em;
margin-left: 1em;
}
.ld_div:hover {
background-color: #377DB3;
}
.ld_div:hover .fa-linkedin-in {
color: white;
}
.nav_tabs {
display: flex;
}
.nav-link {
color: #92959D;
margin-bottom: 1em
}
.nav-link:hover {
color: white;
}
.fa-home {
color: #377DB3;
font-size: 1.5em;
}
.fa-user {
color: #5F656F;
font-size: 1.5em;
}
.nav-link:hover .fa-user {
color: #377DB3;
}
.fa-file {
color: #5F656F;
font-size: 1.5em;
}
.nav-link:hover .fa-file {
color: #377DB3;
}
.nav-link:hover .fa-list-alt {
color: #377DB3;
}
.fa-list-alt {
color: #5F656F;
font-size: 1.5em;
}
.nav-link:hover .fa-server {
color: #377DB3;
}
.fa-server {
color: #5F656F;
font-size: 1.5em;
}
.nav-link:hover .fa-envelope {
color: #377DB3;
}
.fa-envelope {
color: #5F656F;
font-size: 1.5em;
}
.nav-item a {
margin-left: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 8</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button onClick="toggleIcon()" type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
<div class="icon_div">
<span id='myIcon' ><i class="fas fa-bars"></i></span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

It is very simple, becouse you have jQuery tag, I used it for example like this:
Code below define the element you want to click
$( ".toggleBtn" )
after that you need to define event listener on selected element like this :
$( ".toggleBtn" ).click(function() {})
inside body of the function you first need to define element with class that you want to toggle:
$( ".toggleBtn" ).click(function() {$("#myIcon")})
and I would remove this 'span' element so your html will be like this:
<i id="myIcon" class="fas fa-bars"></i>
and now just add jQuery 'toggleClass' method like this:
$( ".toggleBtn" ).click(function() {$("#myIcon").toggleClass("fa-bars fa-times")})
This should solve your problem.
Go to jQuery docs .toggleClass() and read about it here.

close button isn't working on popup window

I've made a popup window by searching on google. I don't have too much knowledge about web development. By ready and experimenting multiple website pages I've made a Modal for my website. I've set everything in that popup as my per needs and it works fine except the close button.
Can you please be kind to take a look on my following code and guide me how can I make close button working?
jQuery(document).ready(function() {
jQuery("#dialog-message").css("display", "block");
jQuery("#close-btn").click(function() {
jQuery(this).parents('#dialog-message').hide();
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.exit_popup-sec {
width: 915px;
position: relative;
padding: 0px;
margin: 0 auto;
}
.exit_popup-sec .exit_popup-content {
background-color: #fff;
margin: 0px;
padding: 34px 62px 60px 62px;
box-sizing: border-box;
width: 100%;
float: left;
-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
}
.exit_popup-sec .exit_popup-content h2 {
margin: 0px;
padding: 0px;
color: #ffff00;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
width: 400px;
float: left;
}
.exit_popup-sec .exit_popup-content h3 {
margin: 20px 0 30px 0;
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
width: 400px;
float: left;
line-height: 26px;
}
.exit_popup-sec .exit_popup-content .getoffer-btn {
width: 50%;
padding: 20px 0px;
margin: 0px;
clear: both;
float: left;
border: 0px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
text-shadow: 0 2px 2px #000;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
background: -moz-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
;
background: -webkit-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
background: linear-gradient(to bottom, #337ab7 1%, #4f4fe8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6c00', endColorstr='#ff0000', GradientType=0);
cursor: pointer;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:hover {
background: #ff0000;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:focus {
outline: none;
}
.popup-graybox {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100vh;
z-index: 99999;
align-items: center;
display: flex;
box-sizing: border-box;
overflow: auto;
}
.exit_popup-sec .booknow-popup-clsbtn {
font-size: 14px;
line-height: 18px;
width: 28px;
height: 28px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #FFF;
position: absolute;
right: -7px;
top: -14px;
border: 0px;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.27);
cursor: pointer;
}
.exit_popup-sec .booknow-popup-clsbtn:hover {
color: #fff;
background: #252525;
}
#media only screen and (max-width:815px) {
.exit_popup-sec {
width: 95%;
}
.exit_popup-sec .exit_popup-content {
padding: 20px 30px 50px 30px;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 80px;
}
.exit_popup-sec .exit_popup-content h3 {
width: 350px;
}
}
#media only screen and (max-width:480px) {
.exit_popup-sec .exit_popup-content h3 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 30px;
}
.exit_popup-sec .exit_popup-content h3 {
font-size: 14px;
line-height: 30px;
}
}
.ui-widget-content a {
color: #72d6d6;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-message">
<section class="popup-graybox">
<div class="exit_popup-sec">
<div class="exit_popup-content" style="background: #252525 url(https://pakxchange.com/pop-up/webmoney.png) no-repeat right 0;">
<h2 data-edit="text">Webmoney Account Verification</h2>
<h3 data-edit="text">We are the only Country Representative of Webmoney Payment Network in Pakistan. We verify webmoney users, their documents and issue them Initial & Personal passports. READ MORE</h3>
<button class="getoffer-btn" type="submit">Our Certified Webmoney Account</button>
<button class="booknow-popup-clsbtn close-btn close-btn">X</button>
</div>
</div>
</div>
</section>

jQuery(document).ready(function() {
jQuery("#dialog-message").css("display", "block");
jQuery("#popup_close_btn").click(function() {
jQuery(this).parents('#dialog-message').hide();
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
.exit_popup-sec {
width: 915px;
position: relative;
padding: 0px;
margin: 0 auto;
}
.exit_popup-sec .exit_popup-content {
background-color: #fff;
margin: 0px;
padding: 34px 62px 60px 62px;
box-sizing: border-box;
width: 100%;
float: left;
-webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
-moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.52);
}
.exit_popup-sec .exit_popup-content h2 {
margin: 0px;
padding: 0px;
color: #ffff00;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
width: 400px;
float: left;
}
.exit_popup-sec .exit_popup-content h3 {
margin: 20px 0 30px 0;
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
width: 400px;
float: left;
line-height: 26px;
}
.exit_popup-sec .exit_popup-content .getoffer-btn {
width: 50%;
padding: 20px 0px;
margin: 0px;
clear: both;
float: left;
border: 0px;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
text-shadow: 0 2px 2px #000;
-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.56);
background: -moz-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
;
background: -webkit-linear-gradient(top, #337ab7 1%, #4f4fe8 100%);
background: linear-gradient(to bottom, #337ab7 1%, #4f4fe8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6c00', endColorstr='#ff0000', GradientType=0);
cursor: pointer;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:hover {
background: #ff0000;
}
.exit_popup-sec .exit_popup-content .getoffer-btn:focus {
outline: none;
}
.popup-graybox {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100vh;
z-index: 99999;
align-items: center;
display: flex;
box-sizing: border-box;
overflow: auto;
}
.exit_popup-sec .booknow-popup-clsbtn {
font-size: 14px;
line-height: 18px;
width: 28px;
height: 28px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #FFF;
position: absolute;
right: -7px;
top: -14px;
border: 0px;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.27);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.27);
cursor: pointer;
}
.exit_popup-sec .booknow-popup-clsbtn:hover {
color: #fff;
background: #252525;
}
#media only screen and (max-width:815px) {
.exit_popup-sec {
width: 95%;
}
.exit_popup-sec .exit_popup-content {
padding: 20px 30px 50px 30px;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 80px;
}
.exit_popup-sec .exit_popup-content h3 {
width: 350px;
}
}
#media only screen and (max-width:480px) {
.exit_popup-sec .exit_popup-content h3 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
width: 100%;
box-sizing: border-box;
}
.exit_popup-sec .exit_popup-content h2 {
font-size: 30px;
}
.exit_popup-sec .exit_popup-content h3 {
font-size: 14px;
line-height: 30px;
}
}
.ui-widget-content a {
color: #72d6d6;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-message">
<section class="popup-graybox">
<div class="exit_popup-sec">
<div class="exit_popup-content" style="background: #252525 url(https://pakxchange.com/pop-up/webmoney.png) no-repeat right 0;">
<h2 data-edit="text">Webmoney Account Verification</h2>
<h3 data-edit="text">We are the only Country Representative of Webmoney Payment Network in Pakistan. We verify webmoney users, their documents and issue them Initial & Personal passports. READ MORE</h3>
<button class="getoffer-btn" type="submit">Our Certified Webmoney Account</button>
<button class="booknow-popup-clsbtn close-btn close-btn" id="popup_close_btn">X</button>
</div>
</div>
</div>
</section>
You are refering to close button by id, and you have not assigned any id to the close button. Please assign the id to close button. it should work.
If you want to have to use css selector way to fix this:
$(".booknow-popup-clsbtn").

How to change css dynamically after click? And after again click go back to default?

I have problem little problem... unfortunately big for me yet... I prepared demo for you guys:
$('#rulerSlider').click(function() {
$('#canvas').css({
'margin-left': '0px',
'margin-top': '0px'
});
});
#justdraw {
position: relative;
width: 100%;
height: 200px;
overflow-y: hidden;
margin-left: 20px;
margin-top: 20px
}
#ruler {
position: relative;
width: 100%;
height: 100%;
overflow-y: hidden;
}
#canvas {
position: relative;
width: 100%;
height: 200px;
overflow: scroll;
}
/* slider */
.slider {
bottom: 350px;
left: 300px;
width: 80px;
height: 26px;
background: #333;
/*margin: 20px auto;*/
margin-left: 35px;
position: absolute;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slider:after {
content: 'OFF';
color: #000;
position: absolute;
right: 10px;
bottom: 0px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slider:before {
content: 'ON';
color: #3bb100;
position: absolute;
left: 10px;
top: 1px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slider label {
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
transition: all 0.4s ease;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slider input[type=checkbox] {
visibility: hidden;
}
.slider input[type=checkbox]:checked+label {
left: 43px;
}
/* end slider */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="justdraw">
<div id="ruler">
<div id="canvas">
<canvas id="diagram" width="2100" height="2100">
</canvas>
</div>
</div>
</div>
<div>
<div class="slider">
<input type="checkbox" value="None" id="rulerSlider" name="check" checked />
<label for="rulerSlider"></label>
</div>
</div>
I have problems with the following steps:
0. Slider default state is (ON)
1. Click the slider (OFF)
2. Delete margins 20 from #justdraw
#justdraw {
margin-left: 20px; /* ---> margin-left: 0px; */
margin-top: 20px /* ---> margin-right: 0px; */
}
3. Click the slider again (ON)
4. Add margins 20 to #justdraw
#justdraw {
margin-left: 0px; /* ---> margin-left: 20px; */
margin-top: 0px /* ---> margin-right: 20px; */
}
Can someone help? I am done with this... I tried using javascript a little but without succes.

#Brarod
Try this code to add and remove css, it works properly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn4").click(function(){
$("#toggle1").toggleClass("intro");
});
});
</script>
<style>
.intro {
font-size: 200%;
background-color:black;
text-shadow:1px 2px 3px yellow;
color: red;
}
</style>
<title>Tenth Demo Page</title>
</head>
<body>
<div>
<h3>Toggle Class</h3>
<p id="toggle1">Hello!! This My Tenth Demo Page....<code>◙♣♣♣♣☼╧#á</code></p>
<button id="btn4">Add Toggle Class</button>
</div>
</body>
</html>
I hope above code will be useful for you.
Thank you.

How to create Ticks Marks And Equal Spacing on a Radial Gauge?

I am a Software Developer and working on creating a front End dashboard. I am supposed to create all this without using any plugins. Just pure JQuery and JavaScript and styling. I am developing a radial Gauge from scratch without plugins. I need to add the following to my gauge. Please help me with it.
Tick Marks showing Min Value and Max Value from 0 to 100.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:8s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
<span id="spacing"></span>
</div>
</body>
</html>

Maybe you can try to modify your current needle as a tick?

Meta Viewport Tag options does not work on iOS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fox News</title>
<link rel="icon" href="https://s2.googleusercontent.com/s2/favicons?domain_url=http://foxnews.com" type="image/gif" sizes="16x16">
<style>
body {
margin: auto;
}
.iframe-container {
position: relative;
height: 100%;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
margin: 0px;
border: 0;
}
.social-magnet {
position: fixed;
left: 10px;
font-family: 'Source Sans Pro', sans-serif;
}
.clx_iframe {
position: absolute;
display: block;
bottom: 30px;
left: 5%;
width: 100%;
height: 100px;
font-family: sans-serif;
}
.socialbar {
width: 87px;
height: 87px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: none;
pointer-events: fill;
box-shadow: none;
z-index: 101;
position: absolute;
top: 35%;
left: 147px;
border-radius: 50% !important;
}
.profilePhoto {
width: 87px;
height: 87px;
border-radius: 50%;
border: 3px dashed lightgray;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
object-fit: contain;
}
.messageContainer {
width: 390px;
height: auto;
line-height: 18px;
padding: 10px 15px 10px 15px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
position: absolute;
text-align: center;
color: black;
background-color: white;
text-shadow: none;
pointer-events: fill;
box-shadow: none;
opacity: 1;
z-index: 100;
}
.circle-div {
background: #4C4E60;
height: 20px;
border-radius: 50% !important;
width: 20px;
float: right;
position: relative;
top: -20px;
right: -25px;
color: white;
}
#minimizeToggle {
color: white;
opacity: 0.75;
cursor: pointer;
font-weight: bolder;
font-size: 13px;
text-decoration: none;
}
#logosocial {
float: right;
text-decoration: none;
padding-right: 2.5px;
padding-left: 2.5px;
}
.logoImage {
width: 46px;
height: 20px;
margin-top: -5px;
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.6;
position: relative;
right: -25px;
}
#profileName {
width: 77%;
line-height: 20px;
font-size: 15px;
padding-bottom: 3px;
text-align: left;
color: rgb(34, 34, 34);
display: block;
opacity: 0.6;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
}
#message {
height: 36px;
margin-top: 4px;
display: table;
text-align: left;
overflow: hidden;
width: auto;
letter-spacing: 0.5px;
color: rgb(34, 34, 34);
}
#messageText {
height: auto;
width: 100%;
display: table-cell;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
color: rgb(34, 34, 34);
word-wrap: break-word;
word-break: break-all;
}
#formButton {
float: right;
margin-left: 15px;
cursor: pointer;
color: rgb(255, 255, 255);
background-color: #4C4E60;
width: 90%;
}
.triangle {
box-sizing: border-box;
background: white;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 45%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent white white;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.buttonCTA {
height: 36px;
width: auto;
display: table-cell;
padding: 0 15px 0 15px;
margin: 0 0 0 15px;
border-radius: 5px;
border: 3px solid #4C4E60;
line-height: 35px;
font-weight: 400 !important;
text-decoration: none;
text-align: center;
}
/* Media Queiries */
#media screen and (max-width: 359px) and (min-width: 320px) {
.messageContainer {
width: 300px;
}
.socialbar {
left: 107px;
}
}
#media screen and (max-width: 374px) and (min-width: 360px) {
.messageContainer {
width: 340px;
}
.socialbar {
left: 125px;
}
}
#media screen and (max-width: 413px) and (min-width: 375px) {
.messageContainer {
width: 355px;
}
.socialbar {
left: 133px;
}
}
</style>
</head>
<body>
<div id="iframeWrapper" class="iframe-container">
<iframe id="website_frame" class="iframe" src="https://foxnews.com" sandbox='allow-forms allow-scripts allow-same-origin' allowfullscreen></iframe>
<div class="social-magnet">
<div class="messageContainer triangle">
<div class="circle-div"><a id="minimizeToggle" href="http://foxnews.com">x</a></div>
<a id="logosocial" href="https://clickx.io?utm_source=http://www.clickx.io&utm_campaign=contact&utm_medium=offerwidget" target="_blank">
<div class="logoImage"></div>
<a id="profileName" href="http://foxnews.com" target="_blank">Kannan Devan</a>
</a>
<span id="message">
<span id="messageText" class="text-left">
Good evening. Spent the Evening with a cup of TEA
</span>
</span>
<a class="buttonCTA" id="formButton" href="http://foxnews.com" target="_blank">
Hello Guys
</a>
</div>
<span class="socialbar">
<a id="imageLink" href="http://foxnews.com" target="_blank">
<img id="image_src" class="profilePhoto" src='https://ffb2efd5105ff0aedbc9-9cdacdeebf0faa19b665bf427f0c8092.ssl.cf1.rackcdn.com/assets/new-creator/plus-icon4.png' alt="Brand Logo">
</a>
</span>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var wrapper = document.getElementsByClassName('social-magnet')[0];
var image_wrapper = document.getElementsByClassName('socialbar')[0];
var height = document.getElementsByClassName('messageContainer')[0].offsetHeight;
wrapper.style.bottom = (height + 132).toString() + 'px';
image_wrapper.style.marginTop = (height + 40).toString() + 'px';
</script>
</body>
</html>
I tried to load a website in a plain HTML page using iFrame.
When opening in desktops, the desktop version of the site is opened.
Also when opening in Android phones, the mobile version is loaded, which is the expected behavior.
But the problem is that, when opening in iPhones, the desktop version of the website is loaded.

Setting the iFrame property scrolling='no' made it look like the mobile version of the website to be loaded correctly on iOS.
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "<%= #social_snip.url %>");
ifrm.id = 'ContentFrame';
ifrm.scrolling = 'yes';
if (check) {
document.getElementById('iframeWrapper').className += ' mobile-theme';
}
var IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(IOS) {
ifrm.scrolling = 'no';
}
The above code checks whether the OS is an iOS, if yes it will set the scrolling property of iFrame with a no value.