Some Javascript Tips and Tricks

Hi all,

Please find some Javascript tricks and tips :

Get the max or the min in an array of numbers

I think it’s an efficient way to find out minimum and maximum value from numeric array

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

Strange Floating point problems

0.1 + 0.2 === 0.3 // is false 
0.1 + 0.2 == 0.3 // is also false

I’m not aware about this strange floating point issue, even though I’m using javascript since last 5-6 years.
But why does this happen? 0.1 +0.2 is equal to 0.30000000000000004. What you need to know is that all JavaScript numbers are floating points represented internally in 64 bit binary according to the IEEE 754 standard. For more explanation, take a look to this blog post.

Different ways to Check the properties of an object

In JavaScript, we can check weather a property is present on an object, in different ways.

if ('undefined' !== typeof obj['prop']) { /* do something */ }

if ('prop' in obj) { /* do something */ }

if (obj.hasOwnProperty('prop')) { /* do something */ }

From among all ways, I think most efficient way is 1st one. Please find speed test here. This page will answer the burning question, “Which is faster?”

Avoid Negative arguments for splice Array Function

In below code, my from variable have value ‘-1’ and I’m passing it to splice function which is still return me [5]. So, make sure that the arguments passed to splice are not negative.

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
numbersArray.splice(from,2);    // will return [5]

Create simple Signature pad with HTML5 Canvas and jQuery Mobile

Hi Guys,

I am going to share how to create simple signature pad with new HTML5 canvas element and with jQuery mobile.

Find below HTML code for signature pad popup div with id=”divPopUpSignContract”. This popup div contains only HTML5 canvas element and two buttons for submit and clear. Continue reading

Create Dynamic Pop Up with jQuery Mobile

Hello Everyone,

In jquery mobile project, I want to customize normal javascript alert message. So I plan to create runtime jquery mobile popup.

function runtimePopup having below arguments:
message: string value of the alert message
header: string value for popup header
fun_ok: a function for ‘OK’ button of popup message
showcancel: true/false flag, if it is true then cancel button will appears.
css: Custom css e.g. {“background-color”:”#000″}

Please find below function to create runtime jquery mobile popup.
View Demo

function runtimePopup(message,header, fun_ok,showcancel,css) {
	$('#mydivpopup-popup').remove();
	$('#mydivpopup-screen').remove();
	$.mobile.activePage.find().remove('#mydivpopup');
	//create a div for the popup
	var odiv = ($('#mydivpopup').length) ? $('#mydivpopup') : $("<div id='mydivpopup' data-role='popup'></div>");
	var $popUp = odiv.popup({
        dismissible : false,
        transition : "pop",
        overlyaTheme : "a",
        history:false
    }).on("popupafterclose", function() {
    	//remove the popup when closing
        $(this).remove();
        $('#mydivpopup-screen').remove();
        $('#mydivpopup-popup').remove();
    });

	if(css)
		$('#mydivpopup-popup').css(css);
	else	
		$('#mydivpopup-popup').css("max-width","300px");

	//create a title for the popup
    var $divHeder = $("<div/>", {"class":"ui-header ui-bar-b"});
    $("<p class='popupHeader'>" + header + "</p>").appendTo($divHeder);
    $divHeder.appendTo($popUp);

    //create content
    var $divContent = $("<div class='ui-content'>" + message + "</div>");
    $divContent.appendTo($popUp);

	//create a back button
    $("<a>", {
    	id: "mydivpopup-close",
        text : "Cancel",
        "data-jqm-rel" : "back"
    }).buttonMarkup({
        inline : true
    }).on("click", function() {
    	$popUp.detach();
        $popUp.popup("close");
    }).appendTo($popUp);

    if(!showcancel) {
    	$popUp.find('#mydivpopup-close').hide();
    }

    fun_ok = (fun_ok) ? fun_ok : function(){}; 

    //Create a submit button
    $("<a>", {
        text : "OK",
        "data-jqm-rel" : "back"
    }).buttonMarkup({
        inline : true
    }).on("click", function() {
    	//close
    	$('#mydivpopup-close').trigger("click");
        setTimeout(function(){fun_ok();},100);
    }).appendTo($popUp);

    $popUp.trigger("create");
    $popUp.popup("open");

    //Set PopUp to window center
    if($('#mydivpopup-popup').is('.ui-popup-hidden')) {
    	$('#mydivpopup-popup').removeClass('ui-popup-hidden');
    	$('#mydivpopup-popup').addClass('pop');
    	$('#mydivpopup-popup').addClass('in');
    	$('#mydivpopup-popup').addClass('ui-popup-active');
    	$('#mydivpopup-popup').addClass('ui-popup-container');
    }
    if($('#mydivpopup-screen').is('.ui-screen-hidden')) {
    	$('#mydivpopup-screen').removeClass('ui-screen-hidden');
    	$('#mydivpopup-screen').addClass('in');
    	$('#mydivpopup-screen').addClass('ui-popup-screen');
    }
    if(!$('#mydivpopup').is('.ui-body-c'))
    	$('#mydivpopup').addClass('ui-body-c');

    var popHeight = $('#mydivpopup').height();
    var popWidth = $('#mydivpopup').width();
	var viewportHeight = jQuery(window).height();
	var viewportWidth = jQuery(window).width();
	var top  = (viewportHeight/2) - (popHeight/2);
	var left = (viewportWidth/2) - (popWidth/2);
	if(top > 0) {
		$('#mydivpopup-popup').css("top",top+"px");
	}
	if(left > 0) {
		$('#mydivpopup-popup').css("left",left+"px");
	}
}