Undocumented features of jQuery

Hi all

I am a big fan of jQuery but I never tried to read whole source code of jQuery. I know some of the tricks such as to get an object of events bound to a certain element you can use:

jQuery._data(jQuery('a')[0], 'events');

I Often use this for debugging purposes 🙂

Well!! David Aragon decided to read the source code to jQuery and found a variety of things he hadn’t expected. David wrote the wonderful blog – 18 Surprises From Reading jQuery’s Source Code and list out many undocumented features which surprise me a lot. But before using this please be careful as undocumented features can change without notice.

So take a look on David’s blog and get 18 surprises of jQuery 🙂

Advertisements

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");
	}
}