tags:

views:

1460

answers:

2

How can I add Page transitions effects like IE in Safari for web pages?

+1  A: 

You could check out this example: http://sachiniscool.blogspot.com/2006/01/implementing-page-transitions-in.html. It describes how to emulate page transitions in Firefox using AJAX and CSS. The same method works for Safari as well. The code below is taken from that page and slightly formatted:

var xmlhttp;
var timerId = 0;
var op = 1;

function getPageFx() {
  url = "/transpage2.html";
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest()
    xmlhttp.onreadystatechange=xmlhttpChange
    xmlhttp.open("GET",url,true)
    xmlhttp.send(null)
  } else getPageIE();
}

function xmlhttpChange() {
// if xmlhttp shows "loaded"
  if (xmlhttp.readyState == 4) {
  // if "OK"
    if (xmlhttp.status == 200) {
      if (timerId != 0)
        window.clearTimeout(timerId);
        timerId = window.setTimeout("trans();",100);
    } else {
       alert(xmlhttp.status)
    }
  }
}

function trans() {
  op -= .1;
  document.body.style.opacity = op;
  if(op < .4) {
    window.clearTimeout(timerId);
    timerId = 0; document.body.style.opacity = 1;
    document.open();
    document.write(xmlhttp.responseText);
    document.close();
    return;
  }
  timerId = window.setTimeout("trans();",100);
}

function getPageIE() {
  window.location.href = "transpage2.html";
}
Ilya Kochetov
+1  A: 

Check out Scriptaculous. Avoid IE-Only JS if that's what you are referring to (no idea what kind of effect you mean).

MattW.