Gestion d'apparition d'une DIV - Avec SPRY effects

Version imprimable

Bonjour à tous,

Je tente de gérer l’apparition et disparition de DIV en utilisant SpryEffects.
Contexte:
Dans une barre de menu, j'ai plusieurs images. Lorsque je clique sur l'une d'elle par:

Code:

onClick="MM_effectSlide('APropos', 1000, '0%', '100%',true, false)"

je lance un script
Code:

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 34 35 36 37 38 39 40 41 function MM_effectSlide(targetElement, duration, from, to, horizontal, toggle) { var LastC; if (!LastC){LastC='Accueil';} if (LastC ='Accueil') { Spry.Effect.DoFade('Acceuil', {duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='APropos') { Spry.Effect.DoFade('APropos', {duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='Opto') { Spry.Effect.DoFade('Opto', {duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='Acous') { Spry.Effect.DoFade('Acous', {duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='Atelier') { Spry.Effect.DoFade('Atelier', {duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='Produits') { Spry.Effect.DoFade('Produits',{duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='Marques') { Spry.Effect.DoFade('Marques', {duration: 500, from: '100%', to: '0%', toggle: false}); } if (LastC ='Promos') { Spry.Effect.DoFade('Promos', {duration: 500, from: '100%', to: '0%', toggle: false}); } Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, horizontal: horizontal, toggle: toggle}); LastC=targetElement; return LastC }
targetElement étant la DIV que je veut faire apparaitre, LastC étant la DIV que je veux faire disparaitre.
LastC étant initialisée avec 'Accueil' lors du lancement de la page.

Je suppose que c'est la portée de ma variable LastC

Code:

var LastC; if (!LastC){LastC='Accueil';}

qui pose problème, car il faudrait qu'elle soit globale et non incluse dans la fonction.
Quelqu'un pourrait m'expliquer comment la placer pour qu'elle soit globale?
D'avance merci

10/06/2012, 11h40
Bovino

:f1:

Le signe "=", c'est pour faire une affectation ! Du coup, l'équivalent booléen est toujours true et tu rentres dans toutes les conditions.

Pour une comparaison, c'est "==" ou "===".
10/06/2012, 11h48
Goltar

Oups en effet ! Merci !
10/06/2012, 12h21
Goltar

Mis sur résolu trop rapidement,
Je ne comprend pas pourquoi cela fonctionnes parfaitement la première fois que l'on clique sur l'image, qu"elle que soit l'image.
Par contre au second passage, plus rien ne va.

Quelqu'un pour me mettre sur la voie?

Le lien de la page: www.berquin.com/new/default2.asp

D'avance merci
10/06/2012, 16h42
Watilin
Salut,

juste une astuce avant de répondre à ta dernère question :

Code:

Spry.Effect.DoFade(LastC, {duration: 500, from: '100%', to: '0%', toggle: false});

Cette unique ligne te permettra d'éviter de faire tous ces if.

Pour ton problème, je n'ai pas regardé en détail, mais je dirais qu'il y a un confit entre l'élément <img> sur lequel tu as mis ton onclick, et l'élément <a> le contenant, qui réagit naturellement aux clics. Tu devrais mettre le onclick sur le <a>, ou bien arrêter le comportement par défaut de l'évènement click, si Spry te permet de le faire.

De manière plus générale, il y a plein d'imperfections sur ton site, mais j'imagine que tu n'as plus le choix... Garde ces remarques pour tes prochains projets ;)
- Les tableaux pour faire la mise en page, c'est moyen. Une mise en page bien faite, c'est du CSS appliqué à un code HTML le plus pur et le plus sémantique possible.
- Si tu veux conserver un peu de santé mentale, abandonne Spry, il y a plein de frameworks bien mieux foutus, jQuery, MooTools, ExtJS, Prototype, c'est pas le choix qui manque.
- Les attributs HTML de comportement (onmouseover, onclick, etc.) ça peut devenir un vrai casse-tête, si tu utilises des gestionnaires d'évènements (fais une recherche) tu pourras centraliser tes scripts et te rendre la vie plus belle.
Bon courage pour la suite !
10/06/2012, 17h25
Goltar

Merci pour l'astuce et les bons conseils.
Je jette un oeil sur les autres frameworks, j'avais déja regardé Mootools et Jquery qui ne semblait pas m'offrir ce que je recherchais.

Je reviens avec mes observation.

Bonne après-midi et encore merci !
10/06/2012, 18h53
Goltar

@Watilin

Voila j'ai adapté mon code suivant tes conseils (<a> en lieu et place de <img> pour le onclick) et

Code:

pry.Effect.DoFade(LastC, {duration: 500, from: '100%', to: '0%', toggle: false});

en fait je teste en mettant en place la méthode la plus détaillée possible pour une question de lisibilité et surtout de compréhension. (;-) je débute) et cette page n'est que l'ébauche.

Mais j'apprécie tes observation, merci pour ton temps.

Par contre rien ne change, après le premier passage (faites vos jeux, rien ne va plus ! :cry:)

Il est vrai qu'il existe pléthore de frameworks, par contre je n'en rencontre pas des masse qui me permettent un choix entre un slide horizontal et vertical.

Si ton temps te le permet j'aimerais réellement ton avis sur mes imperfections, cela me permettrais de m'améliorer. Par MP si tu veux !

Je continue mes investigations
10/06/2012, 19h22
NoSmoking

Bonjour,
ton problème ne viendrait-il pas du fait que lorsque tu masques la première fois l'opacité passant à 0 en fin de transition il ne sera donc plus visible si tu ne remets pas celle ci à 100%.
10/06/2012, 21h01
Goltar

Hum!?

J'essaie, j’espère que cela ne sera pas visible avant le slide.
Je teste

YES!!!! Résolu
Merci NoSmoking!!!

La solution, a nettoyer maintenant:
1) Appel sur clic <a>:

Code:

onClick="MM_effectSlide('Opto', 1000, '0%', '100%',true, false)"

Appel du script suivant:

Code:

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
function MM_effectSlide(targetElement, duration, from, to, horizontal, toggle)
{
  if (targetElement != LastC){	
 
	Spry.Effect.DoFade(LastC, {duration: 500, from: '100%', to: '0%', toggle: false});
	Spry.Effect.DoFade(targetElement, {duration: 50, from: '0%', to: '100%', toggle: false});
	Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, horizontal: horizontal, toggle: toggle});        
	LastC=targetElement;    
	return LastC		
 
  }
  if (targetElement == LastC)
  {	
	if (LastC =='Acceuil')
	{
	Spry.Effect.DoFade(targetElement, {duration: 50, from: '0%', to: '100%', toggle: false});
	Spry.Effect.DoSlide(targetElement, {duration: 1000, from: '100%', to: '0%', horizontal: false, toggle: true});
	}
	else
	{
	Spry.Effect.DoFade(targetElement, {duration: 50, from: '0%', to: '100%', toggle: false});
	Spry.Effect.DoSlide(targetElement, {duration: 1000, from: '100%', to: '0%', horizontal: true, toggle: true});
	} 
	LastC=targetElement;    
	return LastC		
  }
}

Merci pour votre temps !