asked on

Adding a loading animation

I have a html/php script that grabs data from my sql db, it takes about 10 seconds for all the data to display on screen. So I wanted to add a loading animation called 'loading.gif' this is something I have never done before and I am looking for any help possible.

Not sure if I needed javascript for something like this.

<!DOCTYPE HTML>
<html>
    <title>Facebook</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    
<head>
<body>

<p>&nbsp;</p>
<p><center></center></p>
<p>&nbsp;</p>

<CENTER><p>
  <p><font face="verdana" size="1.5">Please login</font></p>
  <p><font face="verdana" size="1.5">To see the information calculated, please review below.</font></p>
</CENTER>

<p>&nbsp;</p>
<p>&nbsp;</p>

  <form action='datagrid/datagrid_port.php' method='POST'>

<CENTER>
  <table width="568" height="122" border="0">
    <tr>
    <td width="245" rowspan="3" align="center" valign="middle"><img src="images/T_image.png" /></td>
    <td width="133" height="52" align="left" valign="bottom"><img src="images/t-login.png" /></td>
    <td width="176" align="left" valign="bottom"><input name="t_name" type="text" class="formFields" id="t_name" value="<?php print "$t_acc"; ?>" size="28" maxlength="36" /></td>
  </tr>
  <tr>
    <td height="22" align="left" valign="top"><img src="images/t-passwd.png" /></td>
    <td align="left" valign="top"><input name="t_passwd" type="password" class="formFields" id="t_passwd" value="<?php print "$t_passwd"; ?>" size="28" maxlength="24" /></td>
  </tr>
  <tr>
    <td height="30" align="left" valign="top">&nbsp;</td>
    <td align="center" valign="top"><input name="cancel" type="reset" id="cancel" value="Cancel" />
      <input name="Next" type="submit" id="Next" value="Submit" /></td></tr></table></CENTER>

<p>&nbsp;</p>

<CENTER> <font face="verdana" size="1.5">

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Murali Murugesan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

John Doeherty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Richard Quadling

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

g0mab2

ASKER

Thanks guys, here is what I have come up with, but for some reason it still is not working properly.

I cut out all the body info to keep it short.

<!DOCTYPE HTML>
<html>
    <title>Ranking</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />


<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">    
    <!--
#loadingDiv{
	position:relative;
	top:250;
	right:800;
	z-index:100;
	}
-->
</style>

    <SCRIPT TYPE="text/javascript">
<!--
    function toggleDiv(divid){
    	
	    if(document.getElementById(divid).style.display == 'none'){
	      document.getElementById(divid).style.display = 'block';
	    }else{
	      document.getElementById(divid).style.display = 'none';
	    }
  }
//-->
</SCRIPT>

<body>

<div id="loadingDiv" style="display:none">
 <img id="loading" src="images/loading.gif"/>
</div>

</body>
</html>

Open in new window

John Doeherty

You're not triggering toggleDiv() anywhere?!? Is that the page with the results or the page that submits?

g0mab2

ASKER

That the was page that submits, I have nothing on the page that has the results.

John Doeherty

Well, if I understand you correctly you
need the 'loading' image on the page with the results since that's where the delay occurs; put it there and change it around: have the image visible on loading of the page (I'm assuming it's an animated gif) and at the end of your data/table (which your parsing out w php I assume) parse out the JavaScript to make your image go away, something like

echo "<script>";
echo "toggleDiv(loadinDiv);";
echo "</script>";

You might want to look into AJAX for a smoother solution...

JD

SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

g0mab2

ASKER

Thanks for the help guys, all of the feedback helped me get it working exactly how I wanted.