Petit sac de noeuds

Bonjour,

je suis sur un site SPIP qui utilise le plug "navigation Ajax" avec des animations de transition entre chaque page. J'ai réussi à intégrer d'autres animations javascript dans les pages mais je crois que j'ai atteint la limite. J’essaie d'ajouter un système de scroller sur une div avec le fichier pré-existant JsScroller et ce bout de code

var scroller = null;
$(function(){
  var el = document.getElementById("Scroller");
  scroller = new jsScroller(el, 100, 200);
});

Or j'ai de sacré soucis. Car en local le scroller marche mais arrivé en ligne les pages qui l'utilisent ne s'affichent pas. Impossible également de mêler ce script à celui de fancybox, en local mon scroll ne fonctionne plus.

Je pense que l'idéal est de visiter le site sur mon serveur distant( Le site ). Les pages qui ne s'ouvrent pas sont "Agence" alors qu'en local je n'ai pas de soucis. Ainsi que les articles de la partie "Actualités".

Merci pour votre aide
Modifié par letty (23 Jul 2012 - 22:10)

salut

as tu simplement regardé les erreur dans la console ?


Uncaught TypeError: Object [object Object] has no method 'formulaire_dyn_ajax' ajaxCallback.js:315
Uncaught TypeError: Cannot call method 'push' of undefined ajaxCallback.js:8
Uncaught SyntaxError: Unexpected token ) spip.php:7


à priori formulaire_dyn_ajax n'est pas déclaré dans la page, ajaxcallback non plus

bref.. manque quelque chose que tu dois avoir en local

Effectivement... Cela dit comment expliquer que le reste marchait avant l'insertion de ce bout de code ? Je pense que le soucis est peut-être plus "simple" à résoudre mais je l'avoue avec un peu de honte je "bidouille" en javascript. Je comprend un peu le code mais suis incapable de faire une animation même basique à partir d'une page blanche Il me faut un support exemple.

Après vidage multiples de caches, en local, avec le même code je n'ai plus rien non plus.

J'ai une idée pour faire plus "simple" car c'est du code posé à l'arrache et il doit il y avoir des conflits.

Donc comment écrire et faire fonctionner ces scripts sur le même fichier script.js

Mon script pour scroller mon div

var scroller = null;
window.onload += function () {
  var el = document.getElementById("Scroller");
  scroller = new jsScroller(el, 400, 200);
}

Mes animations de balises div

$(document).ready(function ()  {
		$('#page').bind('onAjaxNavReq', function () {
			$('#bg').animate({opacity: 0}, '3000', function () {
			$('.hfeed').animate({height: '0'}, 1000);
			});
			$('#supersized').animate({opacity: 0}, '3000', function () {
			$('.accor').animate({width: '40%'}, 1000);
			$('.hfeed2').animate({width: '0'}, 1000);
			});
		});
		$('#page').bind('onAjaxNavLoad', function () {
			$('#bg').load(function () {
			$(this).animate({opacity: 1}, '5000',function () {
			$('.hfeed').animate({height: '85%'}, 1000);
			});
			});
			$('#supersized').animate({opacity: 1}, '5000', function () {
			$('.accor').animate({opacity: '0'}, 3000);
			$('.hfeed2').animate({width: '40%'}, 3000);
		});
		});
	});	

Mon menu accordéon

$(document).ready( function () {
	var fadeDuration = 300; 
      $('a#bouge').hover(function() {
        $(this).animate({ paddingLeft: '10px' }, fadeDuration);
      }, function() {
        $(this).animate({ paddingLeft: '0' }, fadeDuration); 	
      });
	
     $("ul.subMenu").hide(); 
     $("li.on").parent("ul").show(); 
	
    $("li.toggleSubMenu a").click( function () {
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideToggle("normal");
        }
        else {
            $("ul.subMenu").slideToggle("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }
    }); 
} ) ;

Fancybox

$("a#fancy".fancybox({
'titleshow' : false,
'transitionIn' : fade
});

et Maps

 $(document).ready(function ()  {
 $('#map').gmap3(
  { action: 'addMarker',
    address: "24 bis avenue Edouard Herriot, 19100 Brive",
    marker:{
      options:{
		draggable:false,
		
		animation: google.maps.Animation.BOUNCE
      }
    },
    map:{
      center: true,
		panControl: false,
		scaleControl: false,
		streetViewControl: false,
		mapTypeControl: false,
      zoom: 16,
      
    }
  }
);
});

Joli bazars n'est-ce pas!? Je pourrais essayer de faire cohabiter tout le monde, mais j'ai vraiment peur de tout faire crasher avec les modifs... je préfère être aidée par ceux, comme vous, qui maîtrisent mieux.

D'avance merci pour ceux qui mettront un p'tit coup de balai là-dedans

Salut,

jolie bazar en effet C'est pas évident de savoir précisément tout ce que tu souhaite faire.

En tout cas, première piste, ta div .hfeed a une hauteur nulle sur les pages incriminées, ce qui signifie que ton animate au 'onAjaxNavLoad' n'est pas déclenché.

Cet évènement est "triggé" de la sorte dans ajax_nav.js :

$('.ajax_nav').each(function (i) {
$.get(addUrlParam(History.getState().url, 'getbyid', this.id),
function (data) {
var id = this.url.replace(/.*getbyid=/, '');
$('#' + id).empty().html(data).trigger(onAjaxNavLoad);
prepareForAjax('#' + id);
});
}); 

Essaye de regarder si ton get s'exécute comme il le faudrait. Etant donné que ce fichier est appelé très tôt dans ton html ça ne m'étonnerait pas que ça coince ici.

Tiens nous au courant.

Merci mais cela ne risque t'il pas de poser soucis aux autres pages qui marchent très bien sans l'ajout du code pour customizer une scrollbar ?

Dans tous les cas, après moultes tests, c'est le petit script qui fout le bazar dans tout. Et je n'arrive pas à comprendre pourquoi onAjaxNavLoad me fait un caprice car j'utilise bien d'autres scripts qui n'ont jamais été capricieux.
Modifié par letty (24 Jul 2012 - 11:03)

C'est moi ou ton élément #Scroller n'existe pas ? D'ailleurs jsScroller.js n'est même pas chargé sur ton serveur ?
Modifié par Julien Optea (24 Jul 2012 - 11:18)

Je les vois bien tous les deux chargés...

Désolé, j'ai du m'absenter.

Je ne vois vraiment pas ces 2 éléments, sont-ils présents sur toutes les pages ?
Où est placé #Scroller ?
Quel navigateur utilises-tu ? (FF à jour de mon côté).