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

[Gibyy]

Bonjour SpaceFrog,

Merci de ton aide je m'accroche mais je débute en jQuery. Donc c'est sympa.

Pour répondre à ta question :

- en fait j'ai plusieurs boutons.
- lorsqu'on clique sur un bouton une animation verticale fait apparaitre une div avec slideDown.
- dans cette div se load() une page externe. contenant une série d'image façon
previous / next. et glissement horizontal.

---c'est là que le previous next et glissements horizontaux ne marchent pas quand c'est chargé dans ma mage principale.

- ensuite j'ai d'autres boutons : quand je clique sur un autre bouton cela replie la page ouverte (slideUp) et "masque" donc la page chargée.

- Et ça en ouvre une autre de la même manière slideDown et load().

- Et ensuite pareil si on reclique sur un autre bouton, ou un bouton déjà cliqué.


Donc en gros c'est un système avec une page principale qui charge au besoin plusieures pages externes contenant un script jQuery "scrollTo" (de glissement horizontal) (que tu connais sans doute).

D'ailleurs j'inclu ce script dans les pages chargées pas dans la page principale.

[SpaceFrog]

Je vois bien le principe.
Juste une mise en garde :
As tu pris en considération que tes pages chargées par ajax ne seront pas référencées par les moteurs de recherche ?
Penche toi sur le hash bang pour y remedier

[Gibyy]

donc ce principe te semble propre ?

petite question,
l'utilisation de on() se fait sur le script de la page principale ou de la page
chargée ?

--- edit

j'édite mon message car en te relisant bien tu me dis :

- 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é

Pourrais tu m'indiquer comment faire cela ? je pense que c'est la piste la plus adaptée à mon cas. (puisqu'on n'utilise pas on() dans ce cas )

--- edit

donc si je comprends bien je dois utiliser cette methode :

Code :

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

1
2
3
4
5
6
var request = $.ajax({
  url: "maSousPage.html", //la sous page ciblé
  type: "POST",
  data: {id : MonIDCible}, //l'id pour ensuite cibler pour le scroll ?
  dataType: "html"
});

Ce que je n'arrive pas à mettre en pratique c'est que mon code est de cette forme :

Code :

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

1
2
3
4
5
 function deploydown() {
            url = $("#"+deployer.substring(0,6)+' a').attr('href');
            $("#"+deployer.substring(0,6)).slideDown({duration: 700, easing: 'easeOutCirc'}).load(url); 
			}
});

donc il faudrait que je ne fasse pas load(url) à la fin, mais que je lance ma fonction speciale qui precise le datatype ?

[SpaceFrog]

avec load() tu vas chercher du contenu sur le serveur que tu mets dans un element de la page, mais les scripts contenus dasn la réponse ne sont pas interprétés cf. http://api.jquery.com/load/ chapitre Script Execution

Avec des méthodes comme ajax(), get() ou post() tu peux faire la même chose mais en précisant en plus le type de données que tu attends en retour.
Le principe serait alors de faire un get() et sur le callback appender ton html reçu en retour dans ton element présent sur la page mère. ainsi le script contenu sera interprété

Code :

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

$.get('page_a_charger.html', function (data) {$('#cible').empty().append(data);},'html')

[Gibyy]

ha pardon j'étais en train d'éditer mon post pendant que tu postais.
je vais étudier ce que tu me dis. merci !!
est ce que ce que j'ai édité est plus précis ?

[SpaceFrog]

tu souhaites utiliser $.ajax ?
pas de souci, mais tu as oublié le callback
je ne vois pas de success sur ton ajax, fonction qui sera lancée lors du retour ...

[Gibyy]

Non ce n'est pas que je souhaite utiliser Ajax, je cherche juste à faire quelques chose qui fonctionne ^^
C'etait en reflexion par rapport à ce que tu me disais j'avais trouvé qu'avec ajax je pouvais specifier d'autres infos, mais je me penche sur ton script get en essayant de l'adapter à mon cas (et te montrerait le résultat) (attention ça va piquer les yeux ^^).

[Gibyy]

J'ai essayé d'appliquer à mon code un get comme tu me l'as indiqué.
après plusieurs essais cela ne fonctionne pas.
Est ce que je m'y prends bien ? ou est-ce qu'il y a juste une petite erreur ?

c'est un peu nouveau pour moi.

---edit


j'ai essayé d'améliorer ce code... la page se charge bien mais ses scripts ne fonctionnent pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var deployer;														
        deployer = "";
       	var url ="";
 
 
        function deploydown() {
 
        	url = $("#"+deployer.substring(0,6)+' a').attr('href');
        	$("#"+deployer.substring(0,6)).slideDown({duration: 700, easing: 'easeOutCirc'})
        							.$($.get(url, function (data) {$("#"+deployer.substring(0,6)).empty().append(data);},'html'));
		}

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
10
$.ajax({
  url: "maSousPage.html", //la sous page ciblé
  type: "POST",
  data: {id : MonIDCible}, //l'id pour ensuite cibler pour le scroll ?
  dataType: "html",
  success: function(data){
   $('#cible').empty().append(data).animate('scrollTop',$('#MonIdCible').offest().top)
 
}
});

[Gibyy]

Merci SpaceFrog,
du coup tu es parti sur Ajax alors que de mon côté (voir mon edit) je suis parti à fond sur du get ^^ comme tu me l'avais conseillé.
du coup je vais étudier ton script ajax .
que penses tu de mon script get ?

merci !

[Gibyy]

Je viens d'étudier ton script Ajax et tu met un ScrollTop.

en fait j'utilise un scrollTo (plugin jQuery) qui est dans ma page chargée.

Sinon en fait c'est un SlideDown (et SlideUp). pour déplier la page.

en fait j'aimerais par rapport à mon script de base :

- avoir un slideDown pour faire apparaitre ma div. Puis ensuite charger la page dans cette div.

- et ensuite dans cette page executer les ScrollTo.

tu vois ?

un peu perdu je suis

[Gibyy]

J'ai fait cette petite page histoire de charger ma page dans un environement simplifié :


On charge une page à l'aide de get dans ".result" (ça marche)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <title>testget</title>
 
 
 
 
 
 
<style type="text/css">
.result{ border:solid 1px grey;position:relative;margin:0px;width:800px;height:500px;}
</style>
 
</head>
<body>
 
<div class=result></div>
 
 
<script type="text/javascript">
		$.get('horizon/horizonb.html', function(data) {
			  $('.result').html(data);
  					alert('Load was performed.');
		},'html');
</script>
</body>
</html>

Ensuite avec Get je charge ma fameuse page contenant le Scroll horizontal (qui ne veut pas marcher) :

Nous ciblons 'boutonhorizon a' nous cliquons dessus pour scroller "#main"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
	<div class="boutoncontent" id="boutoncontent">
 
				<div class="boutonhorizon" id="bouton01">
						<a href="#none" class="volet01"><img src="horizon/boutonhorizon.gif"/></a></div>
 
				<div class="boutonhorizon" id="bouton02">
						<a href="#none" class="volet02"><img src="horizon/boutonhorizon.gif"/></a></div>
 
			</div>
 
 
 
 
<div id="horizon">			
<div id="main">
		<div id="contenu">
			<div class="volet" id="volet01" style="left:0px; background-color:yellow; position:absolute;"></div>
			<div class="volet" id="volet02" style="left:800px; background-color:blue; position:absolute;"></div>
		</div>
</div>
</div>
<script type="text/javascript">
$('.boutonhorizon a').click(function(){
    		$('#main').scrollTo( $('#' + $(this).attr('class')), 800 , {easing:'easeOutCirc'}, {axis:'x'} );
	});
</script>

Du coup je passe sur firebug et je regarde l'erreur au clic sur un des boutons :


$("#main").scrollTo is not a function

une idée ?

#main n'est pas trouvé ? ou alors scrollTo n'est pas reconnu ?

[SpaceFrog]

a mon avis c'est scrollTo qui n'est pas trouvé ...
Pourquoi ne pas juste faire un animate Css sur le srcollTop ?

[Gibyy]

tu ne saurais pas pourquoi il ne le trouve pas ?
un conflit de bibliothèque tu penses ?

Un scrollTop ? Tu veux dire scrollTo ? Animer à la place ? comment ça ?

merci