How can we create loading window in dark background effect
We would like to place, dark background effect ( normally we are using for Images gallery. ) for Loading a page. Actually we have a HTML form, with textarea box and a submit button onl开发者_JAVA技巧y. We would simply getting the data from PHP through ajax. here we would like to implement Loading image with dark background effects. When a whole data will print on the screen then , the loading image with dark background back to the normal background.
Thanks
Rodger
Update :- Using this code for getting value from php file. I m beginner in Ajax/ JS, if anybody can give me the code structure, that's good for us.
var anchorUrl2 = 'script.php';
var anchorPars1 = 'sqt=abcsd';
var anchorAjax2 = new Ajax.Updater( 'div-id', anchorUrl2, { method: 'get', parameters: anchorPars1 });
- On form submit append a div to
body
tag - Set this div's position to fixed, width and height to window's width and height
- Assign a semi-transparent black PNG as it's background
- Write a text inside saying 'Please wait'
- Use a callback function when ajax request done to remove this div
Try this, the code should be self explanatory. It's jquery code but you can take the idea out of it.
<script type="text/javascript>
$(document).ready(function(){
$("#contentToHideWhileLoading").hide();
$("#contentToShowWhileLoading").show();
$.get(url, {parameters: anchorPars1}, function(data){
$("#placeToAppendTo").append(data.dataToAppend);
$("#contentToShowWhileLoading").hide();
$("#contentToHideWhileLoading").show();
$("#placeToAppendTo").show(); // if it wasn't visible yet
});
});
</script>
精彩评论