HTML5 JavaScript canvas based smooth signature drawing – Online / web signature capture / hand draw signature input

HTML5 JavaScript canvas based smooth signature drawing – Online / web signature capture / hand draw signature input

This JavaScript library make it possible to hand draw smooth signatures from user input, it’s useful in some applications that require user signature for signups, it can output as svg and png formats, and you can use PHP or other server side language to capture the output signature image and store for further use.

HTML5 canvas based smooth signature drawing





Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.

JavaScript object operations – How to add / remove item from a JavaScript object

Getting into JavaScript frameworks like vue.js and react.js, now it’s time to review some of the JavaScript fundamentals.


How to remove item from a JavaScript object

Say I create an object as follows:

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"

What is the best way to remove the property regex to end up with new myObject as follows?

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI"
var test = {'red':'#FF0000', 'blue':'#0000FF'};
delete; // or use => delete test['blue'];

this deletes


There are two ways to add new properties to an object:

var obj = {
    key1: value1,
    key2: value2

Using dot notation:

obj.key3 = "value3";

Using square bracket notation:

obj["key3"] = "value3";

The first form is used when you know the name of the property. The second form is used when the name of the property is dynamically determined. Like in this example:

var getProperty = function (propertyName) {
    return obj[propertyName];


real JavaScript array can be constructed using either:

The Array literal notation:

var arr = [];

The Array constructor notation:

var arr = new Array();

Your element is not an array, however your cart needs to be an array in order to support many element objects. Code example:

var element = {}, cart = []; = id;
element.quantity = quantity;

If you want cart to be an array of objects in the form { element: { id: 10, quantity: 1} } then perform:

var element = {}, cart = []; = id;
element.quantity = quantity;
cart.push({element: element});

JSON.stringify() was mentioned as a concern in the comment:

>> JSON.stringify([{a: 1}, {a: 2}]) 
How do I add a property to a JavaScript Object using a variable as the name?

You can use this equivalent syntax:

obj[name] = value;
How do I check if an object has a key in JavaScript?

Try the javascript in operator.

if ('key' in myObj)

And the inverse.

if (!('key' in myObj))

Be careful! The in operator matches all object keys, including those in the object’s prototype chain.

Use myObj.hasOwnProperty('key') to check an object’s own keys and will only return true if keyis available on myObj directly:


Unless you have a specific reason to use the in operator, using myObj.hasOwnProperty('key')produces the result most code is looking for.


You’ll have to iterate:

for (var k in obj) {
  if (!obj.hasOwnProperty(k)) continue;
  if (obj[k] === "orange") {
    /* yaay! an orange! */

Now that “hasOwnProperty” test in there is to make sure you don’t stumble over properties inherited from the prototype. That might not be desirable in some cases, and really it’s one of the things you kind-of need to understand in order to know for sure whether you do or don’t want to make that test. Properties that you pick up from an object’s prototype can sometimes be things dropped there by various libraries. (I think the ES5 standard provides for ways to control whether such properties are “iterable”, but in the real world there’s still IE7.)


11.2.1 Property Accessors

I want to use the value of an objects property to name the property of another object. Easy to do in PHP:

$object1->property = 'name';
$object2->{$object1->property} = "value";
echo $object2->name; //outputs "value"

But in Javascript I can’t figure out how to do this. The curly braces are used a different way.

Anyone know the php equivalent in javascript?

Thanks 🙂

object2[] = "value";



You use subscript notation.

11.2.1 Property Accessors

Properties are accessed by name, using either the dot notation:

MemberExpression . IdentifierName
CallExpression . IdentifierName

or the bracket notation:

MemberExpression [ Expression ]
CallExpression [ Expression ]

Detect iOS in OctoberCMS to differ the script or other resources loads

in the “code” section of the CMS page editor

put in below codes

function onStart()
 //Detect special conditions devices
 $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
 $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
 $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
 $Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
 $webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

 $this['isIos'] = false;

 //do something with this information
 if( $iPod || $iPhone ) {
 //browser reported as an iPhone/iPod touch -- do something here
 $this['isIos']= true;
 } else if($iPad) {
 //browser reported as an iPad -- do something here
 $this['isIos']= true;
 } else if($Android) {
 //browser reported as an Android device -- do something here
 $this['isIos']= false;
 } else if($webOS) {
 //browser reported as a webOS device -- do something here
 $this['isIos']= false;

then you can call the isIos variables in html section

{% if isIos %}
{% partial “some-partial-for-ios” %}
{% else %}
{% partial “some-partial-not-for-ios” %}
{% endif %}



Using .on for dynamically generated elements $(document).on jQuery

This is an issue that usually beginner would encounter when things like .hover and .click did not work with dynamically generated elements.

To resolve the issue, instead of using, $(document).on(“click”, “element_selector”, function() should be used for live contents. Note that the .hover takes two callback functions, in order to achieve the same effect, mouseenter and mouseleave events should be put in when using $(document).on in this case.

$(document).on("mouseenter", "li", function() {
    // hover starts code here

$(document).on("mouseleave", "li", function() {
    // hover ends code here




jQuery store locator plugin

The jQuery store locator plugin can easily help you to create a feature rich widget for your website or web application.



On github:

Author blog:

Perfect Responsive Background Image solutions – Backstretch jQuery plugin

Backstretch – jQuery plugin – responsive background image plugin

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.

Backstretch on GitHub:

Other references:

Perfect Full Page Background Image

OR change the image via @media query
use different images for @media query

Combine Magento with Angular – Magento-on-Angular

This project brought Magento together with Angular, however it looked like no longer being developed, the latest release was dated Jun 30, 2015.


Tired of Magento’s lack of unit testing? Configuration over convention? Use of Prototype.js? Badly written JavaScript? Untested third-party modules? Likewise! Moa brings Magento into the 21st century.

Some of the jQuery / BootStrap Datepicker datetime input

Customizable Dropdown Birthday Picker Plugin with jQuery

This one’s with 3 input fields.

Customizable Dropdown Birthday Picker Plugin with jQuery

Datepicker for Bootstrap

The best part for this one is the start and end date / check in and check out date control

Datepicker for Bootstrap

DateTime Picker Bootstrap – form component to handle date and time data.

DateTime Picker Bootstrap - form component to handle date and time data.


Pikaday A refreshing JavaScript Datepicker JS Lib

This is a simple yet fully functional datetime picker

Pikaday A refreshing JavaScript Datepicker


PHP date function:

I’ve found an issue when the instance is not bound to the filed value, eg. I’d like to preload the field value value=”{{ __SELF__.userDob }}”, this will cause the picker not work.

In order to solve this, try to bind the instance to the field value:

change the onSelect line

onSelect: function()


picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();

Then it should work.