Menu

Problème de transition AjaxLoad [Résolu]

Messages postés
28
Date d'inscription
mardi 20 mai 2014
Dernière intervention
14 janvier 2019
-
Salut ! J'ai téléchargé mon site web sur un hébergeur payant et, j'ai réalisé que les transitions entre les pages ne fonctionnaient pas comme d'habitude. Je pense que l'actualisation de la page n'est pas faite correctement et crée une collision avec le z-index. Je ne sais pas assez en js pour résoudre le problème seul ..

Site bugé : http://flori-an.fr/
Site qui lui, est fonctionnel : http://flusha.000webhostapp.com/
Mon hébergeur : http://www.ionos.fr/


Côté JS (Attention aux yeux) :


/*--------------------------------------------------
Function Ajax Load
---------------------------------------------------*/

function AjaxLoad() {

jQuery(document).ready(function(){
var isAnimating = false,
newLocation = '';
firstLoad = false;

//trigger smooth transition from the actual page to the new one
$('main').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not already being animated - trigger animation
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});

//detect the 'popstate' event - e.g. user clicking the back button
$(window).on('popstate', function() {
if( firstLoad ) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it's false - the page has just been loaded
  • / var newPageArray = location.pathname.split('/'), //this is the url of the page to be loaded newPage = newPageArray[newPageArray.length - 1]; if( !isAnimating && newLocation != newPage ) changePage(newPage, false); } firstLoad = true; }); function changePage(url, bool) { isAnimating = true; // trigger page animation $('body').addClass('page-is-changing'); $('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ loadNewContent(url, bool); newLocation = url; $('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); }); //if browser doesn't support CSS transitions if( !transitionsSupported() ) { loadNewContent(url, bool); newLocation = url; } } function loadNewContent(url, bool) { url = ('' == url) ? 'index.html' : url; var section = $('<div class="cd-main-content "></div>'); section.load(url+' .cd-main-content > *', function(event){ // load new content and replace <main> content with the new one FullPageDestroy(); $('main').html(section); var clapat_title = event.match(/<title[^>]*>([^<]+)<\/title>/)[1]; $('head title').html( clapat_title ); //if browser doesn't support CSS transitions - dont wait for the end of transitions var delay = ( transitionsSupported() ) ? 30 : 0; setTimeout(function(){ $('body').removeClass('page-is-changing'); $('.cd-cover-layer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ isAnimating = false; $('.cd-cover-layer').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); }); ga('set', 'page', '/' + url); ga('send', 'pageview'); FirstLoad(); HeroSection(); FullPage(); LazyLoad(); MasonryPortfolio(); NextProject(); Sliders(); FooterAppear(); Lightbox(); AppearIteam(); BackToTop(); ContactForm(); CollagePlus(); PageShare(); ContactMap(); if( !transitionsSupported() ) isAnimating = false; }, delay); if(url!=window.location && bool){ window.history.pushState({path: url},'',url); } }); } function transitionsSupported() { return $('html').hasClass('csstransitions'); } }); }// End Ajax Load


Pour l'html ça donne ça tout simplement :


<a class="ajax-link" data-type="page-transition" href="index.html">



Ps : Je ne sais pas exactement si c'est bien Ajax qui fait bug les transitions, je peux fournir tous le script s'il faut :)
Afficher la suite 

Votre réponse

1 réponse

Meilleure réponse
Messages postés
24073
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2019
2143
1
Merci
Bonjour,

J'ai exactement le même comportement sur les deux sites.
Ne penses tu pas que tu aurais simplement un souci de cache au niveau de ton navigateur ?
As tu essayé avec un autre navigateur ? en mode privé ? en vidant ton cache avant ?

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 56029 internautes nous ont dit merci ce mois-ci

Sparkflo
Messages postés
28
Date d'inscription
mardi 20 mai 2014
Dernière intervention
14 janvier 2019
-
Effectivement, c'est très bête de ne pas y avoir pensé avant, ça fonctionne parfaitement sur mobile et autre navigateur...
Merci beaucoup haha !
Commenter la réponse de jordane45
1С-Рарус: Мобильный ТСД v8.3 | Michael Kors horloge | Jan Josef Liefers