I'm currently working on a Wordpress site and I can't get the active checkbox JS code to add a checked class to my parent element.
The snippet works perfectly fine, but why does it not work on my Wordpress site?
$(":checkbox").on('click', function() {
$(this).parent('span').toggleClass("checked");
});
span.cb-style input[type=checkbox] {
cursor: pointer;
background: 0 0;
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
float: left;
border: none;
opacity: 0;
}
span.cb-style {
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
position: relative;
top: 4px;
border: 3px solid #ddd;
background: #fff;
visibility: visible;
margin-right: 10px
}
span.cb-style:hover {
background: #ddd
}
.checked {
background-color: #ff0000!important;
border-color: #ff0000!important;
}
.checked:after {
font-family: "Font Awesome 5 Free";
content: 'x';
color: white;
position: absolute;
font-size: 25pt;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: -75% auto;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tnp-field tnp-field-checkbox tnp-field-privacy">
<span class="cb-style">
<input type="checkbox" name="ny" required="" class="tnp-privacy" id="tnp-privacy">
</span>
<label for="tnp-privacy">
<a target="_blank" href="#">Checkbox Sample Text Bla.</a>
</label>
</div>
Related
I am using Concreate5 version 8.5.4 and PHP version 7.4 on my VPS.
I want to add a pop-up of notice to my users.
When I am adding this code in Global Region > HTML Block
then my site covered with black color and am not able to do anything.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
A simple pop-up!
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Is there any mistake in this coding, as I am reviewing this code then I am not able to pin point the actual part of code.
Please review this code and help me fix it for fine working.
Thanks
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!
Scenario 1:
Scenario 2:
HTML:
<th *ngFor="let field of columnFields">
<a class="column-label">
<div class="custom-tooltip">
<div class="tooltip__initiator">{{field.name}}</div>
<div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
</div>
</a>
</th>
STYLE:
.custom-tooltip {
position: relative;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip__item {
font-family: "ABeeZee";
font-size: 13px;
line-height: 18px;
position: absolute;
position: absolute;
min-width: 132px;
max-width: 320px;
text-align: center;
padding: 12px;
visibility: hidden;
opacity: 0;
color: white;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
z-index: 6;
background: blue;
border: 1px solid blue;
border-radius: 8px;
white-space: break-spaces;
inline-size: max-content;
top: calc(70% + 1em);
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
left: 50%;
visibility: visible;
opacity: 1;
}
.custom-tooltip .tooltip__item:after {
left: 50%;
top: -0.5em;
border-width: 0 1em 0.6em 1em;
border-color: transparent transparent blue transparent;
border-radius: 8px;
}
I have a span instead of plaseholder, When I mouse over on the items in the autofill list, I want to also hide the span.placeholder at the sametime such as default placeholder.
form {
margin: 0 auto;
width: 100%;
text-align: center;
}
form input {
position: absolute;
font-size: 16px;
height: 100%;
display: block;
background: transparent;
border: none;
margin: 0;
outline: none;
width: calc(100% - 10px);
top: 0;
left: 0;
padding: 0px 5px;
}
div.inputs_div {
position: relative;
width: 200px;
height: 22px;
display: block;
background: #fff;
padding: 5px 5px;
border: 1px solid black;
}
span.placeholder {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
display: block;
font-size: 16px;
pointer-events: none;
}
<form>
<div class="inputs_div">
<input type="text" name="username" />
<span class="placeholder">User Name</span>
</div>
</form>
You can use input and check if input is empty or not , if yes than remove text else show text
Here used display property you can use according to preferences like visibility , color: white
It will be direct answer if you provided the autocomplete code but you can use input focus to trigger and check if input is filled or not
function toogleText() {
var text = document.getElementById("placeholder1");
var inputDemo = document.getElementById("inputDemo").value;
if (inputDemo != "") {
text.style.display = "none";
} else {
text.style.display = "block";
}
}
document.getElementById("inputDemo").addEventListener("input", toogleText)
form {
margin: 0 auto;
width: 100%;
text-align: center;
}
form input {
position: absolute;
font-size: 16px;
height: 100%;
display: block;
background: transparent;
border: none;
margin: 0;
outline: none;
width: calc(100% - 10px);
top: 0;
left: 0;
padding: 0px 5px;
}
div.inputs_div {
position: relative;
width: 200px;
height: 22px;
display: block;
background: #fff;
padding: 5px 5px;
border: 1px solid black;
}
span.placeholder {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
display: block;
font-size: 16px;
pointer-events: none;
}
<form>
<div class="inputs_div">
<input type="text" name="username" id="inputDemo" />
<span class="placeholder" id="placeholder1">User Name</span>
</div>
</form>
I am new to Javascript and I've recently been trying a sidebar menu.
I am trying to make the menu come out from the left side and overlay the main content when the hamburger icon is clicked. I have managed to make the menu overlay the main content but when it comes to javascript animation, I have tried a couple of things and search on internet but found no solutions to my problem.
I am trying to make so that when the .hamburger button is clicked, the .nav-links div's width changes from 0px to 300px.
Here's my code and a couple of Javascript functions I have tried.
Here's my code
HTML :
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>`
CSS
`
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
JavaScript
document.getElementById('hamburger') = function openMenu(){
document.getElementById('nav-links').menu.style.width="300px";
}
function openMenu(){
if(document.getElementById('nav-links').click === true)
document.getElementById('nav-links').menu.style.width="300px";
}
Try this:
document.getElementsByClassName('hamburger')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "300px"
})
document.getElementsByClassName('CloseBTN')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "0"
})
.line {
width: 30px;
height: 3px;
background: white;
border: 5px solid black;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
color: white;
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>
Some of your javascript was messed up so I fixed that, and I added some css to make everything (such as the actual menu lines itself) visible.