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

Snake Game with Javascript

Hi All, I don’t have any experience in game development. In free time I think lets try to make simple game with jQuery and javascript. So I start to do code to make simple basic snake game that was inbuilt with past simple model of Nokia mobile.

snake

Here, I just try to implement simple snake game with javascript and html. First, I made game console with html table and logically I have give number to each td of table.

Now, for generate snake on board I make one global numeric array variables ‘snake’. At starting I set snake array as [73,72,71,70] that means 73th td, 72th td, 71th td and 7th td are part of the snake and I set the background color of all these four td to black by adding snake css class (function – generateSnake()).

For generate cherry that snake need to eat will be a single td. Function generateCherry() – will generate random number withing the limit of our game console and which is not a part of snake.

Function runSnake() – for move snake in appropriate direction as per user input from keyboard arrow keys. We also have speed dropdown to set speed of snake. By using setTimeout(), runSnake method is recursively executes at certain interval as per the snake speed.

You can find complete code on my github repository, as well as find demo page here.
Any feedback and suggestion please revert back in comment section.

What’s New in Bootstrap 3

Bootstrap is a front-end framework, which is basically just a few CSS and JavaScript files that help you build websites more quickly. In next project, I decided to use bootstrap 3 which was released few month ago. I would like to highlight the some of the things in Bootstrap 3 that have impressed me a lot.

Page Rendering is Faster

Bootstrap 3 introduced a new “flat” design. Yes, it’s trendy, but it dramatically improves the page rendering time, which is basically how long it takes the browser to “draw” all the elements on a webpage.

How much faster, exactly? Paul Irish demonstrates in this video:

Improvements in Grid System

Here’s the grid system documentation, but here’s the some overview:

  • .col-xs- When two or more of these columns are in the same row, they will always remain side-by-side, even on the smallest mobile screens. Most of the time you’ll want your columns to stack on mobile devices, so use this only when you have a very specific reason to maintain columns on mobile devices. These are also the only column type that cannot be nested.
  • .col-sm- These columns are collapsed to start, but become horizontal at widths of 768px and above.
  • .col-md- These columns are collapsed to start, but become horizontal at widths of 992px and above. These are a good default to use for just about every column. Once you have your rough layout, you can start to tweak things with some of the other column types.
  • .col-lg- Again, collapsed to start, but horizontal at 1200px and above. This is useful if you have an element that normally stretches the full width of the page, but might look ridiculous across a 27″ iMac screen.

Turn Off Responsive Features

Bootstrap 3 was designed with responsive approach, but if you have more specific needs and responsive design not need, you can always turn it off.

It’s not as simple as an off button, but just follow these step-by-step instructions and you can disable the responsive features of Bootstrap. Nice!

There’s such a nice documentation for migrating from Bootstrap 2.x to 3.0. and lots more cool stuff, so be sure to check out the Bootstrap site and read the docs. If you have any learnings or tips, share them in the comments!

jQuery – Custom Filters

Hello
Sometimes we may need to collect html elements with certain filter which jQuery doesn’t provide. At that time we can simple create custom filters in jQuery. I found such a nice blog – Creating Custom Filters in jQuery. Let’s look how to create custom filters in jQuery.

<script>
    $.expr[':'].placeholder = function(elem) {
        return $(elem).attr('placeholder') !== undefined;
    };
    
    $(document).ready(function() {
        console.log($(':placeholder').length);
    });
</script>


A filter is nothing but a function that accepts as an argument the current DOM element to process and needs to return true to keep it in the collection, and false to discard it.

“:” is a property of jQuery’s “expr” attribute. And it containing jQuery’s native filters and you can use it to add your own filter at runtime. Inside the function definition, we just have a single statement that checks if the current element has the placeholder attribute set, and if so, it returns true to keep the element.

For more on creating custom filters in jQuery please go to: http://aurelio.audero.it/blog/2013/09/05/how-to-create-custom-filters-in-jquery/

Start your HTML5 project in 15 seconds

Hello everyone

When I want to start new project, every time I need to download javascript/css framework files such as jquery, bootstrap. I need to put that files to proper js and css folder. Also, need to download icon image files and put them to appropriate image folder. But now I find nice solution for this and you can start your HTML5 project within 15 seconds by using – Initializr – such a nice tool to getting a head start with Front End Generators.

initializr is one of the first generators for generating a project based upon HTML5 Boilerplate. So if you are a fan of HTML5 Boilerplate then Initializr is a fantastic place to start as it allows you to fine tune to HTML5 Boilerplate to meet your needs. It generates for you a clean customizable template with just what you need to start!

Initially it gives you three pre-configuration options:

  • Classic H5BP
  • Responsive
  • Bootstrap

Initializr then allows you to select options in the following categories:

  • HTML/CSS Template – Any extra bonuses like Bootstrap or Mobile first responsive you want to add.
  • HTML5 Polyfills – Modernizr or HTML5Shiv
  • jQuery – Minified or Development
  • H5BP Optional – Allows you to select which parts of H5BP you want to use.

To generate your project you simply select the options you want and click download. That’s it!!!!