actually my intentions were to have a fast fadeout + fadein effect
every time the user clicks on a link to go to another page of the
site. I thought I could get this simply by handling the onload and
onunload events of the body tag, since they are called everytime the
browser moves from one page to another:

<body onload="javascript:onLoadPage();"
onunload="javascript:onUnloadPage();" ...

function onLoadPage() {
        Effect.Appear('main', { duration: 0.5 });
function onUnloadPage() {
        Effect.Fade('main', { duration: 0.5 });

The fadein effect (Effect.Appear) called on the onload event works
perfectly, while the fadeout doesn't, exactely because of the reason
you mentioned.

I found a solution in order to achieve the wanted effect transition.
I have completely discarded the onunload event of the body tag, and I
have written a javascript function to be called everytime the user
clicks a link. This function first invokes the fadeout effect, and
when the effect is over, it opens the new link. Here it is:

html body tag:
<body id="body" onload="javascript:onLoadPage();" ...

html link example:
<a href="home.html" onclick="return openPage(this.href);">Home</a>

function onLoadPage() {
        Effect.Appear('main', { duration: 0.5 });
function openPage(url) {
        new Effect.Fade(
                        duration: 0.5,
                        afterFinish: function() { window.location.href = url; }
        return false;

Now it works as expected, but I don't like very much this solution
since for every link the openPage funtion invocation has to be added
(onclick="return openPage(this.href);")

I preferred to handle all this in a more automatic way :-)


On 2 Nov, 13:24, "T.J. Crowder" <[EMAIL PROTECTED]> wrote:
> Hi,
> I suspect what's happening is that the browser is closing the page
> before the effect completes (probably before it even really starts),
> because it has no reason not to.  Unlike with the alert, where it
> knows there's something going on, from the browser's perspective
> there's nothing special about your effect that should keep the page
> open.  It's just another timer that's running, and timers don't
> prevent unloading the page.
> It *may* be possible to achieve this with various handlers, although I
> think it would be difficult (for instance, differentiating between the
> user closing the window vs. reusing the window [perhaps by typing in
> the address bar] to go to a different URL).  But FWIW, from a UI
> standpoint, I'd strongly recommend against it.  The user has said
> "close this page", and a half-second fade effect by definition
> introduces a half-second delay into that operation.  A half second
> doesn't sound like much, but it's *very* perceptible (average humans
> quite easily perceive intervals down to a 10th of a second).  When
> I've say "go away" I don't need things sticking around for half a
> second to show me an effect.  It reminds me of the Office Assistant in
> MS Office:  When you turn it off, instead of going away immediately --
> clearly what the user wants! -- it looks unhappy and slinks off,
> taking its time about it.  But that's just my two cents.
> --
> T.J. Crowder
> tj / crowder software / com
> On Nov 1, 1:30 pm, stezak <[EMAIL PROTECTED]> wrote:
> > Hi,
> > I want to make a fade out effect on a div element ('main') of my page
> > every time the page is getting closed.
> > I wrote this code:
> > html:
> > <body onunload="javascript:onUnloadPage();" ...
> > javascript:
> > function onUnloadPage() {
> >         alert('onUnloadPage');
> >         Effect.Fade('main', { duration: 0.5 });
> > }
> > The alert is correctly displayed, but the fade effect is not applyed
> > on the 'main' div element.
> > Just to make a trial, I've associated the same function on an
> > 'onclick' event of a link in the page and the fade effect works...
> > I also tryed to use the onbeforeunload event, but with same result.
> > Where am I wrong?
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 

Reply via email to