Fade effect when exiting the page
270 views
Skip to first unread message
stezak
Nov 1, 2008, 9:30:03 AM11/1/08
to Prototype & script.aculo.us
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?
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?
T.J. Crowder
Nov 2, 2008, 7:24:40 AM11/2/08
to Prototype & script.aculo.us
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.
FWIW,
--
T.J. Crowder
tj / crowder software / com
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.
FWIW,
--
T.J. Crowder
tj / crowder software / com
stezak
Nov 2, 2008, 7:53:06 AM11/2/08
to Prototype & script.aculo.us
Hi,
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:
html:
<body onload="javascript:onLoadPage();"
Effect.Appear('main', { duration: 0.5 });
}
function onUnloadPage() {
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>
javascript
function onLoadPage() {
Effect.Appear('main', { duration: 0.5 });
}
function openPage(url) {
new Effect.Fade(
'main',
{
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 :-)
Thanks
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:
html:
<body onload="javascript:onLoadPage();"
onunload="javascript:onUnloadPage();" ...
javascript:
function onLoadPage() {
javascript:
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>
javascript
function onLoadPage() {
Effect.Appear('main', { duration: 0.5 });
}
function openPage(url) {
new Effect.Fade(
'main',
{
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 :-)
Thanks
T.J. Crowder
Nov 2, 2008, 11:07:35 AM11/2/08
to Prototype & script.aculo.us
Hi,
> 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);")
Something like this added to the script (and dropping the onclick
attributes from the href tags) should do it:
function openMyPage(evt)
{
evt.stop();
openPage(this.href);
}
document.observe("dom:loaded", function() {
$$('a').invoke('observe', 'click', openMyPage);
});
Note that that will hook *all* links, including mailto:, etc. If you
have any mailto or similar links, or links that take you away from
your site, a more complex selector (or classes) could let you hook up
only the links within your site.
FWIW,
--
T.J. Crowder
tj / crowder software / com
> 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);")
attributes from the href tags) should do it:
function openMyPage(evt)
{
evt.stop();
openPage(this.href);
}
document.observe("dom:loaded", function() {
$$('a').invoke('observe', 'click', openMyPage);
});
Note that that will hook *all* links, including mailto:, etc. If you
have any mailto or similar links, or links that take you away from
your site, a more complex selector (or classes) could let you hook up
only the links within your site.
FWIW,
--
T.J. Crowder
tj / crowder software / com
Reply all
Reply to author
Forward
0 new messages