Menu popup coulissant

**jamesb** · 29/12/2007, 17h35

Bonjour � tous,

J'ai commenc� un site web en utilisant au maximum ajax, javascript, css et PHP avec MySQL. J'essaie donc d'avoir des choses belless et qui bougent.

Actuellement j'ai d�j� cr�� un menu popup s'affichant lorsque la souris passe � un endroit, la page est charg�e � travers ajax. Il y a des liens qui permettent de "naviguer" dans cette petite popup.
Dans mon cas, j'ai une popup comme ceci:

Quand on clique sur "Rechercher", autre chose s'affiche. Mais le changement est brutal. J'aimerais pouvoir faire coulisser vers la gauche les deux pages, pour que cela paraissent plus naturel. Un bon exemple que je connais est DeviantArt, regardez le menu "Categories" en haut � gauche:

http://www.deviantart.com

J'ignore si c'est en JS mais en tout cas je n'arrive pas � retrouver �a dans le code. C'est vraiment terrible comme effet !
Merci de me donner un petit coup de pouce

A bient�t.

**jamesb** · 01/01/2008, 17h19

Bonjour,

Personne y'a une petite id�e ? Je ne demande absolument pas de code, je demande juste que quelqu'un me donne une id�e ou une piste.

Ca pourrait m'�tre d'une grande aide. Sinon j'ai regard� un peu sur le net et j'ai remarqu� qu'il y a peu-�tre une possibilit� avec une iframe ? En d�pla�ant le scroll ? C'est possible, est-ce que cela donnerait-il cet effet ?

Sur ce merci d'avance et bonne ann�e 2008 !

**le_chomeur** · 02/01/2008, 09h39

Alors sans code , juste les grandes lignes

- Astuce n�1 : mettre une div contenante avec comme propri�t� : overflow:hidden;
- Astuce n�2 : te faire un pti script pour r�duire la largeur ( ou hauteur ) de ta div et le tour est jou�

**jamesb** · 02/01/2008, 20h42

Envoy� par le_chomeur

Alors sans code , juste les grandes lignes

- Astuce n�1 : mettre une div contenante avec comme propri�t� : overflow:hidden;
- Astuce n�2 : te faire un pti script pour r�duire la largeur ( ou hauteur ) de ta div et le tour est jou�

Salut le_chomeur,

merci de ta r�ponse ! J'ai trouv� comment faire, tu m'as bien aid�

. Je sais pas si c'est tr�s propre mais en tout cas �a ne fonctionne pas sous Firefox. Je suis sous Opera et �a fonctionne tr�s bien. Voil� le code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
	<head>
		<title>Test de menu coulissant</title>
		<style type="text/css">
			.div1 {
				width : 300px;
				height: 700px;
				border: thin solid red;
				overflow: hidden;
			}
			.bq1 {
				width : 100%;
				height : 100%;
				border: thin dashed black;
			}
			.bq2 {
				width : 100%;
				height : 100%;
				border: thin dashed black;
			}
			.tab1 {
				width : 595px;
				height : 50px;
				border: none;
			}
		</style>
		<script language="javascript">
 
			var scrolltimeid; /* ID du compteur */
			var scrollspeed = 15; /* Vitesse en pixel du déplacement */
			var scrollrefresh = 25; /* Temps mis entre chaque déplacement [ms] */
			var pixel2scroll = 295; /* Déplacement total en pixel */
			var pixelscrolled = 0; /* Nombre de pixel déjà déplacé (ne pas toucher) */
			function scroll(i) { /* Fonction de déplacement */
				if (!i) {
					var i=1;
					document.getElementsByName("but1")[0].disabled = true;
				}
 
				// Vitesse normal au début
				if ((i*scrollspeed) <= (pixel2scroll-scrollspeed*2)) {
					pixelscrolled = pixelscrolled-(scrollspeed);
				}
				else { /* Vitesse plus lente pour la fin */
					pixelscrolled = pixelscrolled-(Math.ceil(scrollspeed/3));
				}
 
				// Débug dans le div console en bas
				document.getElementById("console").innerHTML = pixelscrolled;
				// Déplacement du tableau selon les paramétres
				document.getElementsByName("tab1")[0].style.marginLeft = pixelscrolled;
 
				// S'arrête dès que le placement est bon
				if (-pixelscrolled <= pixel2scroll) {
					scrolltimeid = setTimeout(function() { scroll((i+1)) }, scrollrefresh);
				} /* Profite de détruire le timer */
				else {
					i = "";
					pixelscrolled = 0;
					clearTimeout(scrolltimeid);
					scrolltimeid = "";
					document.getElementsByName("but1")[0].disabled = false;
				}
			}
		</script>
	</head>
	<body>
		<div name="div1" class="div1">
			<table cellspacing="0" cellpadding="10" name="tab1" class="tab1" border="0">
				<tr>
					<td width="50%">
						<div name="bq1" class="bq1">
							blabla1 blabla1
						</div>
					</td>
					<td width="50%">
						<div name="bq2" class="bq2">
							blabla2 blabla2 
						</div>
					</td>
				</tr>
			</table>
		</div>
		<br />
		<form action="javascript:;" name="form1">
			<input onClick="scroll();" name="but1" type="button" value="Scroll">
		</form>
		<div id="console">Console</div>
	</body>
</html>

Est-ce que vous avez une solution pour que cela fonctionne dans FF ? Personnellement je pense que c'est un probl�me de rafraichissement car �a gr�sille un peu.

Merci d'avance.

**jln13** · 03/01/2008, 00h43

salut,

j'ai test� ton script et fait quelques modifs pour que ca marche chez moi (sachant que je n'ai pas opera, j'ai uniquement ie et ff).

Tout d'abord tu avais oubli� de mettre le px a la fin du marginLeft. Par contre en changeant que ca, ca ne marchait toujours pas.

En fait chez moi j'avais un probl�me de display. Du genre je voyais que la div "blabla1 blabla1". La div "blabla2 blabla2" n'apparaissait pas et les bords "dotted" n'apparaissait pas non plus. J'ai donc tent� de rendre XHTML le document pour voir et ca m'a l'air de mieux fonctionner chez moi sur ff et ie.. donc a voir si ca t'aide !

(a noter que le document que je met n'est pas xhtml car il reste des attributs name n�cessaire pour le fonctionnement de ton truc) :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<!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" lang="en" xml:lang="en">
	<head>
		<title>Test de menu coulissant</title>
		<style type="text/css">
			.div1 {
				width : 300px;
				height: 400px;
				border: thin solid red;
				overflow: hidden;
			}
			.bq1 {
				width : 100%;
				height : 100%;
				border: thin dashed black;
			}
			.bq2 {
				width : 100%;
				height : 100%;
				border: thin dashed black;
			}
			.tab1 {
				width : 595px;
				height : 50px;
				border: none;
			}
		</style>
		<script type="text/javascript">
			<!--
			var scrolltimeid; /* ID du compteur */
			var scrollspeed = 15; /* Vitesse en pixel du déplacement */
			var scrollrefresh = 25; /* Temps mis entre chaque déplacement [ms] */
			var pixel2scroll = 295; /* Déplacement total en pixel */
			var pixelscrolled = 0; /* Nombre de pixel déjà déplacé (ne pas toucher) */
 
			/* Fonction de déplacement */
			function scroll(i)
			{
				if (!i)
				{
					var i=1;
					document.getElementsByName("but1")[0].disabled = true;
				}
 
				// Vitesse normal au début
				if ((i*scrollspeed) <= (pixel2scroll-scrollspeed*2))
				{
					pixelscrolled = pixelscrolled-(scrollspeed);
				}
				else /* Vitesse plus lente pour la fin */
				{
					pixelscrolled = pixelscrolled-(Math.ceil(scrollspeed/3));
				}
 
				// Débug dans le div console en bas
				document.getElementById("console").innerHTML = pixelscrolled;
				// Déplacement du tableau selon les paramétres
				document.getElementsByName("tab1")[0].style.marginLeft = pixelscrolled+'px';
 
				// S'arrête dès que le placement est bon
				if (-pixelscrolled <= pixel2scroll)
				{
					scrolltimeid = setTimeout(function() { scroll((i+1)) }, scrollrefresh);
				} /* Profite de détruire le timer */
				else
				{
					i = "";
					pixelscrolled = 0;
					clearTimeout(scrolltimeid);
					scrolltimeid = "";
					document.getElementsByName("but1")[0].disabled = false;
				}
			}
			-->
		</script>
	</head>
	<body>
		<div id="div1" class="div1">
			<table cellspacing="0" cellpadding="10" name="tab1" id="tab1" border="0">
				<tr>
					<td>
						<div id="bq1" class="bq1">
							blabla1 blabla1
						</div>
					</td>
					<td>
						<div id="bq2" class="bq2">
							blabla2 blabla2 
						</div>
					</td>
				</tr>
			</table>
			<br />
		</div>
 
		<form action="#" id="form1">
			<div>
				<input onclick="scroll();" name="but1" type="button" value="Scroll" />
			</div>
		</form>
 
		<div id="console">Console</div>
 
	</body>
</html>

**jamesb** · 03/01/2008, 19h13

Salut jln13,

Merci de ta r�ponse et de tes corrections. Effectivement je n'avais rien mis niveau des en-t�tes car c'�tait juste pour essayer

J'ai tout rajout� et j'ai remarqu� quelque chose. En fait c'est un bug graphique de firefox. En effet, lorsque j'utilise ta version, tu as r�duit le tableau pour que l'on voit les deux colonnes. Alors que le but est devoir la premi�re colonne uniquement et de d�filer pour ensuite ne voir que la deuxi�me (Voir l'exemple de DeviantArt).

Je disais, tu as diminu� la taille du tableau et l� sous firefox �a fonctionne, �a coulisse. Mais lorsque j'utilise ton code, mais avec le tableau � la bonne taille, et bien �a ne fonctionne pas :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
.tab1 {
				width : 350px;
				height : 50px;
				border: none;
			}

Dans ma partie <style> la taille du tableau tab1 � 350px ne fonctionne pas mais alors quand je le passe � 300px cela fonctionne !

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
.tab1 {
				width : 300px;
				height : 50px;
				border: none;
			}

Cela vient du fait que le tableau d�borde dans la zone div flottante, mais c'est le but recherch� justement. Je suis un peu ennuy�, comment est-ce que je dois proc�der alors ? Est-ce qu'il y a moyen de faire rafraichir le tableau dans Firefox ?

Avec IE7 par contre, il dit qu'il y a une erreur de syntaxe:

La ligne d'erreur correspond � celle-ci dans mon document :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
// Déplacement du tableau selon les paramétres
document.getElementsByName("tab1")[0].style.marginLeft = pixelscrolled+'px';

La page de jln13 marche tr�s bien sous IE7, je comprends pas qu'est ce que t'as chang� pour qu'il accepte ?!
La plupart de mes visiteurs seront sous IE, c'est donc g�nant. Auriez-vous une petite id�e ?

Merci d'avance !

**jamesb** · 11/01/2008, 22h26

J'aurais besoin d'un dernier petit coup de pouce, pour une petite correction, quelqu'un pourrait m'aider ? J'ai toujours pas trouver.

Merci d'avance.

Menu popup coulissant

JavaScript

Discussions similaires

Partager

Partager