CodingForums.com - Resolved Loading indicator question

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Resolved Loading indicator question (http://www.codingforums.com/showthread.php?t=287539)

durangod

02-12-2013 09:05 PM

Loading indicator question

I am doing a loader indicator (image with some text next to it) while the page loads.

But im not having so much success with it.

right after the body tag i have this

Code:



<div id="loading-mask"></div> 

 <div id="loading">

   <div class="loading-indicator"></div>

 </div>

Then right after that i have the js

Code:

<script type="text/javascript">

document.getElementById('loading-indicator').innerHTML = 'Loading file...';

</script>

The issue is that it comes up and displays but it just sits there, it does not end and load the page.

Not sure what i am mssing here or maybe i dont have this in the right place in the file. Should it go on the very bottom of the file?

sunfighter

02-12-2013 09:21 PM

Code:

document.getElementById('loading-indicator').innerHTML = 'Loading file...';

loading-indicator is not an ID it's a class.

And don't see where your loading anything. Is that somewhere else?

durangod

02-12-2013 09:29 PM

good eye i was cleaning it up and i removed the span because i had my own message and i honestly did not realize it was the id it should look like this

same js as above but this is dif

Code:



<div id="loading-mask"></div>

 <div id="loading">

    <div class="loading-indicator">

     <span id="loading-indicator">Loading. Please wait...</span>

    </div>

  </div>

see any issues here ?

Philip M

02-12-2013 09:44 PM

This may be useful:-

Code:

<html>

<head>



<style type = "text/css">

.styling{

background-color:black;

color:red;

font: bold 24px MS Sans Serif;

padding: 6px;

}

</style>



</head>





<body onload = "showLoad()">



<br><br>

<center>

<span id = "a" class = "styling"></span>

</center>



<script type = "text/javascript">

var num = 0;  

var tim;

var txt = "Loading, please wait ........";

document.getElementById("a").innerHTML = txt;



function showLoad() {

num ++;

if (num == 5) {  // erase after 5 seconds, adjust to suit

document.getElementById("a").style.display="none";

window.clearTimeout(tim);

}

else {

tim = window.setTimeout("showLoad()", 1000);

}

}



</script>





</body>

</html>

durangod

02-12-2013 09:47 PM

thanks all.. :)

All times are GMT +1. The time now is 09:07 PM.