PDA

View Full Version : Ajax and javascript effect



Hamed
01-15-2008, 04:08 AM
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
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

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

#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

<!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>