Implementing page transitions in Firefox using AJAX and CSS

Page Transitions is a feature in IE which allows you to add visual effects on your site using filters when a user enters or exits a page, the problem is that filters are IE-only. What if you want to add same transitions on your site for users who are visiting on Fx? You can emulate some filters of IE by using AJAX and CSS on Firefox/Mozilla to achieve the same results, here is a simple way to achieve fade-in transition in Fx for page exit:
Instead of redirecting user to second page directly (using links or JS:location.href), retrieve the second page contents using XmlHttpRequest, once the httpRequest has retrieved the contents of page 2, add a timeout function where in you reduce the opacity of the page by steps. Once the opacity falls below a certain value, do a document.write of page 2's response text. Here is the piece of JS code:

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"; }

You can see this code in action here.

Code sample: success algorithm

a c# snippet:
//initialize the variables, experience effect is generally the same
int const experience = 1;
int success = int.MinValue();

while(success!=100){
//the chance factor is best left unhandled, also includes the time
int chance = Random.Next(1,100);
try{
effort = 99 - chance; //reduce the effort effect based on the chance factor
//experience can at times help you, at times go against you and times doesn't help at all!
success = effort + chance + Random.Next(1,-1)*experience;
}
catch{
//oops we blew up somewhere..try again
}
}
//we are done yippie, time to introspect...
wasItWorthIt();


so basically either you finally hit the wasItWorthIt stage or you hit a stack overflow exception, good luck :-)

few things about firefox you didn't know

I really like Firefox, apart from it being a really memory hungry beast it's almost perfect with everything that it does...but the documentation of Fx is something which I would say is far from being comprehensive so mostly you have to find stuff on your own. few things that I've found are:
a) Many a times you want to search using the search box without leaving the current page, well go to search box (ctrl-k), type in your query and hit Alt-Enter & viola the results open in a new tab. You can also pick the search engine by using the keyboard (press Ctrl-Down/Up Arrow key). There are tons of search engines to choose from in case you are not satisfied, try http://mycroft.mozdev.org.
b) How do you open a Url on a page if it is not hyperlinked for e.g. the mycroft link above, you don't have to copy the Url, open a new tab & paste the link, just select the link with the mouse and drag it to the tab-bar or to one of the opened tab.
c) File-Exit, is different from Alt-F4 or Close Window. It exits Firefox completely including all open Fx windows (download manager, other Fx open windows included).
d) How many times you would wish that Fx would automatically authenticate you against a given server much like the way IE does? Don't fret there is way for that too, in the location bar type in about:config , in the filters type ntlm and dbl click network.automatic-ntlm-auth.trusted-uris, type in the name of servers for which you want to be automatically authenticated separated by comma and you're done.
e) [01/17] With Fx 1.5 the javascript console started showing CSS errors as well, though this is a great debugging feature at times I would find it cluttering my console when I wanted to see what js is blowing up my code well any one else who always felt the need to be able to filter the console errors/messages by type (like JS, Css, Xml etc) there is this real nice extension, try it out:
https://addons.mozilla.org/extensions/moreinfo.php?id=1815&application=firefox

later...

2006

another new year...building new hopes, new dreams and making older dreams come to life...by the way there is no such thing as false hope/dream....hope and dreams are good things infact they are the best things & good things in life never die...a beautiful Richard Bach line comes to the mind from his book Illusions: "You are never given a wish without also being given the powers to make it to come true"...you might have to work for it though.
Anywez wishing you all a happy new year, hope 2006 gets you one more step closer to your destination.