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

On Nov 2, 12:53 pm, stezak <[EMAIL PROTECTED]> wrote:
> 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();"
> onunload="javascript:onUnloadPage();" ...
>
> javascript:
> 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>
>
> 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
>
> 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.
>
> > FWIW,
> > --
> > 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 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to