Fajax -- the fake alternative to ajax
secretGeek .:dot Nuts about dot Net:.
home .: about .: sign up .: sitemap .: secretGeek RSS

Fajax -- the fake alternative to ajax

Put these two tags in the head of your html document:

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">

That's it. You've implemented Fajax: the fake alternative to ajax.

The blink that occurs on postback is no longer visible, most of the time.

Okay, it's a dirty nasty trick. Don't flame me, troll me, spam me or DoS me. I feel terrible as i write these words: blendtrans is a Microsoft function. In non-ie browsers it will have no effect.

How does it work?

When a page posts back (for example when you click a button on a form), it normally causes a screen flicker as the page is redrawn. In a lot of cases the screen that is redrawn is very similar to the previous screen, and the flicker is an annoyance, disrupting the user's experience. The Blendtrans function causes the old page to blend smoothly into the new one, rather than flickering.

A lot of the time, this gives an identical effect to an ajax style http request. The page appears to have stood absolutely still as just one part of it is updated.

This simple trick alone gives you about 50% of the benefit of ajax, with a 1% of the effort. Having said that, it's absolutely limited to that one visual benefit, and limited to one browser.

To get the full benefits of ajax, you will of course need to use ajax, not fajax. ;-)

Note that these effects are best not overused.

as seen on the daily grind



'Codecruncher' on Thu, 30 Mar 2006 03:56:53 GMT, sez:

Genius! XD



'hardbutnot' on Thu, 30 Mar 2006 06:30:33 GMT, sez:

Extra points for you I think. Perhaps you should post to some web two point oh forum or other and convince the world that blendTrans is sooooo the way forward? Imagine if all the world did this how wonderful it would be...



'Grrr' on Thu, 30 Mar 2006 13:12:42 GMT, sez:

Very cool

You should really post a before and after demo here



'http://' on Thu, 30 Mar 2006 17:15:16 GMT, sez:

AMAZING !!!



'Boxy' on Thu, 30 Mar 2006 20:05:17 GMT, sez:

Awesome! ... Fajax is definately the future!



'Hermann Klinke' on Fri, 31 Mar 2006 05:17:26 GMT, sez:

fajax is just a fad ;-)



'Rik Hemsley' on Fri, 31 Mar 2006 06:40:35 GMT, sez:

Looks good, but wreaks havoc in an ASP.NET application. Good try, though!



'Rik Hemsley' on Fri, 31 Mar 2006 06:47:24 GMT, sez:

I spoke too soon. It works fine, and if you take the time down to 0.01, you lose the weird blending effect but still get the impression of no full-page postback. Nice!



'Carlin' on Mon, 03 Apr 2006 04:20:46 GMT, sez:

Something that only works in IE and not on FireFox, Opera and all those other poor-excuses for internet browsers is worth using ;)



'blah' on Tue, 04 Apr 2006 11:45:03 GMT, sez:

<b>blah</b>



'Question' on Wed, 05 Apr 2006 05:13:14 GMT, sez:

Are page controls responsive during the blend?

i.e. can the user carry on inputting data, or whatever, and if so is the data retained after the (hidden) postback

If not I would say there is next to no benefit to using this trick; the issue is not so much the 'flicker'...



'Mischa Kroon' on Wed, 05 Apr 2006 11:03:56 GMT, sez:

Good shit :)



'Justin Casey' on Wed, 26 Apr 2006 13:33:16 GMT, sez:

This is way cool. And much easier to implement than AJAX. Thanks for posting it.



'bRb' on Mon, 08 May 2006 16:59:00 GMT, sez:

Interesting



'MCSTAR' on Wed, 24 May 2006 16:57:41 GMT, sez:

This proves what I've said all along.... AJAX really just slows the user down. I love it!



'Adnan' on Thu, 01 Jun 2006 05:30:54 GMT, sez:

Intresting:D



'Adnan Siddiqi' on Thu, 01 Jun 2006 05:31:52 GMT, sez:

I am gonna implement it soon:d



'CGVictor' on Thu, 01 Jun 2006 10:17:17 GMT, sez:

I knew about it; however, thanks for good post.

Another interesting feature is setting properties to extremely small values (0.0001 will be Ok :)). This disables flickering at all, while takes no time (and cpu) to redraw.



'Ricaute' on Thu, 01 Jun 2006 17:00:09 GMT, sez:

I use this meta tag:

<meta http-equiv="Page-Enter" content="Alpha(opacity=100)">



'Ricaute' on Thu, 01 Jun 2006 17:03:25 GMT, sez:

This meta tag paint the page without the fade effects. No delay to show a page.

<meta http-equiv="Page-Enter" content="Alpha(opacity=100)">



'http://' on Wed, 14 Jun 2006 12:53:27 GMT, sez:

great work <td >



'JLC' on Mon, 19 Jun 2006 14:34:58 GMT, sez:

How dare you compare this trick to Ajax and even claim 50% of the benefits?



'lb' on Mon, 19 Jun 2006 20:48:04 GMT, sez:

Hey 'JLC'... get stuffed.



'leeseng' on Thu, 22 Jun 2006 00:48:18 GMT, sez:

just handle the no double form submission first la. browsersss...



'cross browser support....' on Thu, 29 Jun 2006 18:08:13 GMT, sez:

you want this affect on all browser?

http://www.brainerror.net/scripts_js_blendtrans.php



'miniplayer.info' on Mon, 10 Jul 2006 18:30:52 GMT, sez:

This is beautiful...

I was dreading the thought of having to learn something else new. Very slick I will be adding this to all my sites.



'dadou' on Wed, 12 Jul 2006 21:01:57 GMT, sez:

you' re a genius



'Cjnawa' on Wed, 19 Jul 2006 06:43:28 GMT, sez:

Is this working on apple mac safari



'osman' on Tue, 01 Aug 2006 09:59:17 GMT, sez:

not working on ff:((



'bob bonn' on Tue, 01 Aug 2006 14:09:09 GMT, sez:

great...atlas is not allowed at my company as it is still beta, and i'm trying to learn .net 2.0 and VS 2005, so not much time to mess w/ learning ajax. also, this works just as ajax on an fast intranet in combination with .net 2.0's [MaintainScrollPositionOnPostback="true"]



'Voice of reason' on Wed, 30 Aug 2006 19:26:04 GMT, sez:

The point of ajax is not to remove ie's flicker on page refreshes.

The point is to reduce the amount of traffic between the client and the server, to speed up browsing overall by updating the page partially rather than fully. Only the part of the page that needs updated gets sent over.

It also handles things like maintaining scroll position on page refreshes, event-driven UI and visual effects like fade-ins, animations and so on.

This doesn't do any of that. For those joyously posting here believing this to be a replacement of ajax; it may be best, for both you and your users, to actually learn about web technologies and use them properly.

At the very least, experiment with Atlas and see what it has to offer before rushing off to implement such a trick. Atlas does have a Go Live licence after all.



'aBud' on Wed, 06 Sep 2006 17:42:48 GMT, sez:

If you want to simulate the same transition in firefox try this code. This only simultate the transition effect if you put a duration > 0. Let me know if it works for you.

<SCRIPT type="text/javascript">

function fadeInit() {
document.body.style.opacity=0.2; // initialise
}

function fadeIn() {

var bodyStyle=document.body.style;

if ( bodyStyle.opacity < 1) {
bodyStyle.opacity=((bodyStyle.opacity*10)+1)/10; //Add 0.1
setTimeout('fadeIn();',100)
}
}

</SCRIPT>

<body onload="fadeInit();fadeIn();">



'HJK' on Thu, 14 Sep 2006 06:57:30 GMT, sez:

THIS IS TOO COMPLEX TO IMPLEMENT



'rta' on Thu, 14 Sep 2006 07:24:27 GMT, sez:

Bit of a childish response from 'lb'. Especialy as 'JLC' and 'Voice of reason' clearly know what they are talking about. This tip although very usefull has nothing to do with AJAX so dont go away thinking you will get 'ANY' of the benifits of AJAX as you wont. AJAXs nice transition is a side effect of what it sets out to achieve. What we have here is a rendering effect nothing more nothing less. But having said that it is very effective at what it does and an excellent tip that I wasnt aware of, I just think it is presented in a misleading way (The 50% comment shows the writer does not know much about AJAX). For anyone interested in actually learning about AJAX 'AJAX in Action' is an excellent book.



'Fred' on Sat, 16 Sep 2006 08:07:32 GMT, sez:

Voice of Reason: Ajax absolutely does not reduce traffic between the client and server it only INCREASES it overall. Where a page might consume one connection previously the same page migth now consume 4, 5 or 10 connections simultaneously.

Based on these two premises:

1) Users are dumb
2) KISS

AJAX is a violator of good programming. A good application should never overwhelm a user in one screen so that multiple hidden postbacks are even needed. AJAX is still the same old javascript hack to get a more responsive "application" in what is supposed to be a document viewer.

If we want web 2.0 or 3.0 or ... it ain't hacking together javascript scripts.. as nice as they might be.. it's a paradigm shift away from html.. microsoft is making steps as are others..

Personally, I don't think AJAX is worth the money put into the code.. but that is just me.



'Fred' on Sat, 16 Sep 2006 08:09:45 GMT, sez:

Oh yeah.. and most of the things you mentioned have nothing to do with AJAX per se.. they are just javascript functions/classes folks have put together in a package either with or without using asynchronous processing of xml packets..



'Tim' on Sun, 17 Sep 2006 02:18:21 GMT, sez:

Perhaps I'm incorrect, but I believe that AJAX is simply the catalyst to a new web technology waiting for the next major release of browsers. While currently, it is a pack of javascripts to handle asynchronous connections via XML packets, there is nothing preventing standards in browsers to handle the same thing in the future.

Without AJAX, it's quite possible five years from now, the desktop browser will dimply be a "Document viewer" as was stated earlier. In my humble opinion, AJAX is long overdue, considering the technology for it is so old...

Having stated that, I like the page fade and wish an easy implementation for cross-browser compatibility existed that works within the .Net framework, etc. It's a nice effect!



'Tim' on Sun, 17 Sep 2006 02:19:55 GMT, sez:

Dimply... Simply... Whatever it takes!

(Vodka is much more potent than one might assume)



'guysheep' on Tue, 26 Sep 2006 14:38:07 GMT, sez:

Simple is good!



'T-Dub' on Wed, 27 Sep 2006 16:08:52 GMT, sez:

First of all, Ajax is great for making desktop-like applications for the web. Second, it CAN reduce traffic because you only need transfer data instead of data and presentation combined.

Not everyone (especially large companies) uses technology because it's new and slick. We use it because it meets a need.

If you don't like it, don't use it, but don't get mad because people want a DVD players instead of laser disc players.

Where do you people come from?



'bgc' on Wed, 11 Oct 2006 19:03:23 GMT, sez:

First off nice trick.
Second who are you people most of you type like your six.
Third AJAX is good for what AJAX is used for.

This trick is not a replacemnt fo AJAX.
AJAX does not increase nor decrease the amount of data transfered.

The implementation of AJAX most certainly can effect the amounts of data transfer.

If implemented correctly it can reduce data transfer loads.

As far as the number of connections that AJAX could possible create.

Which is better 4 or 5 asynchronous connections transfering 2k of data a piece (10k if yuo have 5 connections) or reloading a page 5 times that is 11k (total data transfer 55k).

The math speaks for its self.

On the other side of things (which by the way I have a hard time thinking of bad ways to use good programming) if you are using ajax to update the time of clock on a page you have issues and should not be writting code in the first place.

To sum it up a certain technology is neither good or bad only the implementation of a given technology is good or bad.

That goes for any technology not just AJAX.



'bob bonn' on Tue, 17 Oct 2006 11:28:37 GMT, sez:

I've had to cut FAJAX b/c it's seriously messing up display of drop-downs(HTML SELECT) and buttons. Sometimes when I post-back, only half of the drop-down will display, or it will have a shadow, or just other weird stuff like that. Once I removed this FAJAX, everything was fine, but back to the annoying screen flash when posting back. It seems a full release of Microsoft AJAX Extensions (a.k.a. Atlas) will be out by the end of the year. My project is big enough where I can wait until then to implement it.



'lb' on Tue, 17 Oct 2006 12:01:56 GMT, sez:

@Bob bonn
I hear you bob!
fajax gets confused if parts of the screen are altered at certain points. i don't know why, but in such cases it's prudent to stop using page transitions. easy come, easy go.

cheers
lb



'bob bonn' on Tue, 17 Oct 2006 14:25:25 GMT, sez:

pertaining to above 2 posts:

At the same time though, I still have this implemented on my wife's web site, which is just html/javascript and not as form-driven as the corporate web app i'm working on.



'a state of trance' on Tue, 31 Oct 2006 05:02:05 GMT, sez:

this is great im trying now



'nepalhub' on Sat, 11 Nov 2006 12:25:12 GMT, sez:

nice .. nice effects



'KingPuyol' on Mon, 27 Nov 2006 10:40:27 GMT, sez:

Cool



'blegh' on Wed, 06 Dec 2006 00:06:21 GMT, sez:

bgc, how can you say the folks here type like they're six when you write a post like that. The number of spelling (your instead of you're, effect instead of affect etc.) and grammar mistakes in your post is amazing, even for the internet.

I also think a lot of folks took this way too seriously. The author knows that there's more than reduced page flicker to AJAX (although most business users think of it only for that reason). Lighten up :)



'K999' on Thu, 11 Jan 2007 13:56:19 GMT, sez:

THATS GREAT! AND EASY!



'Dreambox' on Fri, 19 Jan 2007 02:10:57 GMT, sez:


Arkada&#351;lar bu kodlar&#305; sitenizi h&#305;zland&#305;rmak için kullanmay&#305;n, bi sikimie yaram&#305;yo.

<META http-equiv=Page-Exit content=BlendTrans(Duration=0)>
<META http-equiv=Page-Enter content=BlendTrans(Duration=0)>



'SHIFT_4' on Mon, 22 Jan 2007 03:20:48 GMT, sez:

I love this trick!!! Works great for my purposes.
AJAX... I use that to clean my toilet!



'billy' on Fri, 26 Jan 2007 19:29:59 GMT, sez:

hey shut up im six and i type prety god



'The Fonz' on Thu, 08 Feb 2007 18:26:35 GMT, sez:

hmm... Doesn't work with Smart Navigation..


no comments left, due to spam

Articles

The Canine Pyramid The Canine Pyramid
Humans: A Tragedy. Humans: A Tragedy.
ACK! ACK!
OfficeQuest... Gamification for the Office Suite OfficeQuest... Gamification for the Office Suite
New product launch: NimbleSET New product launch: NimbleSET
Programming The Robot from Diary of a Wimpy Kid Programming The Robot from Diary of a Wimpy Kid
Happy new year 2014 Happy new year 2014
Downtime as a service Downtime as a service
The Shape of Your Irrationality The Shape of Your Irrationality
This is why I don't go to nice restaurants any more. This is why I don't go to nice restaurants any more.
A flowchart of what programmers do at work all day A flowchart of what programmers do at work all day
The Telepresent Man. The Telepresent Man.
Interview with an Ex-Microsoftie. Interview with an Ex-Microsoftie.
CRUMBS! Commandline navigation tool for Powershell CRUMBS! Commandline navigation tool for Powershell
Little tool for making Amazon affiliate links Little tool for making Amazon affiliate links
Extracting a Trello board as markdown Extracting a Trello board as markdown
hgs: Manage Lots of Mercurial Projects Simultaneously hgs: Manage Lots of Mercurial Projects Simultaneously
You Must Get It! You Must Get It!
AddDays: A Very Simple Date Calculator AddDays: A Very Simple Date Calculator
Google caught in a lie. Google caught in a lie.
NimbleText 2.0: More Than Twice The Price! NimbleText 2.0: More Than Twice The Price!
A Computer Simulation of Creative Work, or 'How To Get Nothing Done' A Computer Simulation of Creative Work, or 'How To Get Nothing Done'
NimbleText 1.9 -- BoomTown! NimbleText 1.9 -- BoomTown!
Line Endings. Line Endings.
**This** is how you pivot **This** is how you pivot
Art of the command-line helper Art of the command-line helper
Go and read a book. Go and read a book.
Slurp up mega-traffic by writing scalable, timeless search-bait Slurp up mega-traffic by writing scalable, timeless search-bait
Do *NOT* try this Hacking Script at home Do *NOT* try this Hacking Script at home
The 'Should I automate it?' Calculator The 'Should I automate it?' Calculator

Archives Complete secretGeek Archives

TimeSnapper -- Automated Screenshot Journal TimeSnapper: automatic screenshot journal

25 steps for building a Micro-ISV 25 steps for building a Micro-ISV
3 minute guides -- babysteps in new technologies: powershell, JSON, watir, F# 3 Minute Guide Series
Universal Troubleshooting checklist Universal Troubleshooting Checklist
Top 10 SecretGeek articles Top 10 SecretGeek articles
ShinyPower (help with Powershell) ShinyPower
Now at CodePlex

Realtime CSS Editor, in a browser RealTime Online CSS Editor
Gradient Maker -- a tool for making background images that blend from one colour to another. Forget photoshop, this is the bomb. Gradient Maker



[powered by Google] 

How to be depressed How to be depressed
You are not inadequate.



Recommended Reading


the little schemer


The Best Software Writing I
The Business Of Software (Eric Sink)

Recommended blogs

Jeff Atwood
Joseph Cooney
Phil Haack
Scott Hanselman
Julia Lerman
Rhys Parry
Joel Pobar
OJ Reeves
Eric Sink

InfoText - amazing search for SharePoint
LogEnvy - event logs made sexy
Computer, Unlocked. A rapid computer customization resource
Aussie Bushwalking
BrisParks :: best parks for kids in brisbane
PhysioTec, Brisbane Specialist Physiotherapy & Pilates
 
home .: about .: sign up .: sitemap .: secretGeek RSS .: Leon Bambrick 2003 .: privacy

home .: about .: sign up .: sitemap .: RSS .: Leon Bambrick 2003 .: privacy