I want to make a div dimming layer on php with a please wait window

My web server is hosted on RHEL5.4
I have a php form to upload file, I want after the user enters the data a dimming layer to fold down to disallow the user to modify any entry, and then fold down movable window asking to wait with an animated gif.
I am new to php, as well as javascript, I have searched the internet, and i managed to create the movable window, but:
   1) The animated gif i not working in IE.
   2) I failed to create thefolding down dimming layer.
Here is my code:
<script type="text/javascript">
function AjaxFunction(cat_id)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
                  try
                                        {
                                 httpxml=new ActiveXObject("Msxml2.XMLHTTP");
                                }
                        catch (e)
                                {
                        try
                {
                httpxml=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                        catch (e)
                {
                alert("Your browser does not support AJAX!");
                return false;
                }
                }
  }
function stateck()
    {
    if(httpxml.readyState==4)
      {
var myarray=eval(httpxml.responseText);
for(j=document.uploadform.subcat.options.length-1;j>=0;j--)
{
document.uploadform.subcat.remove(j);
}


for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.uploadform.subcat.options.add(optn);
}
      }
    }
        var url="dualcombo.php";
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("pleasewait").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("pleasewait").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("pleasewait").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("pleasewait").style.top=tempy+e.clientY-offsety+"px"
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
tempx=parseInt(document.getElementById("pleasewait").style.left)
tempy=parseInt(document.getElementById("pleasewait").style.top)

dragapproved=true
document.getElementById("pleasewait").onmousemove=drag_drop
}

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("pleasewait").style.display=''
document.getElementById("pleasewait").style.width=initialwidth=width+"px"
document.getElementById("pleasewait").style.height=initialheight=height+"px"
document.getElementById("pleasewait").style.left="30px"
document.getElementById("pleasewait").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
}
}


function stopdrag(){
dragapproved=false;
document.getElementById("pleasewait").onmousemove=null;
}

function showloader() {

document.getElementById('pleasewait').style.display='';
document.getElementById('filename').readOnly = true;
document.getElementById('cat').readOnly = true;
document.getElementById('subcat').readOnly = true;
document.getElementById('description').readOnly = true;
document.getElementById('ownership').readOnly = true;
document.getElementById('uploaded').readOnly = true;
}

function hideloader() {

document.getElementById('pleasewait').style.display='none';

}
</script>
<?
  if(!isset($_SESSION))
  {
  session_start();
  }
//Checking that the page is not hacked
 if (!isset($_SESSION['my_name']))
   { header( 'Location: index.php' );
     die();
   }
  //Initializing the variables
        $old_filename="";
        $old_cat_id="";
        $old_description="";
        $old_ownership="";
        if (isset($_SESSION['new_filename'])){$old_filename=$_SESSION['new_filename'];}else{$old_title="";}
        if (isset($_SESSION['new_description'])){$old_description=$_SESSION['new_description'];}else{$old_description="";}
        if (isset($_SESSION['new_ownership'])){$old_ownership=$_SESSION['new_ownership'];}else{$old_ownership="";}

?>
<form name="uploadform" ENCTYPE="multipart/form-data" method='POST' action='index.php?location=checkupload' onsubmit="showloader();">
<center>
<table border="1">
<tr>
<td>
<table border="0" cellspacing="0" align="center" >
<tr>
<th colspan="2" bgcolor=#009999><font size="3" face="Arial">Add New File</font></th>
</tr>
<tr>
<td bgcolor=#C3D8F0><font size="2" face="Arial" color=BLACK><br><b>File Name</b><br></font></td>
<td><br><input type="text" name="filename" size="30" maxlength="30" VALUE=<?=$old_filename?> ><br></td>
</tr>
<tr>
<td bgcolor=#C3D8F0><font size="2" face="Arial" color=BLACK><br><b>Category</b><br></font></td>
<td><br>
    <select name=cat onchange="AjaxFunction(this.value);">
    <option value=''>Select Main Category</option>
    <?
     //Connecting to DB
     mysql_connect("localhost", "user", "password") or die(mysql_error());
     mysql_select_db("db") or die(mysql_error());
     $q=mysql_query("select * from cat;");
     while($n=mysql_fetch_array($q)){
     echo "<option value=$n[cat_id]>$n[cat]</option>";
     }
    ?>
    </SELECT><br>
</td>
</tr>
<tr>
<td bgcolor=#C3D8F0><font size="2" face="Arial" color=BLACK><br><b>Sub Category</b><br></font></td>
<td><br>
        <SELECT name=subcat>
        <option value=''></option>
        </SELECT><br>
</td>
</tr>
<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen)
{
  return (Object.value.length <= MaxLen);
}
-->
</script>
<STYLE type='text/css'>
textarea {overflow-x: hidden; overflow-y: hidden}
</STYLE>
<tr>
<td bgcolor=#C3D8F0><font size="2" face="Arial" color=BLACK><br><b>Short Description</b><br></font></td>
</td>
<td><br>
<TEXTAREA name="description" rows=3 cols=50 onkeypress="return imposeMaxLength(this, 140);"><?=$old_description?></TEXTAREA>
<br>
<font size="1" face="Arial" color=BLACK>Write a short description about your file for maximum 140 Characters</font>
</td>
</tr>
<tr>
<td bgcolor=#C3D8F0><font size="2" face="Arial" color=BLACK><br><b>File Ownership</b><br></font></td>
</td>
<script language="javascript" type="text/javascript">
<!--
function checkOwnership(Object, Value)
{
   if(Object.value == "Public") {
  alert('Your file will be available for public');}
}
-->
</script>
<td><br>
<input type="radio" name="ownership" value="Private" checked onclick="checkOwnership(this, value );"> Private
<input type="radio" name="ownership" value="Public" onclick="checkOwnership(this, value );"> Public
<br>
</td>
</tr>
<tr>
<td bgcolor=#C3D8F0><font size="2" face="Arial" color=BLACK><br><b>Load File</b></font></td>
</td>
<td>
<br>
<input name="uploaded" type="file" size="50" maxlength="50" value="" />
<br>
</td>
</tr>
<td bgcolor=#C3D8F0>
</td>
<td>
<center><input type="image" name="upload" src="img/upload.gif" VALUE="Upload" alt="Upload" /></td></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</form>

<div id="pleasewait" style="position:absolute; cursor:hand; left:350px; top:160px; width:300px;background-color:#C3D8F0; border:1px solid #464f5a; display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
      <Center>
      <br>
      <font size="2" face="Arial" color=BLACK><br><b>Uploading File, Please Wait...<br></b></font>
      <br>
         <img src="img/ball-loader.gif" alt="loading">
      <br><br><br>
      </Center>

</div>
<script type="text/javascript">

hideloader();

</script>

    Can someone please guide me how to modify my code to achieve my requirements?
Ashraf-HassanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dukeofgamingCommented:
Try Mootools. If I understood you correctly, there is something that looks like what you need called the Spinner class:

http://mootools.net/docs/more/Interface/Spinner

Just did this working example: http://jsfiddle.net/WSbS3/1/


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ashraf-HassanAuthor Commented:
It looks like that what I want, I have checked the example but I can see you are using the spinner in the corner, how can I integrate that with my code to use it all over the document?, and how to solve the problem of the animated GIF?
0
Ashraf-HassanAuthor Commented:
This mootools is are really very complicated even in download itself, I tried to download 2 js scripts:
mootools-1.2.4-core-server
mootools-1.2.4-core-nc
and neither of the them has the spinner class.
Any help please in implementing the dimming layer, and the solve the problem of animated gif?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

dukeofgamingCommented:
Mootools has two modular libraries: core and more.

With core you essentially do low level stuff, like classes, and DOM manipulation. With more you do stuff targeted to the end user or aiding the developer, like effects and form validation out of the box.

You can get the Spinner class (or all of mootools more) here: http://mootools.net/more

If you want to know what mootools is all about as a framework (as it is quite different from other frameworks in a much better way) I'd recommend you watching this video: http://www.youtube.com/watch?v=6nOVQDMOvvE

What do you mean by "problem of animated gif"?. Note that the animated gif is inserted by CSS.

Regarding the question of how to use it all over the document with your code, could you please be more specific?.
0
Ashraf-HassanAuthor Commented:
I have downloaded the more mootools, and as you can see in the attachement if you search in the file you can not find the word spinner.
for the animated gif problem I have a div with id called pleasewait it displays an animated gif, I found the gif is animated in firefox and not in the IE, can you help me in that?
Regrading the code, in the code above how can integrate it with the moo tools to have a dimmer layer and the pleaswait message box, so in total we will have 3 layers.
mootools-1.2.4.4-more.txt
0
dukeofgamingCommented:
You need to select the spinner class before you choose to download the more library, when you download core or more through the official site you can choose just the parts you need. Look for "Spinner" in the download page I gave you and then choose download.

About the spinner gif, I have no idea, it could be the gif itself, or perhaps if you insert it with CSS there is some incompatibility with IE. Try with another gif first: http://www.ajaxload.info/

Please take a look at the very first link I gave you to the documentation. The dimming layer you talk about is the Mask class, Spinner uses the Mask class and adds an animated gif and a message. You can config the message as shown in the documentation.

If you have doubts regarding mootools I'd suggest you taking a look at the mootorial (http://mootorial.com/wiki/) or getting the book Mootools Essentials by Aaron Newton.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.