input type=number has numeric keyboard with no dot (‘.’) keys in many samsung android devices

I’m developing a web page which having lots of inputs which contents are decimal numbers.
So I tried with <input type=”number” />

But many Samsung android devices displays a numeric keyboard with dot and comma disabled.
While in Nexus 4, same page have a numeric keyboard with dot and comma enabled.

I google this issue, but didn’t find the solution which works for me. I don’t know if there is something I am missing, if there is something I can try, or if something knows that is Samsung Android device’s fault so I can do nothing for this :(.

If you have any solution for this issue please comment it below. Lots of thanks in advance.

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

HTML5 Web Worker v/s setInterval()

Hi all,

In HTML5 we have new Web Worker feature but at first look I think its similar like as setInterval() then why they introduce Web Worker. But no there is one major difference between both is: In JavaScript all execution process remains inside a unique thread while Web Worker supports multi-threading.

Before the workers…

In JavaScript, a long running processing will freeze the main window and blocking the “UI Thread”. This is the main thread in charge of handling all the visual elements and associated tasks: drawing, refreshing, animating, user inputs events, etc. Sometimes you may notice that due to long JavaScript processing browser throws unresponsive script warning as:
5939882671_3bf264fd60

To overcome single thread limitation HTML5 is bringing us true multi-threading capability via Web Workers. We can execute the long processing script without freezing the main window. The Web Worker execution will not affect the main “UI Thread”.

When’s the good time to use Web Worker

Any script that you want to execute in the background is a good candidate to run as a Web Worker. Think about the sorting of large arrays, parallel processing, and I think you’ll see where Web Workers could be a big help.

Web Worker Limitations

Web Workers operate independently of the main browser UI thread so they’re not able to access many of its objects. One limitation is that Web Workers cannot access the DOM, so they can’t read or modify the HTML document. In addition, they can’t access any global variables or JavaScript functions within the main page.

Please click to know more about Web Worker: The Basics of Web Worker

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!

Does Responsive Design Required???

Hi All,

As you all knows that there is a boom of responsive design and everyone wants to make their sites and web application responsive for all devices. But today I just go through the article – Why Responsive Design is wast of time, written by John Sonmez. As of now I’m thinking that Responsive design such a nice and great in web development. But after reading whole article I’m also little agree that for simple content site (like blog, company profile) Responsive Design is good but for a web application of any considerable size, responsive design is waste of time. Here are some reasons that John mention.

  • When you try to make a product that can do multiple things, the complexity of creating that product increases exponentially. Consider this. Which is more difficult to create: a car that turns into a motorcycle, or a car and a motorcycle?
  • There is another major reason why responsive design might just be a waste of time anyway: this should all be the browser’s responsibility, not the web developer’s. This is just like HTML5 brought us changes to HTML that required the browser vendor to start supporting many of the things that web designers were doing manually, like playing video and drawing with JavaScript, it is very likely that eventually the responsiveness of responsive design will be relegated to where it actually belongs anyway, the browser and the markup itself
  • Things are changing rapidly. Mobile devices are getting bigger screens and higher resolutions and becoming much more powerful. While two years ago it was a pain to visit a desktop site from a mobile browser, it is much less painful now. With latest smartphones, I hardly feel the difference at all and I even find myself specifically requesting the desktop version of a mobile site from time to time.

My opinion is that if you have simple content site (like blog, company profile, portfolio) than you should move to responsive design. But if you already have huge size complex web application than I think you should not waste your time to make it responsive.

What do you think? If you have a convincing argument as to why responsive design is worth the effort or why it isn’t as much extra effort, I’d love to hear it. Let me know in the comments below.

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!!!!