CODEWITHSUNDEEP
javascriptevent-handling
Moss
Moss

Reputation: 3803

Detect back and forward buttons with JS

I have a site design where I want pages to do a fading transition as you navigate from page to page. I had a sophisticated method I was working out to use jQuery.load and hash tag urls and such. Then I realized that a much simpler solution could be achieved by simply intercepting link clicks, running a fade animation and then redirecting to the linked page (which is set to fade itself in). No need to use ajax and run everything from within one page.

I have just one small problem. If a user clicks forward or back buttons, or uses the keyboard to the same effect...how do I trigger the fade animation? I know you can use jQuery('window').unload() but then I don't know if I am going back or forward or just refreshing the page. This is critical because the fade animation actually needs to fade the background to match the page that it is going to.

Upvotes: 0

Views: 1630

Answers (2)

Al-Mothafar
Al-Mothafar

Reputation: 8219

Simply hide body and then fadeIn :)

the key is on :

$(document).ready(function() {
            $("body").css("display", "none");
            $("body").fadeIn(2000);
    });

You can see the follwoing links for more help:

How to Use jQuery to Make Slick Page Transitions

Page Fade In effect with Jquery

First Link is better :)

Edit: you can see comments for more info, but my result is :

If you back to page using hotkeys, or history.back() or history.forward() maybe the .fadeIn() effect will not work again, you can try the following code to redo fadeIn effect :

$(window).load(function(){
    $("body").css("display", "none");
    $("body").fadeIn(2000);
});

But if you tried use :

$(window).bind('beforeunload',function(){
    $("body").fadeOut(2000);

});

or:

$(window).unload(function(){
    $("body").fadeOut(2000);
});

the fadeOut will not work even the code syntactically is correct, after search, seemes that because:

beforeunload events are unreliable, you cannot make sure they are fully executed, because the differences in unload speeds across browsers and computers. Also, to achieve the fade-in effect, the unload must be delayed, which is not possible.

This quotation from answer of Jquery, FadeIn before unload .

Upvotes: 2

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

Here is very link with live example for keyboards events, if you merge with @Al-Mothafar answer, it will be complete :)

for back arrow keyCode = 37
for backspace keyCode = 8
for forward arrow keyCode = 39

Upvotes: 0

Related Questions