How to use Media Query in Javascript?

To make webpage responsive we use lots of media queries. Actually, Media Queries are a CSS feature that allows us to apply different screen width rules to our CSS. In many adaptive application we need to write JavaScript code which supports many devices. But these Media Queries in CSS what about in JavaScript? Can I use it in JavaScript? If yes, then how can I use Media Query in JavaScript?.

Well, now it is possible to use media query in JavaScript with the help of the window.matchMedia function. It is well supported and if you don’t need to support IE8 or lower you may use it without worry. Browser Support for window.matchMedia() is also pretty good.

Example

var mql = window.matchMedia("screen and (min-width: 800px)")
if (mql.matches){ // if media query matches
 alert("Window is 800px or wider")
}
else{
 // do something else
}

Continue reading

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.

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

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.