I am trying to get signature pad to show up in my wordpress page.
I go to https://github.com/szimek/signature_pad and install the script. But nothing renders in wordpress. is there a specific way to make js work in wordpress?
Here is a js fiddle link of it: https://jsfiddle.net/szimek/jq9cyzuc/
*Ive added the following to header, and the html to the body (nothing happens) :
placed the following html
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
I have created signature code, it's working fine. Take a look at demo.
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas width="664" height="235" style="touch-action: none;"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
</div>
<script src="https://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<script src="https://szimek.github.io/signature_pad/js/app.js"></script>
Related
I have this code that I built in HTML/CSS that's based on Mac/Apple calculator. The way it's displayed is that buttons are grouped in 5 rows using flexbox.
Here's my code from this codepen:
<div class="wrapper">
<div class="calheader">
<h2>Simple Calculator</h2>
</div>
<div class="calculatorbox">
<div class="calwindow">
<!-- ENTRY BOX -->
<div class="entry">
<p id="answer"></p>
</div>
<div class="entryhistory">
<p id="history"></p>
</div>
</div>
<!-- BUTTONS \\-->
<div class="calbuttons">
<div class="row">
<button id="clear" class="key topcolor" value="clear">C</button>
<button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
<button class="key topcolor" value="%">%</button>
<button id="divide" class="key orange" value="/">÷</button>
</div>
<div class="row">
<button id="seven" class="key" value="7">7</button>
<button id="eight" class="key" value="8">8</button>
<button id="nine" class="key" value="9">9</button>
<button id="multiply" class="key orange" value="*">×</button>
</div>
<div class="row">
<button id="four" class="key" value="4">4</button>
<button id="five" class="key" value="5">5</button>
<button id="six" class="key" value="6">6</button>
<button id="subtract" class="key orange" value="-">−</button>
</div>
<div class="row">
<button id="one" class="key" value="1">1</button>
<button id="two" class="key" value="2">2</button>
<button id="three" class="key" value="3">3</button>
<button id="add" class="key orange" value="+">+</button>
</div>
<div class="row">
<button id="zero" class="key btnspan" value="0">0</button>
<button id="decimal" class="key" value=".">.</button>
<button id="equals" class="key orange" value="=">=</button>
</div>
</div>
</div>
</div>
Now, I'm trying to figure out how to select the button so that I can use addEventListener to each button.
Other pure javascript tutorial I have checked out only has this display:
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign operator" value="=">=</button>
</div>
so that he will be able to use this code:
const keys = document.querySelector('.calculator-keys');
keys.addEventListener('click', (event) => {
const { target } = event;
console.log('digit', target.value);
});
What I understand is that this tutorial I've checked out use querySelector to select all the children within the class calculator-keys.
In my case, I was able to make it work for only the first row. However, if I use querySelectorAll, do I need to use .map(), .forEach(), or something else in order to use addEventListener on each button?
querySelector return only one element so you need to use querySelectorAll
you need to select all elements with class key and then add event listener for each key
const keys = document.querySelectorAll('.key');
keys.forEach(item => {
item.addEventListener('click', (event) => {
const { target } = event;
console.log('digit', target.value);
});
});
<div class="wrapper">
<div class="calheader">
<h2>Simple Calculator</h2>
</div>
<div class="calculatorbox">
<div class="calwindow">
<!-- ENTRY BOX -->
<div class="entry">
<p id="answer"></p>
</div>
<div class="entryhistory">
<p id="history"></p>
</div>
</div>
<!-- BUTTONS \\-->
<div class="calbuttons">
<div class="row">
<button id="clear" class="key topcolor" value="clear">C</button>
<button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
<button class="key topcolor" value="%">%</button>
<button id="divide" class="key orange" value="/">÷</button>
</div>
<div class="row">
<button id="seven" class="key" value="7">7</button>
<button id="eight" class="key" value="8">8</button>
<button id="nine" class="key" value="9">9</button>
<button id="multiply" class="key orange" value="*">×</button>
</div>
<div class="row">
<button id="four" class="key" value="4">4</button>
<button id="five" class="key" value="5">5</button>
<button id="six" class="key" value="6">6</button>
<button id="subtract" class="key orange" value="-">−</button>
</div>
<div class="row">
<button id="one" class="key" value="1">1</button>
<button id="two" class="key" value="2">2</button>
<button id="three" class="key" value="3">3</button>
<button id="add" class="key orange" value="+">+</button>
</div>
<div class="row">
<button id="zero" class="key btnspan" value="0">0</button>
<button id="decimal" class="key" value=".">.</button>
<button id="equals" class="key orange" value="=">=</button>
</div>
</div>
</div>
</div>
Dom event deligation refers to handling bubbling events from many elements. It can keep the code simpler, especially when adding or removing elements, and saves some memory.
Some code examples of event delegation:
JavaScript Event Delegation
DOM Events
If you are using Javascript and you have a list of buttons with class 'key', you can use this code to add an EventListener to each button.
let buttons = document.getElementsByClassName('key');
for(let i = 0; i<buttons.length; i++){
buttons[i].addEventListener('click', () => {
/*add your code here*/
});
}
querySelectoAll returns a NodeList, you can create an array from buttons, iterate and assign an eventListener
let buttons = document.querySelectorAll('.btn');
let arrButtons = Array.from(buttons);
console.log(arrButtons)
for(button of arrButtons){
button.addEventListener('click', () => {
console.log('event');
})
}
<button class="btn">Go!</button>
<button class="btn">Go!</button>
<button class="btn">Go!</button>
<button class="btn">Go!</button>
The best way is to use event delegation. This way you don't have to attach event listener on each button, but only on their parent container.
const calculator = document.querySelector(".calculator-keys");
// only attach click event on the container
calculator.addEventListener("click", (event) => {
// ignore clicks from non-button element
if (event.target.nodeName !== "BUTTON") return;
console.log(event.target.value);
});
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=".">.</button>
<button type="button" class="all-clear" value="all-clear">AC</button>
<button type="button" class="equal-sign operator" value="=">=</button>
</div>
Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5. I want it in exact circular shape. Friends, can you please fix it. Please try to help me I want it in responsive too. Below is my code kindly go through it. Here I have tried to show the buttons in a circular shape using bootstrap, CSS, and HTML5.
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
identification</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row" align="center">
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
support</i></button>
</div>
</div>
</div>
Add this css style in your button. It will make a circular shape on you button. you can give any width and height value on your button. just make sure that height and width should have same value.
width:170px;
height:170px;
border-radius:50%
I want to create a dynamic survery webpage with JavaScript.
I have 10 Questions which display types are set to "none" expect the first/actual questions displaytype is "block". Each question is a yes-no question. It's relevant which answer the user choose to see the next question.
I know how to build this static but I wanted a dynamic solution for this problem.
Can anybody help?
Here is a schema of my problem
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Questions</title>
<script>
...
</script>
</head>
<body>
<header>A Dynamic Questionaire.</header>
<section>
<article>
<hgroup>
<h1>Questionaire</h1>
<h2>Anwer the questions in order as they appear.</h2>
</hgroup>
<div id="Question1" style="display:block;">
1.
<button type="button" id="btnYes1">Yes</button>
<button type="button" id="btnNo1">No</button>
</div>
<div id="Question2" style="display:none;">
2.
<button type="button" id="btnYes2">Yes</button>
<button type="button" id="btnNo2">No</button>
</div>
<div id="Question3" style="display:none;">
3.
<button type="button" id="btnYes3">Yes</button>
<button type="button" id="btnNo3">No</button>
</div>
<div id="Question4" style="display:none;">
4.
<button type="button" id="btnYes4">Yes</button>
<button type="button" id="btnNo4">No</button>
</div>
<div id="Question5" style="display:none;">
5.
<button type="button" id="btnYes5">Yes</button>
<button type="button" id="btnNo5">No</button>
</div>
<div id="Question5" style="display:none;">
6.
<button type="button" id="btnYes6">Yes</button>
<button type="button" id="btnNo6">No</button>
</div>
<div id="Question5" style="display:none;">
7.
<button type="button" id="btnYes7">Yes</button>
<button type="button" id="btnNo7">No</button>
</div>
<div id="Question5" style="display:none;">
8.
<button type="button" id="btnYes8">Yes</button>
<button type="button" id="btnNo8">No</button>
</div>
<div id="Question5" style="display:none;">
9.
<button type="button" id="btnYes9">Yes</button>
<button type="button" id="btnNo9">No</button>
</div>
<div id="Question5" style="display:none;">
10.
<button type="button" id="btnYes10">Yes</button>
<button type="button" id="btnNo10">No</button>
</div>
</article>
</section>
</body>
</html>
There are a ton of ways you could do this. A quick approach would be to put some information in the button that indicates where to take the user next. So here I've added a data-next value on each button that matches the id of the next panel to show, and I toggle a class in CSS to show/hide panels.
var buttons = document.getElementsByTagName('button'),
questions = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener('click', function() {
var target = this.getAttribute('data-next');
for (var j = 0; j < questions.length; j++) {
var question = questions[j];
if (question.id == target) {
question.classList.add('show');
} else if (question.classList.contains('show')) {
question.classList.remove('show');
}
}
});
}
div {
display: none;
}
.show {
display: block;
}
<div id="Question1" class="show">
1.
<button type="button" data-next="Question2">Yes</button>
<button type="button" data-next="Question3">No</button>
</div>
<div id="Question2">
2.
<button type="button" data-next="Question4">Yes</button>
<button type="button" data-next="Question5">No</button>
</div>
<div id="Question3">
3.
<button type="button" data-next="Question6">Yes</button>
<button type="button" data-next="Question6">No</button>
</div>
<div id="Question4">
4.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question5">
5.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question6">
6.
<button type="button" data-next="Question7">Yes</button>
<button type="button" data-next="Question8">No</button>
</div>
<div id="Question7">
7.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question8">
8.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question9">
9.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question10">
10.
</div>
I am using the slideToggle method to hide/show a div. I am trying to replicate this action multiple times on a page but it only works on the 1st one. I figured out a way to have it work on each div but have to rename each div and add a new function in the javascript. What can I do to clean up my code as I am going to be using this through out the page and be creating new instances for each div does is not efficient.
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
$("#flip2").click(function() {
$("#panel2").slideToggle("slow");
});
$("#flip3").click(function() {
$("#panel3").slideToggle("slow");
});
});
</script>
<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div id="flip">Click to view HTML</div>
<div id="panel" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div id="flip2">Click to view HTML</div>
<div id="panel2" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div id="flip3">Click to view HTML</div>
<div id="panel3" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn select-options"><span>select options</span></button>
</textarea>
</div>
You can use classes instead of ids and use .next() method in callback function:
$(document).ready(function(){
$(".flip").click(function(){
$(this).next('.panel').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div class="panel" style="display:none">
<textarea rows="3" cols="50"><button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div class="panel" style="display:none">
<textarea rows="3" cols="50"><button type="button" class="btn a-cart disabled"><span>ADD TO CART</span>
</button>
</textarea>
</div>
<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div class="flip">Click to view HTML</div>
<div class="panel" style="display:none">
<textarea rows="3" cols="50"><button type="button" class="btn select-options"><span>select options</span>
</button>
</textarea>
</div>
You need not to replicate this and rename <div> and create new function.
Take these steps:
Give same class to each div where you click to perform slideToggle(eg. flip).
Use selector $(this) to identify clicked element.
Use jquery .next() function to get the .next element.
Call .slideToggle() on that.
It's Done!!
See the code below:
<script>
$(document).ready(function() {
$(".flip").click(function() {
$(this).next().slideToggle("slow");
});
});
</script>
<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div id="panel" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart"><span>ADD TO CART</span> </button>
</textarea>
</div>
<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div id="panel2" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div class="flip">Click to view HTML</div>
<div id="panel3" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn select-options"><span>select options</span></button>
</textarea>
</div>
Select2 open select list behind dialog modal window. Chrome 49.
<dialog id="hello" class="alert">
<div style="padding:10px">
Imagine some great content here.
</div>
<div class="linksTable">
<select name="wpmse_options[social_list]" id="mse_social_list" class="input-block-level wpmse_select2" required>
</select>
</div>
<footer>
<div class="toolbar-actions">
<button id="cancel" class="btn btn-default">Cancel</button>
<button id="save" class="btn btn-primary pull-right">Save</button>
</div>
</footer>
</dialog>
http://jsfiddle.net/memoris/f0sma9tf/6/