[Résolu] [JQUERY] Faire un flip avec des sources HTML

Bonjour à tous,

j'ai un problème avec un site qui se présente ainsi : un "tableau" 3*3, donc 9 blocs de taille identiques, chacun d'une couleur différente sur la page d'accueil.

Chacun appelle une page différente de la couleur du bloc l'appelant.

Ce que je voudrais faire, c'est créer le site en XHTML/CSS (classique) sans les effets de javascript (pour qu'il fonctionne correctement sans Javascript, normal !), et rajouter les effets de transitions par-dessus. Notamment, utiliser cet effet : CurtainX.

Pour la création classique, aucun souci.
Par contre, rajouter les transitions par-dessus, là je ne vois pas trop comment m'y prendre.

Là, je suis ouvert à toute proposition intelligente ou toute idée.

Ce que je pensais faire, c'était essayer d'aller chopper le contenu à remplacer selon le lien (genre via AJAX, attraper la div qui va remplacer l'autre div dans l'effet), et déclencher la transition.


Est-il possible avec ce genre d'effet de faire : "quand on clique sur tel lien, aller charger tel morceau de HTML, et faire la transition entre telle div et telle div ?"

Excusez-moi si la question est bâteau... mais je sèche un peu là...
Modifié par Nico3333fr (12 Oct 2009 - 14:30)

Bonsoir,

Oui c'est possible et t'as méthode est bonne .

Le must serait de n'envoyer que les parties à modifier. Par exemple, les pages contiennent un corps, un menu, etc. Avec java-script tu ne veux récupéré que le corps, alors ne renvoie que le corps ! Une méthode simple, ajouter un paramètre au url via js et sur serveur si le paramètre existe, n'envoyé que le corps de la page.
On peux aussi faire des manipulations de dom sur la page de retour (histoire de rangé encore plus précisément les bloc récupérer).

Je présume -sinon dsl '^^- que tu es débutant avec java-script et jquery (si tu l'utilises), alors regarde dans la doc jquery les fonctions suivantes : $.ajax, fadeIn/fadeOut (ou d'autre effet), stop, html (et autre fonction de manipulation).

Donc en gros, ce que je peux faire :

- appeler un script PHP via Ajax,

- par exemple, le script PHP va charger les bonnes données (style je parse en PHP le contenu de la future page et le renvoie via ajax)

-Ensuite, j'ai les données, il faut que je fasse la transition entre les anciennes données (celles de la page actuelle et les nouvelles)


Est-ce que j'ai bien compris ?


Supposons que mon premier contenu soit

<div id="blocun">toto</div>

et que le second soit :

<div id="blocun"><strong>tutu</strong></div>

Comment je fais pour faire un fade entre les deux par exemple ?
Modifié par Nico3333fr (06 Oct 2009 - 15:12)

Salut,

Oui voilà t'as tout comprit

Le fade c'est tout bête. Quand tu reçois la page complète il suffira de faire un peu près ça :

$("blocun").fadeTo("fade", 0, function(){
    $(this).replaceWith(nouveaucontenu)
    .fadeTo("fade", 1);
});

Après si tu changes plusieurs bloc à partir de la même méthode le mieux et de retourner les données sous la forme xml, de boucler sur les éléments fils et effectuée le remplacement.

$(reponse_xml).children("*").children("*").each(function(i, e){
	//un truc du style...
	$(e.nodeName).fadeTo("fade", 0, function(){
		$(this).remove("*")
		.append($(e).children("*"))
		.fadeTo("fade", 1);
	});
});

Okay,je vais regarder de ce côté-là, ça m'a l'air pas mal aussi !

Je suis parti sur une technique toute simple pour chercher le contenu : le contenu de chaque bloc est mis dans un fichier .htm que j'inclus dans sa page, et ainsi, avec jquery, je peux aller récupérer les données sans trop me prendre la tête via :

$.get("bloc1_accueil.htm", function(data){...

En tout cas, merci bien !