CODEWITHSUNDEEP
javascriptjqueryhtml
Justin Petty
Justin Petty

Reputation: 265

Need Help fixing my page loading spinner

I have a hidden div that gets displayed when a button is clicked that shows a spinner, but if you hit the back button after leaving the page the spinner is still visible. I think the javascript needs the $(document).ready(function() { but I'm not sure how to implement it. I don't want the spinner visible if the user presses the back button.

This is what I have so far. The Javascript 

<script type="text/javascript">

function showDiv() {
   document.getElementById('spinner').style.display = "block";
}

</script>

The Div and link used to show the div

<div id="spinner"  style="display:none;" class="spinner" ><img src="images/loader2.gif" alt="Loading"/></div>

<a class="index_buttons" href="search_members.php" onclick="showDiv()">Search Members </a>

Upvotes: 2

Views: 598

Answers (3)

Amyth
Amyth

Reputation: 32949

use document ready as follows:

$(document).ready( function() {
    hideSpinner(); // Initiates the hide function when document is ready.
});

function hideSpinner() {
   $('#spinner').hide();
}

Upvotes: 0

Darren
Darren

Reputation: 70728

To hide the spinner on page load do:

 $(document).ready(function() {
       $("#spinner").hide();
 }

Upvotes: 2

Aesthete
Aesthete

Reputation: 18848

Since you're tagged this as jQuery..

/* Calls this function on ready */
$(function() {
  /* Hide the spinner whenever the page loads */
  $("#spinner").hide();
      ;
  $(".index_buttons").click(function() { $("#spinner").show(); });
});

Now, everytime a button with the class index_buttons is clicked, the button will be visible. If you want to toggle the spinner, you might want to look at toggle().

Upvotes: 0

Related Questions