jquery parseInt() without radix may cause a problem!

Background: The parseInt() function parses a string and returns an integer.

Syntax: parseInt(string, radix) 




ParameterDescription
stringRequired. The string to be parsed
radixOptional. A number (from 2 to 36) that represents the numeral system to be used


Problem:
Radix parameter becomes important if your string input starts with 0 or 0x.
If you are using parseInt("010") and expecting output as 10, then you are wrong!
Because, parseInt at back end will consider any number starting with 0 as octal number so the output of "010" will be 8! Similarly any number starting with 0x will be considered as hex number, e.g. parseInt("0x10") will result to 16!

Solution:
If you want to get decimal number always then use radix parameter.
So, parseInt("010",10) will tell parseInt to consider "010" as decimal so as to give output as 10.
Similarly you may use radix as 8 and 16 if you want octal and hex result respectively.




Difference between INT and INT(20) in mysql


Most of the database coders always have confusion about the difference between INT and INT(20).  

The myth is INT(20) describes the integer of size 20!
where the truth is, its not the size but the width!



Below article will make it simple to understand.
MySQL supports an extension for optionally specifying the display width of integer data types in parentheses following the base keyword for the type. For example, INT(4) specifies an INT with a display width of four digits. This optional display width may be used by applications to display integer values having a width less than the width specified for the column by left-padding them with spaces. (That is, this width is present in the metadata returned with result sets. Whether it is used or not is up to the application.)
The display width does not constrain the range of values that can be stored in the column. Nor does it prevent values wider than the column display width from being displayed correctly. For example, a column specified as SMALLINT(3) has the usual SMALLINT range of -32768 to 32767, and values outside the range permitted by three digits are displayed in full using more than three digits.


How To calculate exact width of an element from CSS

Background:
When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. In actual case that element is always affected by padding, border and margin.

Example: Let's say I have set css for a div as given below:


width:250px;

padding:10px;
border:5px solid gray;
margin:10px;


Now,from width property, it is clear that div consumes 250 pixels. But are we looking at css in a correct way???
Observe other properties. Padding, border and margin all are consuming few pixels. So what is the full width of a div?

Formula: 

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Let's calculate it in our case:

Total element width = 250 + 10 + 10 + 5 + 5 + 10 + 10 = 300

So in actual case, div will consume 300 pixels and not 250!!!

Many of us face issues while designing user interface. One of the reason is many times we miss the fact, that we have learned just now.

Note: You can use below formula to calculate exact height of an element:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Solution to avoid binding Events Multiple times to a particular control using jquery


Background: 
I created a Popup which is populated when I click a link.Popup has a button to which I have bound a click event that open a new window. I am doing everything using jquery.

Scenario:

  1. I open Popup 1st time,When I click button a new window gets opened.
  2. I close and reopen popup(this is 2nd time), now I click button. At this time two window gets opened.
  3. I close and reopen popup(this is 3rd time), now I click button. At this time three window gets opened.


What went wrong:
My code to open popup was correct but what I did wrongly was a minor but a serious mistake.
I wrote a code of binding event to button, inside the function and I was calling it each time I open a popup!
So, basically each time my function was getting called it was binding event to button. That means, button was getting bound multiple times with the same event!

Solution I applied:
To handle this case, I moved my event bind function call to the document.ready function.
That means, each time my button will get rendered, I will bind event as on each rendering  button will not retain previous binding.