CODEWITHSUNDEEP
html
Mukesh Paniker
Mukesh Paniker

Reputation: 3

Loadingoverlay in html with Javascript

I am trying to place an overlay and loading spinner to block user interaction till loading complete in html file.

With reference of the tutorial http://www.jqueryrain.com/?eKV1bCMa trying to place a Whole page Overlay and Single element Overlay. But it is not working. Seeking help to get it done Thank you Given below is the code.`

<script src="loadingoverlay.js"></script>
<script src="loadingoverlay.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>


<script>
$(document).ready(function(){
    $("#firstdata").click(function(){
        $("#div1").load("data2.html");
    });
	 $("#driver").click(function(){
        $("#div1").load("demo_test.txt");
    });
});



	// Show full page Loading Overlay
	
$(document).ready(function(){
	$("#firstdata").click(function()
	{
	$.LoadingOverlay("show");

	// Hide it after 3 seconds
	setTimeout(function(){$.LoadingOverlay("hide");}, 3000);

});	
});

// Show element Loading Overlay
	
$(document).ready(function(){
	$("#driver").click(function()
	{
	$("#element").LoadingOverlay("show");

	// Hide it after 3 seconds
	setTimeout(function(){$.LoadingOverlay("hide");}, 3000);

});	
});
	
</script>
<body>

<div id="element">
 <input type = "button" id = "firstdata" value = "External Content" /><br>
<br><br>
<input type = "button" id = "driver" value = "Load Data" />
<br><br><br><br>
</div>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
</body>

`

Upvotes: 0

Views: 4954

Answers (2)

Eggplant
Eggplant

Reputation: 2013

First of all, you must load jQuery before any other plugin, otherwise they won't work. Then, there's no need for a full and a minified version of the same script, so your script loading becomes:

<script src="jquery-1.9.1.min.js"></script>
<script src="loadingoverlay.min.js"></script>

About the code itself, I don't know if it will work as expected, but for sure you don't need all those $(document).ready handlers and timers. You can use only one and take advantage of the complete parameter of the .load() function. The whole script can be written as:

$(document).ready(function(){
    $("#firstdata").click(function(){
        $.LoadingOverlay("show");
        $("#div1").load("data2.html", function(){
            $.LoadingOverlay("hide");
        });
    });

     $("#driver").click(function(){
        $("#element").LoadingOverlay("show");
        $("#div1").load("demo_test.txt", function(){
            $("#element").LoadingOverlay("hide");
        });
    });
});

Upvotes: 1

Prajwal
Prajwal

Reputation: 419

You don't need any additional jquery library for this. It can be achieved by simple piece of basic css and jquery code. as below:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style type="text/css">

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: 0.5;
    display: none;
}
</style>


<script type="text/javascript">
    function showLoader(){
        //show loader onclcik of button
         $('.loader').css('display','block');
        setTimeout(function(){
            var changedText = 'Text changes';
            $('#div1').html(changedText);// enter text here to required changes
             $('.loader').css('display','none');
        }, 3000);    
}


</script>
</head>
<body>


<div class="loader"></div>

<div id="element">
<input type = "button"  value = "Load Data" onclick="showLoader();" />
</div>
<div ><h2 id="div1">Let jQuery AJAX Change This Text</h2></div>

Note: you can download loader image from http://www.ajaxload.info/ for reference.

Hope this will help

Upvotes: 0

Related Questions