Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create Dynamic Content load on click using JQuery?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3
    • 0
    • 724
    Comment on it

    Hello reader


    In this blog! I am going to tell you how to create Dynamic Content Load using jQuery. Generally, we see the content loader on many websites and on some registration form when we click on the next step button after completed the current step, before it takes us on next page it takes sometime to load the next page and in that time period, it shows the circle rotating.

    So if you want to add loader in your site the code below will help you

     

    jQuery :

    $(document).ready(function() { 
    	  $(".button").click(function(){
    		   $('#loader').show();
    		    $('.button').prop('disabled', 'true');  /* after clicked, button will be disabled */ 
    			setTimeout(function() {
    		            $('#loader').hide();   /*hide loader image */
    		            $('.content').show();  /*show content */
    		    }, 1000);  /* taking time to loading the the content */
    	  });
    });
    

    In the above code, when we click the button, loader will start rotating till the content is not loaded and then after loading the content the clickable button and loader image will get disabled.

     

    CSS:

    #loader,
    .content{
    	display: none;
    }
    Button{
        padding: 5px 10px; 
        background: #f1f1f1;
        border:1px solid #000; 
        position: relative; 
        border-radius: 5px;
        outline: none;
    }
    
    
    Button:focus{
        outline: 0 none !important;
    }
    Button:active{
       outline: none;
    }
    button img{
        position: absolute;
        left: 0; 
        right: 0; 
        margin: auto; 
        bottom: 0; 
        top: 0;
    }
    

     

    In above code, I have hidden loader image and content using block level property  “display:none”. The essential property used here is position: absolute and the parent element button is first positioned relative.

     

    Output: Below is the output of loader image rotating on the button.

    first image shows simple button, second with loader and third after loading content

     

           

     

      

    You can see live demo here: https://jsfiddle.net/mani_123/9obhtk3v/show/  

     

    HTML:

    <div class="loader1">
    		<button class="button" >loader 
    			<img id="loader" src="http://besseges2016.squaresystem.co.uk/images/slider/loading.gif">
    		</button>	
    		<div class="content">
    			<p>
                  Prime Minister Narendra Modi met senior officials on Monday to review the pros and 
                  cons of the India-Pakistan Indus Waters Treaty amid growing pressure on New Delhi to 
                  scrap the agreement.
                </p>
    		</div>
    </div>
    

     

    How to create Dynamic Content load on click using JQuery?

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: