I have set up a switcher on my website to toggle between normal mouse / pointer & a Lego hand as a cursor and a head as pointer. However, I can only get the cursor to show when clicking the switcher. How can I also add this pointer
(cursor: url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), pointer;)
It should be assigned to the following classes:
a, button, input, input, button, a, input, .slider, .round
I have then also added a snippet, which lets the switcher / checkbox stay on checked...
(You can see that on this video [password is 12345678]: https://easyupload.io/gknxoi)
However after a reload of the page for example, the switcher stays on checked, but the cursor doesn't show up...
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.body.style.cursor = "url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto";
} else {
document.body.style.cursor = "default";
}
});
}
$(function() {
var test = localStorage.input === 'true' ? true : false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>
Is this what you are looking for?
a, input, button, .slider, .round {
margin: 15px;
cursor:url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), auto;
}
<input type="button" value="lego"/>
link to google.com
Use document.querySelector('html') instead of document.body will make it work.
Also, use cursor: auto instead of cursor: default
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.querySelector('html').style.cursor= ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
document.querySelector('label').style.cursor = ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
} else {
document.querySelector('html').style.cursor = "auto";
document.querySelector('label').style.cursor = 'auto'
}
});
}
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>
Related
I have run into a roadblock trying to get this to work. I am attempting to create a switch that toggles an action on/off. For example, when a user toggles on the switch the switch will do Javascript action when it is on the on position and will turn off when the switch is toggled to the off position. That is ultimately my end goal with this. What can I do to make this work, I have been doing trial and error for the last maybe 10 daysish?? What can I say? I am determined. Here is the code, any help is appreciated! Thank you everyone. <3
<!DOCTYPE>
<html>
<body>
<label class = 'switch'>
<input type = 'checkbox' id = 'yet'>
<span class = 'slider'></span>
</label>
</body>
<style>
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet{display: none;}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
</style>
<script>
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
</script>
</html>
Use an onClick event handler, checking the value of this.checked to know whether the input is checked or not.
HTML:
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
JavaScript:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
All together with CSS:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet {
display: none;
}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
<label class = 'switch'>
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
<span class = 'slider'></span>
</label>
I want to modify a url according to the click on the switch button (input checkbox).
I can not change the url on click as for the price. I would like that at the second click, the url (of the button) will return this initial value (url1).
The price is correct ... On click, change is good, but url is not good :/
Thank's for your help
function show() {
var x = document.getElementById("price");
if (x.innerHTML === "59€") {
x.innerHTML = "89€";
} else {
x.innerHTML = "59€";
}
var x = document.getElementById("url1").href;
if (x.href === "url1") {
document.getElementById("url1").href = "url2";
} else {
document.getElementById("url1").href = "url";
}
}
body{font-family:arial, 'sans serif';}
.btn{
background:#000;
padding:10px;
color:#fff;
text-decoration:none;
font-family:arial, 'sans serif';
margin:0 auto;
width:150px;
display:block;
text-align:center;
border-radius:10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3{
text-align:center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
There are 2 problems. First, here:
var x = document.getElementById("url1").href;
if (x.href === "url1") {
You put the href into the x variable, but then you try to examine the x variable's href - but strings don't have a href property. Just examine the x itself instead.
Secondly, the .href property will return the full path of the link. For example, in the Stack Snippet, it returns https://stacksnippets.net/url1. Use getAttribute instead:
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
You already set the url to variable "x". So the if-condition has to be directly on the string and not the element:
//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
document.getElementById("url1").href = "url2";
}
//[...]
Perfect ! Thank you
Just ! : 'url' ? 'url2' : 'url'; VS 'url1' ? 'url2' : 'url'; :)
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
Here is my problem, I create dynamic span in specif area thanks to "Link", "FirstName", "Lastname" buttons, and I would like to check which button was clicked among them in order to change color. For example, If I click the first time on "Link" button, the span is added in the area, and the "Link" button will become red. And if I click once again on it, the span will be removed, and the button will become grey.
var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");
var myTags = new Object();
myTags['company'] = '#ENTREPRISE#';
myTags['city'] = '#VILLE#';
myTags['link'] = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname'] = '#NOM#';
myTags['title'] = '#TITRE#';
function editTag(zoneId, tag, button) {
var element = document.getElementById(button.id);
var zoneDiv = document.getElementById(zoneId + 'Draft');
var myButton = document.getElementById(zoneId + tag.ucfirst());
var myLabel = document.createElement('span');
var labels = zoneDiv.getElementsByTagName('span');
var spanSize = labels.length;
var delflag = 0;
var delIndex = 0;
if (spanSize != 0) {
for (myLabId = 0; myLabId < spanSize; myLabId++) {
var currentLabel = labels[myLabId];
if (currentLabel.innerHTML === myButton.innerHTML) {
delflag = 1;
delIndex = myLabId;
}
}
}
if (delflag == 1) {
zoneDiv.removeChild(labels[delIndex]);
button.classList.toggle("btn-success");
} else {
myLabel.setAttribute('class', 'label label-info');
myLabel.setAttribute('data-effect', 'pop');
myLabel.setAttribute('contentEditable', 'false');
myLabel.setAttribute('style', 'cursor:move;font-size:100%;');
myLabel.setAttribute('name', tag);
myLabel.setAttribute('draggable', 'true');
myLabel.innerHTML = myButton.innerHTML;
zoneDiv.appendChild(myLabel);
button.classList.toggle("btn-danger");
}
//Clean breaklines;
var bks = zoneDiv.getElementsByTagName('br');
var brSize = bks.length;
if (brSize != 0) {
zoneDiv.removeChild(bks[0]);
}
//Event keyboard on deleted elements
$("span").dblclick(function(handler) {
myLabel.remove(labels[delIndex]);
});
}
function saveMessage(zoneId) {
var zoneDiv = document.getElementById(zoneId + 'Draft');
var message = zoneDiv.childNodes;
var messSize = message.length;
var messageContent = '';
console.log(message);
for (var messId = 0; messId < messSize; messId++) {
var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
if (zoneId === 'mail') {
superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\-\n-]/g;
}
if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex))
// if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
{
messageContent += message[messId].nodeValue;
} else if (message[messId].nodeName === 'SPAN') {
if (message[messId].getAttribute("name") == undefined) {
continue;
}
//messageContent += myTags[message[messId].getAttribute("name")];
var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
messageContent += currentTag;
} else if (message[messId].nodeName === 'IMG') {
messageContent += message[messId].outerHTML;
} else if (message[messId].nodeName === 'BR') {
messageContent += message[messId].outerHTML;
} else if (message[messId].nodeName === 'DIV') {
messageContent += '<br>' + message[messId].innerHTML;
}
}
var myRegexp = /\+/;
messageContent.replace(myRegexp, '');
if (zoneId === 'sms') {
myRegexp = /\n/;
messageContent.replace(myRegexp, '');
}
var idInput = document.getElementById('id');
var myData = {
'rm': 'saveMessage',
'type': zoneId,
'message': messageContent,
'pid': idInput.getAttribute('value')
};
if (zoneId === 'mail') {
var mySubject = document.getElementById('objectArea');
myData = {
'rm': 'saveMessage',
'type': zoneId,
'subject': mySubject.value,
'mail': messageContent,
'pid': idInput.getAttribute('value')
};
if (document.getElementById('mailType1').checked) {
myData['mType'] = 'text';
} else if (document.getElementById('mailType2').checked) {
myData['mType'] = 'html';
}
}
$.post("index.pl", myData).done(function(data) {
window.alert(data);
});
}
String.prototype.ucfirst = function() {
return this.charAt(0).toUpperCase() + this.substr(1);
}
function previewMessage(zoneId) {
var zoneDiv = document.getElementById(zoneId + 'Draft');
var message = zoneDiv.childNodes;
var messSize = message.length;
var messageContent = '';
var previewDiv = document.getElementById("preview");
var mailPreview = document.getElementById('mailPreview');
if (zoneId === 'sms') {
previewDiv.setAttribute('style', '');
previewDiv.innerHTML = '<p>Génération en cours ...</p>';
} else if (zoneId === 'mail') {
mailPreview.innerHTML = 'Génération en cours...';
}
for (var messId = 0; messId < messSize; messId++) {
var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex) && message[messId].nodeValue.length < 100)
//if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
{
messageContent += message[messId].nodeValue;
} else if (message[messId].nodeName === 'SPAN' && message[messId].nodeName.innerHTML !== '') {
if (message[messId].getAttribute("name") == undefined) {
continue;
}
//messageContent += myTags[message[messId].getAttribute("name")];
var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
messageContent += currentTag;
}
}
var myRegexp = /\+/;
messageContent.replace(myRegexp, '');
if (zoneId === 'sms') {
myRegexp = /\n/;
messageContent.replace(myRegexp, '');
}
var idInput = document.getElementById('id');
var myData = {
'rm': 'previewMessage',
'type': zoneId,
'message': btoa(messageContent),
'pid': idInput.getAttribute('value')
};
if (zoneId === 'mail') {
var mySubject = document.getElementById('objectArea');
myData = {
'rm': 'previewMessage',
'type': zoneId,
'subject': mySubject.value,
'mail': btoa(messageContent),
'pid': idInput.getAttribute('value')
};
}
$.post("index.pl", myData).done(function(data) {
if (zoneId === 'sms') {
previewDiv.innerHTML = '';
previewDiv.setAttribute("class", "preview");
previewDiv.setAttribute("style", "background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;");
var myText = document.createElement('p');
myText.setAttribute('class', 'smstext');
myText.innerHTML = atob(data);
//myText.innerHTML = data;
previewDiv.appendChild(myText);
} else {
mailPreview.innerHTML = atob(data);
}
});
}
function testMessage(zoneId) {
var costTestP = document.getElementById('costTest');
costTestP.innerHTML = 'Calcul en cours ...';
var zoneDiv = document.getElementById(zoneId + 'Area');
var message = zoneDiv.childNodes;
var messSize = message.length;
var messageContent = '';
for (var messId = 0; messId < messSize; messId++) {
if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100) {
messageContent += message[messId].nodeValue;
} else if (message[messId].nodeName === 'SPAN') {
messageContent += myTags[message[messId].getAttribute("name")];
}
}
var myRegexp = /\+/;
messageContent.replace(myRegexp, '');
myRegexp = /\n/;
messageContent.replace(myRegexp, '');
var idInput = document.getElementById('id');
var myData = {
'rm': 'testsms',
'message': messageContent,
'id': idInput.getAttribute('value')
};
$.post("index.pl", myData).done(function(data) {
var costTestP = document.getElementById('costTest');
costTestP.innerHTML = data;
});
}
$('#smsDraft').on('dragstart', function(e) {
console.log(e.target.nodeName);
if (e.target.nodeName !== 'SPAN') {
e.stopPropagation();
e.preventDefault();
return;
}
});
#smsArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 150px;
overflow: auto;
padding: 5px;
resize: both;
width: 100%;
}
.smstext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
.mailInput {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
overflow: auto;
padding: 5px;
resize: both;
font-size: 12px;
margin-top: 5px;
width: 300px;
height: 85px;
margin-left: 100px;
margin-top: -20px;
}
.mailtext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#webtag {
margin-top: -392px;
margin-left: 555px;
width: 569px;
}
#result {
display: none;
}
#interaction {
margin-top: 30px;
visibility: hidden;
}
#cd-popup {
background-color: rgba(94, 110, 141, 0.9);
opacity: 1;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: relative;
width: 100%;
max-width: 800px;
height: 350px;
margin: 4em auto;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 1;
}
#cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
#cd-popup p {
padding: 3em 1em;
margin-left: -250px;
height: 100px;
}
#cd-popup div {
float: left;
width: 30%;
list-style: none;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#object {
background: #fc7169;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: -400px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#object:hover {
background-color: #fc8982;
}
#body {
background: #6495ED;
border-radius: 0 0 0 .25em;
width: 175px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
margin-left: -150px;
}
#body:hover {
background-color: #fc8982;
}
#titre {
background: #A52A2A;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#titre:hover {
background-color: #fc8982;
}
#note {
background: #006400;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#cd-popup #note:hover {
background-color: lightsteelblue;
}
#cd-popup .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
#cd-popup .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
#cd-popup .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
#media only screen and (min-width: 1170px) {
#cd-popup {
margin: 8em auto;
}
}
.webArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 520px;
/*overflow: auto;*/
padding: 5px;
/*resize: both;*/
width: 630px;
font-size: 12px;
/*margin-top: 55px;*/
border: 2px dashed #D9D9D9;
border-radius: 5px;
text-align: center;
margin-top: 12%;
}
.webArea>div {
background-color: #FAEBD7;
border: 3px dashed #D9D9D9;
margin-bottom: 15px;
height: 120px;
width: 612px;
overflow: auto;
overflow-x: hidden;
/* margin-left: -1.5%;*/
}
.webArea>div>div {
transition: all .5s;
text-align: center;
float: left;
padding: 1em;
margin: 0 1em 1em 0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 5px;
border: 2px solid black;
/*background: #F7F7F7;*/
transition: all .5s ease;
width: 582px;
/*background-color: #F8F8FF;*/
height: 110px;
}
.dropTarget>div>div>span {
font-style: italic;
margin-right: 5%;
font-size: 16px;
}
.webArea>div>div>input {
margin-right: 25%;
width: 250px;
height: 40px;
background-color: white;
}
.webArea>div>div:active {
/*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
animation: wiggle 0.3s 0s infinite ease-in;*/
opacity: .6;
border: 2px solid #000;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#containerZone {
border: 1px solid;
border-radius: 25px;
*/ margin: 3%;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 8%;
margin-left: -450px;
}
#containerZone2 {
border: 1px solid;
border-radius: 25px;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 100%;
margin-left: -450px;
}
#webtags {
margin-top: -40px;
}
#webtags>div {
margin-left: 20px;
}
#modalTagBody {
height: 120px;
}
#btnTag {
margin-top: 20px;
margin-right: 15px;
}
<html>
<head>
<meta charset="utf-8">
<title>Drag & drop Tag</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>
<body>
<div class="container mtb">
<div class="row">
<TMPL_IF NAME="PROFILE">
<form role="form" action="<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
<TMPL_LOOP NAME="DATA">
<input type="hidden" id='id' name="id" value="<TMPL_VAR NAME=ID>" />
<TMPL_IF NAME="TEMPLATE">
<div class="panel panel-primary" id="panels" data-effect="helix">
<div class="panel-heading">SMS Message</div>
<div class="panel-body">
<div class="col-lg-6">
<div class="form-group">
</div>
<input type="hidden" name="rm" value="saveTemplate" />
<div id="smsArea" class="form-control" contenteditable="true">
<p id="smsDraft">
<TMPL_VAR NAME=TEMPLATE>
</p>
</div><br />
Save
Preview
SMS Costs
<br>
</div>
<div class="col-lg-6" id='smsTags'>
<h4 for="template">Personnalization</h4>
<span class="btn btn-default" onClick="editTag('sms','link', this)" id="smsLink" title="link of your website" draggable="true">Link</span>
<span class="btn btn-default" onClick="editTag('sms','firstname')" id="smsFirstname" title="your firstname" draggable="true">Firstname</span>
<span class="btn btn-default" onClick="editTag('sms','lastname')" id="smsLastname" title="your lastname" draggable="true">Lastname</span>
</div>
<div class="col-lg-6" style="margin-top: 30px">
</div>
</div>
</TMPL_LOOP>
</div>
<! --/row -->
</div>
<! --/container -->
</div>
</body>
</html>
You can pass reference of clicked button using 'this' e.g
onClick = "editTag('sms','link', this)"
Once you get refrence of clicked element in onClick function, you can access the same element and toggle css class(class for red color)
function editTag(zoneId, tag, elementRef) {
// Check if function has received element refrence and toggle class
if(elementRef){
var element = document.getElementById(elementRef.id);
element.classList.toggle("btn-danger")
}
var zoneDiv = document.getElementById(zoneId + 'Draft');
var myButton = document.getElementById(zoneId + tag.ucfirst());
var myLabel = document.createElement('span');
Searched all over the internet, and I can't beat this issue.
I have a pricing section with a pricing plan switch. The logic itself is working fine, however, the CSS checkbox toggle itself isn't switching from left to right.
I assume it has to do with the CSS itself or the way I select the elements with JS. I've also read some topics on SO where they say that it's a checkbox issue with WordPress, didn't find my answer there, unfortunately.
The issue
On Chrome desktop, the CSS checkbox toggle isn't working.
On Safari, iPhone X the CSS checkbox switch checkbox does work but only if you click the label elements with text
Here's a link to the page
Link to Dropbox of me demonstrating the issue on iPhone
window.onload = function() {
var e = document.getElementById("firstPlan"),
d = document.getElementById("secondPlan"),
t = document.getElementById("switcher_iOS"),
m = document.getElementById("firstPlan_box"),
y = document.getElementById("secondPlan_box");
if (document.getElementById("switcher_iOS") == null) {
var node = document.createElement("input");
node.id = "switcher_iOS";
node.type = "checkbox";
node.className = "toggle_iOS--check";
var elm = document.getElementsByClassName('toggle_iOS')[0];
elm.insertBefore(node, elm.firstChild)
t = document.getElementById("switcher_iOS");
}
e.addEventListener("click", function() {
t.checked = false;
e.classList.add("togglePricing--is-active");
d.classList.remove("togglePricing--is-active");
m.classList.remove("hide");
y.classList.add("hide");
});
d.addEventListener("click", function() {
t.checked = true;
d.classList.add("togglePricing--is-active");
e.classList.remove("togglePricing--is-active");
m.classList.add("hide");
y.classList.remove("hide");
});
t.addEventListener("click", function() {
d.classList.toggle("togglePricing--is-active");
e.classList.toggle("togglePricing--is-active");
m.classList.toggle("hide");
y.classList.toggle("hide");
t.checked = !t.checked;
})
}
/* Toggle */
#switcher_iOS {
width: 100%;
}
.toggle_iOS,
.togglePricing {
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.togglePricing {
color: #ccc9c9;
cursor: pointer;
transition: .1s;
font-weight: bold;
font-size: 17px;
}
.togglePricing--is-active {
color: #181818;
}
.toggle_iOS {
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.toggle_iOS--check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
.toggle_iOS--check:checked~.toggle_iOS--switch {
right: 2px;
left: 57.5%;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: .01s, 0s;
}
.toggle_iOS--switch {
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: 0s, .01s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
<label class="togglePricing togglePricing--is-active" id="firstPlan">Payment Plan</label>
<div class="toggle_iOS">
<label for="switcher_iOS"><input type="checkbox" onclick="void(0);" id="switcher_iOS" class="toggle_iOS--check" checked></label><b onclick="void(0);" class="toggle_iOS--switch"></b>
</div>
<label class="togglePricing" id="secondPlan">One Payment</label>
I have simplified your css, and in order for this to work, you have to remove your JS that reset the state of the checkbox from the checkbox on click event such as
t.checked = !t.checked;
var t = document.getElementById("switcher_iOS");
t.addEventListener("click", function(){
console.log("i am", this.checked);
})
.toggle_iOS{
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.05);
}
.toggle_iOS--switch{
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785,0.135,0.15,0.86);
transition-property: left,right;
transition-delay: 0s,.01s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[type=checkbox]:checked + .toggle_iOS--switch{
left: 57.5%;
right: 2px;
}
.toggle_iOS [type=checkbox]{
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
<div class="toggle_iOS">
<input type="checkbox" id="switcher_iOS">
<div class="toggle_iOS--switch"></div>
</div>
I'm currently trying to make a website that displays markers with its own specific text.
When a user clicks on the marker, it displays the text.
I've copied some code online and trying to mess around with it. Unfortunately, I'm not too experience with javascript. I was wondering if anyone would be able to help.
This is what I have so far:
HTML (I don't think there's any problems here):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerWeb</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt=""/>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
Javascript (The part I'm having a hard time with):
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this),
$caption = $('popuptext', $marker);
if ($caption.is(':hidden')) {
$caption.show();
} else {
$caption.toggle("show");
}
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
CSS (I don't think there's any problems here):
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px; /*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
You need to update your showBeaconInfo function in 2 ways:
1) Fix the selector for $caption to grab the class popuptext by adding a period
2) Using the jquery function toggleClass to add or remove the class "show" on the popuptext, the css is setup to either use visibility: hidden or visibility: visible
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
For Example:
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px;
/*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt="" />
</div>
</div>