Forum | Appery.io

I replaced it with your code but it now no longer works - image attached.

I replaced this code:
pre
var canvas = jQuery("#signature_pad")[0];
if(!canvas)
alert("Here is no #signature_pad element on the page");
else
var signaturePad = new SignaturePad(canvas);
/pre

with your one:
pre
//htmlsigpad is name of html component
var canvas = Apperyio("htmlsigpad").find("canvas");
var content = jQuery('[data-role="content"]');
var height = content.height();
var width = content.innerWidth() - 40;
console.log("height = " + height);
canvas.attr("height", height);
canvas.attr("width", width);
var canvas = jQuery("#signature_pad")[0];
if(!canvas)
alert("Here is no #signature_pad element on the page");
else
var signaturePad = new SignaturePad(canvas);
/pre

Hi Chiran,

Please show as your app public link and describe steps to reproduce it..

We need to take a look.

Regards.

This is the app public link - http://appery.io/app/mobile-frame?src...

Chiran,

Thanks for the public link.

I see you invoke this code on "page load".

You should do it on "page show" event instead.

Regards.

Thank you, Yurii, it works!

If you don't mind, could you please tell me why it works on page show and not on page load?

Hi Chiran,

on page load you have generated and appended to the document page. But this time the page is hidden.

You can follow this solution to understand how it works:

1 Add "page load" JS event handler with following code:

pre

//Replace "Screen46_textarea" with your page name.
var page= Appery("Screen46_textarea");
console.log("pageDisplay on load = " + page.css("display"));

/pre

2 Add "page show" JS event handler with following code:

pre

//Replace "Screen46_textarea" with your page name.
var page= Appery("Screen46_textarea");
console.log("pageDisplay on show = " + page.css("display"));

/pre

When page is hidden you can not get actual width and height from any inner elements.

Thus this code not worked on "load" event.

Regards.

trying to setup a signature pad - am so lost even after following above steps- please help

Hi Wilson,

Please follow these thread again,

And if you will have any problems - please show us screen shots of your implementation.

Regards.

Hello Team

Need help figuring out how to allow my uses to sign

Here is what I have done so far
Created a new JavaScript named signaturepad.js and pasted code from
http://szimek.github.io/signature_pad...

Then added HTML component named html_34 – set dimensions to “auto”
Edited and added html code as directed on thread

Then created a css named cs_sigpad
Added code as directed on thread

Set event for page show to run this JavaScript

var canvas = Apperyio("html_34").find("canvas");

var content = jQuery('[data-role="content"]');

var height = content.height();

var width = content.innerWidth() - 40;
console.log("height = " + height);
canvas.attr("height", height);
canvas.attr("width", width);
var canvas = jQuery("signature_pad")[0];
if(!canvas)
alert(" no signature_pad element on the page");
else
var signaturePad = new SignaturePad(canvas);

Sadly still getting error msg

Please let me know what I need to change

Thanks much for your time and help

Wilson.
http://timeinapp.app.appery.io/sign_i...
Test username user001 Test Password user001

HI Wilson,

I see wrong line of code in your implementation:

pre

//This is wrong line. And get nothing...
var canvas = jQuery("signature_pad")[0];

/pre

Details: http://prntscr.com/5jym2v/direct

Regards.