Monday, October 15, 2012

How to add loader while page load

How to add loader while page load
Some time page is taking time to load, Generally this happened because adding lots of big images or lots of logic behind the page. Then some time user may not understood this, So better way is add loading image or put some text on page so user can easily understood something is loading behind the page.

I will explain you how to add loading image with jQery.

Step1. First we need to take image on page, For this we can choose two way
1. Add div tag add set loading image to background using css
2. Add image tag directly.

e.g <div class="loader"></div>

Step2: Add some CSS to show loader image in div

.loader {
      position: absolute;
   margin: 0 auto;
   z-index: 9999;
   background: url('icon-loader.gif') no-repeat;
      top: 50 px;
   cursor: wait;
}

This css will keep loading image to middle, But if you want lo do something liek gmail or google, then you can make position to fixed and set left to 0 and set background color to yellow.

Step 3 - For displaying some effect we can go through jQuery. In jQuery implement page load event and use fadeout function.

e.g

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(window).load(function(){
            $('div.loading').fadeOut(1000);
        });
</script>

If you want to submit form and page and then after click on some action page will take time to load then we can use same code for that also. But for that you need to create a function  with fadeout statement, And call this function after calling your action or submit page.

jQuery html() Method

How to set and get inner HTML using jQuery

In jQuery we can get inner HTML using html(0 method, This method will return inner HTML only first element in document.

i.e if jQuery found more than one selector then its consider only first selector.

Syntax -
1. For get use .html() - To get inner HTML of selector use this method.
2. For set use - .html(string) - To set inner HTML, with one string parameter, this parameter consider as HTML.

Example 1 - You can see following simple example to see how html() funciton work.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        function setText() {
            $('message').html('This is testing message');
        }

        function getText() {
            var text = $('message').html();
            alert(text);
        }
    </script>
</head>
<body>
    <div id="message">This is demo message</div>
    <input type="button" onclick="setText();"/>
    <input type="button" onclick="getText();"/>
</body>
</html>
 

Thursday, October 11, 2012

How to swap variables values?

Swapping is to change values of each other.
e.g I have two variables

int a = 5;
int b = 7;

I want to swap both  values like

a = 7l and
b = 5

1. Using third variable - We can swap values taking third variable.

e.g

int a = 5.;
int b = 7;

int temp;

//Assign value to temp variable
temp = a;

//Change the value of a to b
a = b;

//Last set value of b
b = temp;

So now output is a = 7 and b = 5

2. Using addition and Subtraction method -
int a = 5;
int b = 7;

//Make addition of both numbers
a = a + b;

//To find out value of b
 b = a - b;

//To find the value of a by new b value
a = a - b;

3. Using Multiplication and Division method -
int a = 5;
int b = 7;


//Make addition of both numbers
a = a * b;


//To find out value of b
 b = a / b;

//To find the value of a by new b value

a = a / b;
 
 

Total Pageviews