Signaturepad testing

testing signature pad

HTML

<script src="http://static.thomasjbradley.ca/signature-pad/jquery.signaturepad.min.js"></script>
<link rel="stylesheet" href="http://static.thomasjbradley.ca/signature-pad/jquery.signaturepad.css">
<script src="http://static.thomasjbradley.ca/signature-pad/json2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container">    
    <div class="row">
        
         <!-- left part -->
        <div class="col-md-3"> 
            <h3>header</h3>
            <p> tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </p>
        </div>
        
        
        <!-- right part -->
        <div class="col-md-9">            
           
            
            <div class="form-horizontal">
                
               <div class="form-group">
                   <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                   <div class="col-sm-10">
                       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
      
      <div class="form-group">
          <label  class="col-sm-2 control-label">Signature 01</label>
          <div class="col-sm-10">          
              
              <div class="sigPad" data-sig-json="#sigone">
                  <canvas class="pad"></canvas>
                  <input type="hidden" id="sigone" name="sigone"...

CSS

.container{margin:0 auto;margin-top:2em;border-radius:10px;border:2px solid #afafaf;padding:1em;}

.sigPad{
    width:100%;
    max-width:480px;
    min-width:280px;
    height:200px;
   
}
.pad{
    border:2px solid #efefef;
    border-radius:6px;     
}

JavaScript

/* call signature function */
generateSignature( $('.sigPad') );


/**
* @Description: Sinature generator
* @param: signature class name or id (if one signature on page)
* @version 2.1
* @Author: PVH
* @Requires: signaturepad script
*/
function generateSignature(signature){

    signature.each(function(idx){        
          
        var sig = $(this);
        var sigApi = null;
        var sigJsonData = null;
        var sigDataElem = null;
        var sigH = sig.height();
        var sigW = sig.width();
        var sigDataId = sig.attr('data-sig-json'); // id of hidden sig data field
              
        // check if string is of type element:
        var sigDataElem = getDomElement(sigDataId);         

        // if it is an element then get json value
        if (sigDataElem.length>0) {            
            sigJsonData = sigDataElem.val();            
        }          
              
        // Create signature api:
        sigApi = sig.signaturePad({drawOnly:true, lineTop: sigH-40});              
        sig.find('.pad').attr('width',sigW).attr('height',sigH);
       
         // check if there is a hidden field with json string then put inside sigpad: 
        if(sigJsonData.length>0){
            sigApi.regenerate(sigJsonData);
        } else {
           sigApi.regenerate();
        }
        
        // resize signature pad on resize:
        $(window).on('resize', function(){
          sigH = sig.height();
          sigW = sig.width();
          sig.find('.pad').attr('width',sigW).attr('height',sigH);
          
            // refetch json data:   
          var sigJsonData = sigDataElem.val();
            if(sigJsonData.length>0){
                sigApi.regenerate(sigJsonData);
            } else {
                sigApi.regenerate();
            }
          
        });         
       
    }); 
    
}



/**
* @Description: Get dom element bases on string or object
* @Params : String > #Elem, .Elem, elem
* @Returns: jquery element dom object...