Discussion :

[Goltar]

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 :

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

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

je lance un script

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

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

 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

[Bovino]

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 "===".

[Goltar]

Oups en effet ! Merci !

[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

[Watilin]

Salut,

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

Code :

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

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 !

[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 !

[Goltar]

@Watilin

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

Code :

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

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 ! )

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

[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%.

[Goltar]

Hum!?

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

[Goltar]

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

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

Code :

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

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

Appel du script suivant:

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