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