Fade from page to page + loading bar

[Shikkediel]

The default action isn’t prevented there because the event parameter is missing:

$('a:not(.page-head__toggle)').click(function(event) {

I think that was also an original issue.
Cannot test Safari otherwise…

[grimski]

Sorry, I’ve been away a few days so just looking at this again now. I updated my code to:

$(document).ready(function() {

    $('a:not(.page-head__toggle)').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);
    }
});

And that certainly closes the navigation when the back button is used in Safari. Reading up on it a bit it looks like it’s Safari’s default behaviour/how it treats this kinda thing so it wasn’t actually an issue with the fade out script. I found this: http://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked

In Chrome/Firefox the page still ‘flashes’ now before fading out. It fades out but then quickly comes back into view before the page redirects. It looks like it’s something to do with the following:

function newpage() {
    window.location = newLocation;
    $('body').show();
}

Which I imagine is this in the new code:

function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

[grimski]

I’m trying to reply to this but it’s not formatting my code correctly/deleting my replies when I try and edit it. Testing this works!

“`
code
“`

EDIT: Nope!

[grimski]

Ok, I think the code issue is sorted now!

Sorry, I’ve been away a few days so just looking at this again now. I updated my code to:

$(document).ready(function() {

    $('a:not(.page-head__toggle)').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);
    }
});

And that certainly closes the navigation when the back button is used in Safari. Reading up on it a bit it looks like it’s Safari’s default behaviour/how it treats this kinda thing so it wasn’t actually an issue with the fade out script. I found this: http://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked

In Chrome/Firefox the page still ‘flashes’ now before fading out. It fades out but then quickly comes back into view before the page redirects. It looks like it’s something to do with the following:

function newpage() {
    window.location = newLocation;
    $('body').show();
}

Which I imagine is this in the new code:

function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

I also updated my CodePen as I realised it didn’t include pace.js – just incase that is impacting the issue.

http://codepen.io/anon/pen/QpMvpM

And I found this post which references pages being faded out after the back button is clicked: https://coderwall.com/p/aqyk7a/fade-out-page-when-clicking-links

Is that similar to what we’re doing here?

[Shikkediel]

That looks very similar indeed but I wouldn’t go browser sniffing, that’s kinda the approach of yore.

Maybe using a timeout could be an idea to prevent seeing the flash on FF:

Edit – I’ll have to investigate a bit more…

[Shikkediel]

I’m slightly confused about the effect of the classes but I think that it would be a good idea to put the .show() inside the timeout as well:

function newpage() {
  window.location = newLocation;
  $('body').addClass('hide-nav');

  setTimeout(function() {
    $('body').show().removeClass('show-nav hide-nav');
  }, 500);
}

[grimski]

I think that works much better. There’s a bit of a delay in Safari from when the back button is pressed and the content is displayed but I guess that’s done to the setTimeout value of 500? You also see the navigation animate out (slightly) once the play is displayed. If I set the value on the end to 0 it prevents this – is that advisable?

The classes confused too! By default none of those classes are added to the body. Then when the toggle in clicked a class of show-nav is added to display the navigation. When you click the toggle again to close the nav, the class is removed. I believe hide-nav is a class that is added when the navigation is being closed to aid with animation/transitions. Only present during the closing of the nav.

With that in mind, would it be better to remove/adjust $('body').addClass('hide-nav'); that set 0 for the timing value?

Thanks again for all your help so far! :)

[Shikkediel]

If I set the value on the end to 0 it prevents this – is that advisable?

That is generally a fine approach to make the execution “skip” to the next calculation cycle so if that works well, there’s nothing to hold against it.

I think I’ll have to read up on how Safari handles things exactly…
And I’d need another look at the nav’s mechanism for your other question too.

[grimski]

Cool, I think the classes are fine. Though the .hide-nav class is only added to animate/transition the overlay/nav when it closes, then it’s removed once the transition has finished. So if we set the value to 0 there’s no delay so it’s probably not needed as it’ll close instantly before anyone sees it. That said, I don’t think there’s any harm leaving it on as it covers all bases.

[Author]

Posts