Jquery Spinner doesn't work on Chrome -
i have implemented jquery spinner works fine on firefox doesnt work on chrome. have created 2 functions called start spinner , stopspinner here code
function startspinner(){ $(document).ready(function() { console.log('spinner should getting shown now'); $('#spinner').show(); }); } function stopspinner(){ $(document).ready(function() { console.log('spinner should getting shown now'); $('#spinner').hide(); }); }
css class
.spinner { position: fixed; top: 50%; left: 50%; margin-left: -50px; /* half width of spinner gif */ margin-top: -50px; /* half height of spinner gif */ text-align:center; z-index:1234; overflow: auto; width: 100px; /* width of spinner gif */ height: 102px; /*hight of spinner gif +2px fix ie8 issue */ }
html
<div id="spinner" class="spinner"> <img id="img-spinner" src="images/spinner.gif" alt="loading" /> </div>
so whenever want call, use startspinner(); , stopspinner();
thanks
why using
$(document).ready();
in both functions? jquery documentation ( http://api.jquery.com/ready/ ) - "specify function execute when dom loaded." don't see reason using twice, think better:
$(document).ready(function() { $('#spinner').show(); }); $(document).on('click', function() { hidespinner(); }); function showspinner() { console.log('spinner should visible'); $('#spinner').show(); } function hidespinner() { console.log('spinner should disappear'); $('#spinner').hide(); }
i used click event remove spinner, event (example: ajax has finished loading, img loaded, login process complete or else). dom ready means "do dom tree ready".
Comments
Post a Comment