Downloading canvas as Image (DataURL) on button click

To download HTML5 canvas DataURL on your computer on a button click, just create a link and point DataURL to its href attribute and trigger the click like so: ~~~ var canvas = document.getElementById(“mcanvas”); image = canvas.toDataURL(“image/png”, 1.0).replace(“image/png”, “image/octet-stream”); var link = document.createElement(‘a’); = “my-image.png”; link.href = image;; ~~~ Example : @[jsfiddle](

Add and Remove Fields Dynamic and Simple with jQuery

This is another example of the [previous post]( about dynamically adding and removing of input fields. It’s similar in function but we don’t use `x` as field counts, here we just directly access the `childNodes` inside the wrapper element and accomplish the same goal. The jQuery: ~~~ var max_fields = 10; var wrapper = $(“.input_fields_wrap”); var add_button = $(“.add_field_button”); var remove_button = $(“.remove_field_button”); $(add_button).click(function(e){ e.preventDefault(); var total_fields = wrapper[0].childNodes.length; if(total_fields < max_fields){ $(wrapper).append('‘); } }); $(remove_button).click(function(e){ e.preventDefault(); var total_fields = wrapper[0].childNodes.length; if(total_fields>1){ wrapper[0].childNodes[total_fields-1].remove(); } }); ~~~ The HTML ~~~ Add Field Remove Field ~~~ Demo : @[jsfiddle](

Simple Done Typing jQuery function

This simple jQuery function can be used to trigger a callback everytime user stops typing. Just apply this to any text input fields such as textarea to see it in action. ~~~ (function($) { $.fn.donetyping = function(callback){ var _this = $(this); var x_timer; _this.keyup(function (){ clearTimeout(x_timer); x_timer = setTimeout(clear_timer, 1000); }); function clear_timer(){ clearTimeout(x_timer);; } } })(jQuery); ~~~ Usage : ~~~ $(‘textarea’).donetyping(function(callback){ //your code goes here. }); ~~~ @[jsfiddle](