• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 530
  • Last Modified:

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?
0
Ashraf-Hassan
Asked:
Ashraf-Hassan
  • 3
  • 3
1 Solution
 
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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now