7 Replies - 1244 Views - Last Post: 30 October 2013 - 11:25 PM

#1 DoxramosPS  Icon User is offline

  • D.I.C Head

Reputation: 4
  • Posts: 171
  • Joined: 07-October 12

Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 02:39 PM

I'm attempting to have a script that checks for All dependancies before it allows the user to continue. When they click the Check Settings button I want it to display a div for 5 seconds that will have a background image of a loading gif.
My code inside my HTML is
<input type="submit" name="run_checks" id="run_checks" action ="" onclick = "RunLoading()">

And then in the head of my page I currently have: (Might Need a Little Clean Up.)
	<script type="text/javascript">
	function ShowLoading() {
		document.getElementById('loading').style.display = "block";
}
	</script>
	<script type="text/javascript">
		function HideLoading() {
		document.getElementByID('loading').style.display="none";
		}
		function startTimer() {
		var tim =window.setTimeout("HideLoading()", 5000);
		}
		function RunLoading() {
		ShowLoading(); startTimer();
		}
	</script>

Appreciate any help that may be given.

Is This A Good Question/Topic? 0
  • +

Replies To: Showing a Div for 5 Seconds After Click

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 8964
  • View blog
  • Posts: 33,624
  • Joined: 12-June 08

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 02:41 PM

Quote

Appreciate any help that may be given.

Would you be more specific? You did not outline the problem/error/erroneous behavior that is currently happening.
Was This Post Helpful? 0
  • +
  • -

#3 DoxramosPS  Icon User is offline

  • D.I.C Head

Reputation: 4
  • Posts: 171
  • Joined: 07-October 12

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 02:45 PM

Sorry about that. When I have the onclick function as ShowLoading() it works fine, but when I try to run RunLoading() It ends up just hanging after ShowLoading. Shows the Div, but the Div Never leaves. So the User would have a neverending loading icon.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3253
  • View blog
  • Posts: 10,908
  • Joined: 12-December 12

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 02:49 PM

Your casing is wrong: getElementByID. Your browser's console should have an error message.
Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3253
  • View blog
  • Posts: 10,908
  • Joined: 12-December 12

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 02:56 PM

I avoid using the click event of a submit button though. I would use the submit event of the form, or perhaps use a (non-submit) button. I believe the click event of the submit button is hard to control cross-browser. That is, it may submit the form before your event-code is executed. (Unless you return false; the form should be submitted anyway.)

This post has been edited by andrewsw: 30 October 2013 - 02:56 PM

Was This Post Helpful? 0
  • +
  • -

#6 DoxramosPS  Icon User is offline

  • D.I.C Head

Reputation: 4
  • Posts: 171
  • Joined: 07-October 12

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 02:56 PM

It wasn't giving me any error message. I appreciate it Andrew. Not sure if this is a facepalm moment or a two eyes are better than one moment haha.
Was This Post Helpful? 0
  • +
  • -

#7 DoxramosPS  Icon User is offline

  • D.I.C Head

Reputation: 4
  • Posts: 171
  • Joined: 07-October 12

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 04:06 PM

Hopefully I can get more information on this. It's the same code just a little more added. Gonna break it down step by step because now it's not executing anything whatsoever, so hopefully someone can tell me where I messed up.
<script type="text/javascript">
		

		function ShowLoading() {
		document.getElementById('loading').style.display = "block";
		}
		
		function  ShowResults() {
			$.post('install/functions/run_checks.php', $("#runchecks").serialize(), functions(data) {
					$('#results').html(data);
			});
		}
		
		function HideLoading() {
		document.getElementById('loading').style.display="none";
		}
	
		function startTimer() {
		var tim =window.setTimeout("HideLoading()", 3000);
		}
	
		function startTimer2() {
		var tim2=document.getElementById("ShowResults()", 3000);
		}

		function RunLoading() {
		ShowLoading(); startTimer(); startTimer2();
		}
	</script>



		function ShowLoading() {		function startTimer2() {
		var tim2=document.getElementById("ShowResults()", 3000);
		}
		document.getElementById('loading').style.display = "block";
		}


Here I'm trying to get the Loading Div with the loading background gif to show
		function startTimer() {
		var tim =window.setTimeout("HideLoading()", 3000);
		}


Starts a Timer that lasts 3 seconds and after the 3 seconds then executes my HideLoading Function
		function HideLoading() {
		document.getElementById('loading').style.display="none";
		}


Is Executed at the end of the Timer to Hide the Loading Div
		function startTimer2() {
		var tim2=document.getElementById("ShowResults()", 3000);
		}


Starts a Second Timer to pull results and display them in a div at the 3 second mark.
		function  ShowResults() {
			$.post('install/functions/run_checks.php', $("#runchecks").serialize(), functions(data) {
					$('#results').html(data);
			});
		}


Pulls The Information After the 3 Seconds from the run_checks.php script and displays them inside of the results div.

		function RunLoading() {
		ShowLoading(); startTimer(); startTimer2();
		}


Runs The ShowLoading Command then starts the timer to hide the loading div and pull the results.
Finally
<input type="submit" id="run_checks" id="run_checks" action="" onclick="RunLoading()">


Runs the Javascript when the user clicks the submit Button.
If anyone notices anything I did wrong then please let me know.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3253
  • View blog
  • Posts: 10,908
  • Joined: 12-December 12

Re: Showing a Div for 5 Seconds After Click

Posted 30 October 2013 - 11:25 PM

If nothing happens at all then I would expect there to be errors in the browser's console. I would also suspect that the jQuery library has not been attached.

But you have misspelt functions.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1