I am coding a simple AjAX and php page look:
When I want to call getPage() function load() won't work in IE7 and the effect for pops_up() and pops_down() won't work too.
My Ajax.php
PHP Code:
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("pages");
if(isset($_GET['page'])){
    $page = $_GET["page"];
    $sql = "SELECT * FROM pages WHERE page = '$page'";
    $query = mysql_query($sql) or die(mysql_error());
    if( mysql_num_rows($query) == 1 ){
       $r=mysql_fetch_array($query);
       echo $r["content"];
    }else{
        echo "Not found";
        }
}

?>
MyAjax.js
Code:
function load(){
    document.getElementById('fade').style.display = "block";
    document.getElementById('fade').innerHTML = '<br><br><br><br><img border="0" src="images/loading.gif">';
}
function deload(){
document.getElementById('fade').style.display = "none";
}
var pop_began=1;
var    pop_up;
var    pop_down;
function pops_up(id , end){
    if( pop_began == 0 ){
        document.getElementById(id).style.top=document.body.clientHeight;
        pop_left=document.body.clientWidth/2 - parseInt(document.getElementById(id).style.width)/2;
        document.getElementById(id).style.left = pop_left+"px";
        pop_began=1;
    }
    clearTimeout(pop_up);
    clearTimeout(pop_down);
    document.getElementById(id).style.visibility="visible";
    pop_top=document.getElementById( id ).style.top;
    pop_top=parseInt(pop_top , 10);
    pop_end= ( pop_top - end );
    if ( pop_end > 1){
        document.getElementById(id).style.top = pop_top - 3 +"px";
        pop_up=setTimeout("pops_up( '"+id+"', '"+end+"' )", 3);
    }
}
function pops_down(id){
    clearTimeout(pop_up);
    clearTimeout(pop_down);
    pop_top=document.getElementById( id ).style.top;
    pop_top=parseInt(pop_top , 10);
    pop_end= ( document.body.clientHeight - pop_top );
    if ( pop_end > 10){
        document.getElementById(id).style.top = pop_top + 3 +"px";
        pop_down=setTimeout("pops_down( '"+id+"' )", 2);
    }else{
        document.getElementById(id).style.visibility="hidden";
    }
}
function getPage(page,where){
load();
document.getElementById(where).innerHTML = '<b><img src="img/small_loading.gif" border="0">loading....</b>';
var xmlhttp=false; //Clear our fetching variable
        try {
                xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object…
        } catch (e) {
                try {
                        xmlhttp = new
                        ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object
            } catch (E) {
                xmlhttp = false;
                        }
        }
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest
        }
        var file = 'ajax.php?page='; //This is the path to the file we just finished making *
    xmlhttp.open('GET', file + page, true); //Open the file through GET, and add the page we want to retrieve as a GET variable **
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status == 200) { //Check if it is ready to recieve data
                var content = xmlhttp.responseText; //The content data which has been retrieved ***
                if(content){ //Make sure there is something in the content variable
                      document.getElementById(where).innerHTML = content; //Change the inner content of your div to the newly retrieved content ****
                      deload();
                }
        }
        }
        xmlhttp.send(null) //Nullify the XMLHttpRequest
return;
}
and my css code
MYCSS.css
Code:
#fade {
display:none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #C0C0C0;
z-index:1001;
overflow: auto;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
and my html codes
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">

<head>
<title>IEAM</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript" src="images/MyAjax.js"></script>
<link href="images/MyCSS.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="links">
    <a href="javascript:getPage('home','content');">Home</a>
    <a href="javascript:getPage('hamed','content');">Page 2</a>
    <div id="content">
    </div>
</div>
<a href="javascript:pops_up('scrollpop','100');getPage('home','text');">Up</a>
<div id="scrollpop" style="position: absolute; left: 246.5px; top: 101px; width: 514px; z-index: 100; visibility:hidden;">
    <table cellpadding="0" cellspacing="0" border="0" dir="rtl" width="70%">
        <tr>
            <td width="1"><img src="images/cbgr.gif" border="0"></td>
                <td valign="middle" align="right" background="images/cbg.gif" width="100%"><a href="javascript:pops_down('scrollpop');"><img src="images/close.gif" border="0"></a></td>
            <td width="1"><img src="images/cbgl.gif" border="0"></td>
        </tr>
        <tr>
            <td id="text" colspan="3" bordercolor="#000066" bgcolor=""></td>
        </tr>
    </table>
</div>
    <div id="fade" align="center">
    </div>
</body>

</html>