brinley / jSignature

jQuery plugin for adding web signature functionality
http://www.unbolt.net/jSignature
694 stars 530 forks source link

resize doesn't work when there are two or more pads #36

Open tomyam1 opened 11 years ago

tomyam1 commented 11 years ago

The resize mechanism doesn't work when there two or more signature pads.

<div class="jsignature-parent"></div>
<div class="jsignature-parent"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="./jSignature.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".jsignature-parent").jSignature()
    });
</script>

When I change the size of the browser window, I get the an error: Uncaught TypeError: Cannot read property '0' of undefined on currentTopic[i][0] in this.unsubscribe (PubSubClass).

brinley commented 11 years ago

I'll need to take a look. In the mean time, any reason you can't initialise them individually?

tomyam1 commented 11 years ago

Thanks. I get the same error with it:

<div id="sign1" class="jsignature-parent"></div>
<div id="sign2" class="jsignature-parent"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script   src="./jSignature.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#sign1").jSignature();
        $("#sign2").jSignature();
    });
</script>
brinley commented 11 years ago

I cant replicate it, What browser do you see this error in? And do you see the error when resizing in http://www.unbolt.net/jSignature

On Mon, Aug 5, 2013 at 2:04 AM, tepez notifications@github.com wrote:

Thanks. I get the same error with it:

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/36#issuecomment-22094418 .

tomyam1 commented 11 years ago

I can't replicate it on http://www.unbolt.net/jSignature. Please check these pages:

Two pads, no body tag - crashes on page resize http://s3-eu-west-1.amazonaws.com/tepez/signature1.html

Two pads, basic twitter bootstrap page - works perfect http://s3-eu-west-1.amazonaws.com/tepez/signature2.html

Two pads, each in different tab. Resize() all pads when a tab is changed - crashes on tab change http://s3-eu-west-1.amazonaws.com/tepez/signature3.html

I got these results on Chrome 28.0.1500.95 and Firefox 21.0

brinley commented 11 years ago

Ah its easier now that I see the source.

signature1 - i'm quite sure you need the html body tags

signature2 - its the way you used class resize that isn't right. I'll have a look when I have the time but in the mean time you should beable to do something like $(".jsignature-parent").each(function(i,o) { $(o).resize() });

On Sun, Aug 11, 2013 at 10:44 PM, tepez notifications@github.com wrote:

I can't replicate it on http://www.unbolt.net/jSignature. Please check these pages:

Two pads, no body tag - crashes on page resize http://s3-eu-west-1.amazonaws.com/tepez/signature1.html

Two pads, basic twitter bootstrap page - works perfect http://s3-eu-west-1.amazonaws.com/tepez/signature2.html

Two pads, each in different tab. Resize() all pads when a tab is changed - crashes on tab change http://s3-eu-west-1.amazonaws.com/tepez/signature3.html

I got these results on Chrome 28.0.1500.95 and Firefox 21.0

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/36#issuecomment-22474223 .

Brinley Ang Software Developer & Consultant http://www.unbolt.net

tomyam1 commented 11 years ago

I think it rather has something to do with an un-handled edge case, we get into by initializing a signature pad when it's parent has size 0, e.g. because it's hidden.

Check these:

http://s3-eu-west-1.amazonaws.com/tepez/signature4.html - same as signature3.html, but uses the each instead.

http://s3-eu-west-1.amazonaws.com/tepez/signature5.html - pads are initialized in an hidden parent. Then we unhide the parent and resize the pads (it than crashes).

brinley commented 11 years ago

I noticed that you were referencing to the jSignature on my box so I've made a quick change on that file. Can you see if its working as expected now?

On Sun, Aug 11, 2013 at 11:12 PM, tepez notifications@github.com wrote:

I think it rather has something to do with an un-handled edge case, we get into by initializing a signature pad when it's parent has size 0, e.g. because it's hidden.

Check these:

http://s3-eu-west-1.amazonaws.com/tepez/signature4.html - same as signature3.html, but uses the each instead.

http://s3-eu-west-1.amazonaws.com/tepez/signature5.html - pads are initialized in an hidden parent. Then we unhide the parent and resize the pads (it than crashes).

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/36#issuecomment-22474824 .

Brinley Ang Software Developer & Consultant http://www.unbolt.net

tomyam1 commented 11 years ago

It seems you fixed it. Thanks!

One small issue. In http://s3-eu-west-1.amazonaws.com/tepez/signature5.html the bottom pad is smaller than the top pad. If I call $(".jsignature-parent").resize() in the console, the bottom pad is resided to the correct size. Any idea why this happens?

brinley commented 11 years ago

Try adding min-height or height to your jsignature-parent class.

On Sun, Aug 11, 2013 at 11:40 PM, tepez notifications@github.com wrote:

It seems you fixed it. Thanks!

One small issue. In http://s3-eu-west-1.amazonaws.com/tepez/signature5.html the bottom pad is smaller than the top pad. If I call $(".jsignature-parent").resize() in the console, the bottom pad is resided to the correct size. Any idea why this happens?

— Reply to this email directly or view it on GitHubhttps://github.com/brinley/jSignature/issues/36#issuecomment-22475513 .

Brinley Ang Software Developer & Consultant http://www.unbolt.net

tomyam1 commented 11 years ago

I suspect there is still a problem. In http://s3-eu-west-1.amazonaws.com/tepez/signature5.html, I put a break-point on the line var w = $parent.width(). This line is called twice, but $parent is sign1 in both cases (although it should have been sign2 on the second time). If I later call $(".jsignature-parent").resize() on the console, than $parent is sign2 both times.

softwareDeveloperGuy commented 9 years ago

Has there been a resolution to this problem! I am experiencing resizing issues when I have three different signatures in under three different tabs.

MickL commented 9 years ago

For me it is also resizing only ONE pad. i tried:

 $('.websignature-field').each(function(index) {
        $(this).resize();
});

But only one field is resized. If i repeat the each function, the second one is resized, and so on. Btw i also dont like the timeout. :(