Capturing signature on a webpage (via tablet screen)

I am trying to write a short code to capture the signature via a tablet screen on a webpage. However, I can’t get the area up that captures that signature.

The code I am using, which I have borrowed from other places that do work is:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<link href="/usr/share/javascript/jquery/jquery.signature.css" rel="stylesheet">
<style>
body > iframe { display: none; }
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/usr/share/javascript/jquery/jquery.signature.js"></script>
<script>
$(function() {
    $('#sig').signature();
    $('#clear').click(function() {
        $('#sig').signature('clear');
    });
    $('#json').click(function() {
        alert($('#sig').signature('toJSON'));
    });
    $('#svg').click(function() {
        alert($('#sig').signature('toSVG'));
    });
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/signature.html">jQuery UI Signature plugin</a>.
    It contains the minimum requirements for using the plugin and
    can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/signatureRef.html">documentation reference</a> page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> 
    <button id="json">To JSON</button> <button id="svg">To SVG</button></p>
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Simon's Timesheet Signature Capture Test Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<link href="/usr/share/javascript/jquery/jquery.signature.css" rel="stylesheet">
<style>
body > iframe { display: none; }
.kbw-signature { width: 400px; height: 200px; }
</style>
<!--[if IE]>
<script src="js/excanvas.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/usr/share/javascript/jquery/jquery.signature.js"></script>
<script>
$(function() {
    $('#sig').signature();
    $('#clear').click(function() {
        $('#sig').signature('clear');
    });
    $('#json').click(function() {
        alert($('#sig').signature('toJSON'));
    });
    $('#svg').click(function() {
        alert($('#sig').signature('toSVG'));
    });
});
</script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/signature.html">jQuery UI Signature plugin</a>.
    It contains the minimum requirements for using the plugin and
    can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/signatureRef.html">documentation reference</a> page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> 
    <button id="json">To JSON</button> <button id="svg">To SVG</button></p>
</body>
</html>
​

I suspect it has something to do with the links to jquery, unless somebody can see something else glaringly obvious. (I am quite new to this)

Is anyone able to put me in the right direction?

Thanks.

Answer

Try this …

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Simon's Timesheet Signature Capture Test Page</title>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
      rel="stylesheet">
<link href="../js/jquery.signature.css" rel="stylesheet">
<style>
    body > iframe {
        display: none;
    }

    .kbw-signature {
        width: 400px;
        height: 200px;
    }
</style>
<!--[if IE]>
<script src="../js/excanvas.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/jquery.signature.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/signature.html">jQuery UI Signature plugin</a>.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/signatureRef.html">documentation reference</a> page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;">
    <button id="clear">Clear</button>
    <button id="json">To JSON</button>
    <button id="svg">To SVG</button>
</p>
<script>
    $(document).ready(function () {
        $('#sig').signature();
    $('#clear').click(function () {
        $('#sig').signature('clear');
    });
    $('#json').click(function () {
        alert($('#sig').signature('toJSON'));
    });
    $('#svg').click(function () {
        alert($('#sig').signature('toSVG'));
    });
});
</script>
</body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Simon's Timesheet Signature Capture Test Page</title>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css"
      rel="stylesheet">
<link href="../js/jquery.signature.css" rel="stylesheet">
<style>
    body > iframe {
        display: none;
    }
​
    .kbw-signature {
        width: 400px;
        height: 200px;
    }
</style>
<!--[if IE]>
<script src="../js/excanvas.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../js/jquery.signature.js"></script>
<script src="../js/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<h1>jQuery UI Signature Basics v18.5.2018</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/signature.html">jQuery UI Signature plugin</a>.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/signatureRef.html">documentation reference</a> page.</p>
<p>Default signature:</p>
<div id="sig"></div>
<p style="clear: both;">
    <button id="clear">Clear</button>
    <button id="json">To JSON</button>
    <button id="svg">To SVG</button>
</p>
<script>
    $(document).ready(function () {
        $('#sig').signature();
    $('#clear').click(function () {
        $('#sig').signature('clear');
    });
    $('#json').click(function () {
        alert($('#sig').signature('toJSON'));
    });
    $('#svg').click(function () {
        alert($('#sig').signature('toSVG'));
    });
});
</script>
</body>
</html>
​

There’s a couple of things. I’ve changed the googleapi call to https instead of http. This helps with browsers that are tetchy with mixed content.

The code for the signature is now also at the bottom, so this should make sure the #sig div is there before the code that attaches itself to it is. This is also helped by the document ready function.

Ignore my ../js/ for the signatures. That’s just where I put it. See my comment above about viewing page source to see if the file is actually available.

Advertisement

Answer