Discussion :

[Gibyy]

Bonjour,

- Je charge une page avec Load().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
 
	var deployer;														
        deployer = "";
       	var url ="";
 
        // on charge une page (page01.html) avec un load dans une div qui apparait en slide (vers le bas)
        function deploydown() {
            url = $("#"+deployer.substring(0,6)+' a').attr('href');
            $("#"+deployer.substring(0,6)).slideDown({duration: 700, easing: 'easeOutCirc'}).load(url); 
			}
});

- Cette sous page contient un script JQuery (plugin scrollTo) qui permet de faire un scroll horizontal.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// On cible les a des classes "boutonhorizon"
$('.boutonhorizon a').click(function(){
    				// on cible la div #main et on glisse jusqu'à l'attribut en class exemple : #volet02
   				$('#main').scrollTo( $('#' + $(this).attr('class')), 800 , {easing:'easeOutCirc'}, {axis:'x'} );
		});

Mon problème est que ce code de glissement horizontal de ma sous page marche parfaitement lorsque je lance ma sous page de manière indépendante, mais il ne fonctionne plus lorsque la page est inclue via load() dans ma page principale.


J'ai beau tout tenter je n'y arrive pas.

Pouvez vous m'indiquer la solution si toutefois il y en a une ?
je crois qu'il s'agit d'un problème de ciblage en ligne 4.


merci beaucoup

[SpaceFrog]

Un grand classique désormais

=> live() , on() ou délégate

sinon avec les methodes ajax de jquery il faut declarer le dataType html et faire attentions que le script soit bien syntaxé (point virgules en fin d'instructions )

[Gibyy]

Merci beaucoup je suis déjà en train de me pencher sur ce grand classique.

j'ai regardé du côté de live() cela semble déprécié dois je me pencher dessus du coup ?

sinon dans mon cas en deux mots quelle est l'utilité des ces fonctions ?
(elles semblent d'usage proches)


merci encore

[SpaceFrog]

live est en effet déprécié.

on() permet d'attribuer des evenements pas anticipation avant leur instanciation sur la page
delegate() permet l'heritage d'evenements sur les enfants d'un objet

Dans ton cas de figure je vois trois manières de résoudre le problème:

- soit tu attribues par anticipation le script de scroll avant que l'objet ne soit chargé avec on ou delegate, du coup plus besoin de script dans le html loadé. le load du html suffit, le script étant présent par anticipation

- soit tu passes des load() à une autre methode d'ajax qui te permette de preciser un datatype html et alors le script sera interprété

- soit tu fais un load() pour le html puis dans son callback un .getScript() pour la partie script

[Gibyy]

Merci je sent mieux les nuances et les possibilités.
Dans mon cas comme tu as vu il y a un slide qui fait apparaitre une gallerie d'image (le html chargé).
En fait lorsqu'on clique sur divers bouton on zappe entre divers html qui s'ouvrent et se referment.

Donc par rapport à ta dernière réponse j'ai une nouvelle question :
Avant de partir sur une piste qui me semble appropriée, mais qui pourrait être problématique parmi les 3 voix que tu indique :

- Laquelle te semble la mieux appropriée dans mon cas où je peux à tout moment loader une autre page à la place d'une autre en fonction du bouton cliqué sur la page d'origine ?

- Dois je prévoir une fonction pour "supprimer de la mémoire" chaque page quand elle se referme lorsque la nouvelle page se charge afin d'éviter tout conflit ?

merci pour ton aide et tes réponse qui m'aident bcp

[SpaceFrog]

Ta navigation se fait intégralement en ajax ?

je ne vois pas pourquoi tu aurais des conflits entre tes pages.

Personnellement sur mes sites les scripts nécessaires à la navigation sont tous présent au chargement initial.
Eventuellement j'utilise un getScript pour un script particulier et lourd qui ne serait spécifique qu'à une seule page loadée...

Cela raccourcit les temps de chargements des pages appelées en ajax