While implementing an ajax request, I want my users to see a spinner for visual feedback. Surprisingly, the spinner works flawlessly on Firefox 13, but fails to function on Chrome and IE9 even though the ajax request takes approximately 1.2 seconds to complete.
$('#fileManager').on('click', '.navSpan', function() {
/* Display spinner */
$('.fileManager-spinner').show();
/* Synchronous ajax fetch and manipulation code here */
/* Hide spinner upon completion */
$('.fileManager-spinner').hide();
}
If I remove the
$('.fileManager-spinner').hide();Furthermore, when debugging the script and pausing execution between .show() and .hide(), the spinner continues to display on the screen. Yet under normal circumstances, it remains hidden.
Shown below is the HTML markup for the spinner:
<div class="fileManager-spinner" style="display: none;"></div>
And here is the CSS styling for the spinner:
.fileManager-spinner
{
position:relative;
top:50%;
left:50%;
margin-left:-50px; /* half width of the spinner gif */
margin-top:-50px; /* half height of the spinner gif */
text-align:center;
z-index:1234;
overflow:auto;
width:100px; /* width of the spinner gif */
height:102px; /*hight of the spinner gif +2px to fix IE8 issue */
background-image:url(../../Images/fileManager/loader/loaderBig.gif);
background-repeat:no-repeat;
}
What could be causing this issue? Any insights would be appreciated. Thank you.