Prevent iframe white flash issue while loading

I had a link on my website. I had written a click event for link to load iframe. But every time I was clicking the link, iframe was taking time to load and thus displaying white flash.

I tried to get help from internet, found many solutions with css and javascript, but they were either complex to implement or unable to solve this problem.

I wonder why I didn't try anything with JQuery and when I tried, the issue was solved!
Below is the logic that I followed:

To explain the solution let's take below as my link and iframe ids.
my link id: dwnloadDoc
my iframe id: myiframe

Step1: Write iframe load event in jquery as given below.

$('#myiframe').load(function(){
$(this).show();
});

Step2: Hide iframe on link click

$('#dwnloadDoc').click(function(){
$('#myiframe').hide();
//link click logic
});

How It worked:
When I will click the link, my iframe will get hidden. I  will bring data from server and will load it in iframe.
My iframe load event will get called after iframe is loaded which will show the iframe.
That means iframe will be hidden in its loading period, avoiding white flash.


Understanding Boxing and Unboxing in C#

Boxing is the process of converting a value type to the type object. Unboxing extracts the value type from the object. Let’s see how boxing and unboxing works.



Boxing: This is an implicit process. That means developer doesn’t need do any type casting.
See below line of code:
int boxingInteger = 123;

This will create a block on stack memory area for variable of type int.

Stack

boxingInteger


Now see below line of code:
object myObject = boxingInteger; // boxing

This is the step where boxing is occurring. When above line is executed, two things will occur at backend.
1.       An object will be created on heap area that will hold value of boxingInteger.
2.       Reference type myObject will get created that will point to memory area allocate in above step.
Note: It will not affect boxingInteger variable on stack. The entry on stack will be there after boxing.



Unboxing: It is reversing of boxing. But it is explicit. Developer need to do type casting explicitly. It will type case object on heap to the value type.
From above example,
int unboxingInteger = (int)myObject;  // unboxing

It will convert value at my object from object type to type int and it will assign this value to variable unboxingInteger which will get created on stack area.

Stack

unboxingInteger
boxingInteger



Myth about Boxing:
Myth: Below code does boxing.
string sMyString = “Box”;
object myObject =   sMyString

Truth: string is not a value type variable. It is a reference type variable. So when you are assigning sMyString to myObject, you are just copying reference. There is no value type to object type conversion is happening here.


To get depth knowledge check this:
http://www.codeguru.com/Csharp/Csharp/cs_syntax/article.php/c5883



Difference between const char *p and char *const p


const char *p and char *const p  both look similar, but are different!
const char *p -- It is a non constant pointer to constant data. That means the data to which it is pointing can never be changed.
For example,
char mychar = 'a';
const char *p = & mychar;
*p = 'b'; //not possible as value at pointer is constant i.e. 'a'

char *const p  -- It is a constant pointer to non constant data. That means, this pointer points to address that is constant and thus pointer cannot point to other address.
For example,
char mychar = 'a';
char mychar2 = 'z';
const char *p = &mychar;
*p = 'b';
p = &mychar2; //not possible as you cannot change address value of pointer


What is location.search in javascript?

location is an object that provides information about current url.
"search" is a property of location object that gives query portion of the url.
For example,
if url is : http://www.sample.com?id=1&qs=5
then window.location.search will return "?id=1&qs=5".
You can apply regular expression on this result to get query string parameters in javascript/jquery in case if you don't want to go with any plugin that reads these values.


Update value against the same key in hashtable using C# code

There are two ways you can add data to your Hashtable as shown below:
ohashtable[Key1] = Value1;
ohashtable[Key2] =  Value2;
ohashtable[Key3] = Value3;

Or like this:
ohashtable.Add(Key1, Value1);
ohashtable.Add(Key2, Value2);
ohashtable.Add(Key3, Value3);

There is a difference between these two ways. 
Using Add method, you can't have update the value against existing Key. But you can, if you use the square brackets. 

For example,
ohashtable.Add(Key1, Value1);
ohashtable.Add(Key1, Value2); //this will throw exception at run time

Whereas,
ohashtable[Key1] = Value1;
ohashtable[Key1] =  Value2; // this will allow the entry in hashtable
It won't add a new key but will update the value against the existing key.

Difference between malloc and calloc in C

Malloc and Calloc are functions provided to allocate memory at run time.Both of these functions return pointer to first block of  allocated memory in success and return null in case of failure.
Though their purpose is same, there are few differences between them.


1. No. of Arguments: 
Both these functions vary in number of arguments they accept.


void *malloc(size_t size);

void *calloc(size_t n, size_t size);

Malloc takes only one argument that describes size of block to be allocated in memory.

e.g. oPointer = (int *)malloc(sizeof(int) * 2); will allocate size of 4 bytes(size of int is 2 bytes).
Whereas, Calloc takes two arguments number of blocks and size of each block.
e.g. oPointer = (int *)calloc(2 ,sizeof(int)); will allocate size of 4 bytes(size of int is 2 bytes).


2. Default Initialization: 
Malloc does not initialize the memory allocated whereas calloc initializes the allocated memory to default (e.g. Zero).


3. Calculation of memory reuired:
Malloc function does not calculate total memory to be allocated, the argument itself describes the total memory whereas, calloc accepts two argument and internally calculates their product to find total memory to be allocated.


Script to check error message from ajax call

Ajax call captures error message/exception that are thrown on its failure. Below is the way to get that error message.



$.ajax({
                type: "POST",
                url: "Sample/Method",
                dataType:"html",
                success:function(response){
                  //process response object
                    alert("Success!!!");
                },
                error:function (xhr, ajaxOptions, thrownError){                                
                alert(xhr.status); //get error status code                  
                alert(thrownError); //get error message

                alert(xhr.responseText); //get error details
                }    
            });

Below is the breif description of these error terms:
  • xhr.status -- Use this when you have to deal with the error status code, for example session expiration.
  • thrownError -- Use this when you want to display/use error message as it is.
  • xhr.responseText -- Gives you details of error message like cause of error, source of error, etc. Helpful for coders as they come to know cause of error at early stage.




Links for learning JQuery

Hi...found some good links that will be helpful to learn JQuery and also to improve it. Please have a look at them...

  1. http://jqueryui.com
  2. http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
  3. http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/


Best practice for using Html Spacing


I was confused with the difference between   and  . Found one good point of UI designing. So sharing with you. Please have a look.

You  might have tried to add spaces between two controllers using either   or  . If you are confused with what to use, here is the difference between two:

  is the character entity reference while   is the numeric entity reference.
They are the same except for the fact that the latter does not need another lookup table to find its actual value.

So, it’s better if you use  . to improve performance!


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.