Signature pad

Developer
Revolution Graphics
Size
3,084 Kb
Views
44,528
  1. Signature pad Previews
  2. Signature pad HTML Codes
  3. Signature pad CSS Codes
  4. Signature pad JS Codes

How do I make an signature pad?

What is a signature pad? How do you make a signature pad? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.

Signature pad Previews
IQ Test

Signature pad - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>signature pad</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="signature-pad" class="m-signature-pad"> <div class="m-signature-pad--body"> <canvas></canvas> </div> <div class="m-signature-pad--footer"> <div class="description">Sign above</div> <button class="button clear" data-action="clear">Clear</button> <button class="button save" data-action="save">Save</button> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://szimek.github.io/signature_pad/js/signature_pad.js'></script> <script src="js/index.js"></script>
</body>
</html>

Signature pad - Script Codes CSS Codes

.m-signature-pad { margin: auto; position: relative; font-size: 10px; width: 480px; height: 300px; border: 1px solid #e8e8e8; background-color: #fff;
}
.m-signature-pad--body { position: absolute; left: 20px; right: 20px; top: 20px; bottom: 60px; border: 1px solid #f4f4f4;
}
.m-signature-pad--body
canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none;
}
.m-signature-pad--footer { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 40px;
}
.m-signature-pad--footer
.description { color: #C3C3C3; text-align: center; font-size: 1.2em; margin-top: 1.8em;
}
.m-signature-pad--footer
.button { position: absolute; bottom: 0;
}
.m-signature-pad--footer
.button.clear { left: 0;
}
.m-signature-pad--footer
.button.save { right: 0;
}
@media screen and (max-width: 1024px) { .m-signature-pad { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; min-width: 250px; min-height: 250px; margin: 5%; }
}

Signature pad - Script Codes JS Codes

var wrapper = document.getElementById("signature-pad"), clearButton = wrapper.querySelector("[data-action=clear]"), saveButton = wrapper.querySelector("[data-action=save]"), canvas = wrapper.querySelector("canvas"), signaturePad;
// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() { var ratio = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas);
clearButton.addEventListener("click", function (event) { signaturePad.clear();
});
saveButton.addEventListener("click", function (event) { window.open(signaturePad.toDataURL());
});
Signature pad - Script Codes
Signature pad - Script Codes
Home Page Home
Developer Revolution Graphics
Username rgfx
Uploaded October 01, 2022
Rating 3
Size 3,084 Kb
Views 44,528
Do you need developer help for Signature pad?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Revolution Graphics (rgfx) Script Codes
Name
Icon-font animation troggle
Canvas Noise generator
Video-js scss
Background image mouse scroll
Progressively reveal dots on a Bezier curve
CSS Background
Keep Image in Center of Div.
SVG as a submit button
Custom Checkbox and radio inputs SCSS
Simple Horizontal Stacked Bar
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!