Je n'arrive pas � faire fonctionner mon menu

**vocal94130** · 21/04/2010, 20h46

Bonjour,

Je n'arrive pas � faire fonctionner mon menu Jquery ! Voici l'architecture de mon site :

dossier "css" -> les Css
dossier "js" -> mes script .js
dossier "pages" -> mes pages Web je j'inclus dans index.php
dossier "images"
index.php -> le contenu g�n�ral du site, le central se trouve dans le dossier pages

Voici le script JS de mon menu :

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
 
$(document).ready(function()
{
	slide("#sliding-navigation", 25, 15, 150, .8);
});
 
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
 
	// initiates the timer used for the sliding animation
	var timer = 0;
 
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});
 
	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

Le menu se trouve dans une page (menu.php) qui est dans le dossier "pages" ! Il doit donc apparaitre quand j'appelle la menu.php dans index.php ! Mais le menu ne marche pas !

Lorsque la page menu.php est dans le m�me dossier que index.php, le menu marche donc j'en ais conclu que le probl�me vient sur .js

Merci de votre aide !!

**danielhagnoul** · 22/04/2010, 01h01

Bonsoir.

Il m'est impossible de tester votre probl�me sans la totalit� du code.

La seule chose que je puisse en dire c'est que l'�criture des fonctions each n'est pas canonique.

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
// creates the slide animation for all list elements 
$(list_elements).each(function(i, item){
	// margin left = - ([width of element] + [total vertical padding of element])
	$(item).css("margin-left","-180px");
 
	// updates timer
	timer = (timer*multiplier + time);
 
	$(item).animate({ marginLeft: "0" }, timer);
	$(item).animate({ marginLeft: "15px" }, timer);
	$(item).animate({ marginLeft: "0" }, timer);
});
 
// creates the hover-slide effect for all link elements 		
$(link_elements).each(function(i, item){
	$(item).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		}
	);
});

**vocal94130** · 22/04/2010, 10h20

Merci de la r�ponse tout d'abord !

Voici mon code source -> index.php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 
	<title>Titre</title>
	<link rel="stylesheet" type="text/css" href="monCss.css"/>
 
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/sliding_effect.js"></script>
</head>
 
<body>
	<div id="body">
 
		<?php 
			$pageOK = array('Bienvenue' => 'pages/Bienvenue.php',
                			'Contact' => 'pages/Contact.php',
							'quiSuisJe' => 'pages/QuiSuisJe.php',
							'Exemples' => 'pages/Exemples.php',
							'Commander' => 'pages/Commander.php');
 
  			if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
    				include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
 			 } else {
    				include('pages/Bienvenue.php');   // Page par défaut quant elle n'existe pas dans le tableau
  			}
		?>
 
	</div>
</body>
 
</html>

La page index appelle menu.php

Voici mon menu.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
  <div id="navigation-block">
            <ul id="sliding-navigation">
                <li class="sliding-element"><h3>Navigation Title</h3></li>
                <li class="sliding-element"><a href="#">Link 1</a></li>
                <li class="sliding-element"><a href="#">Link 2</a></li>
                <li class="sliding-element"><a href="#">Link 3</a></li>
                <li class="sliding-element"><a href="#">Link 4</a></li>
                <li class="sliding-element"><a href="#">Link 5</a></li>
            </ul>
</div>

Voici mon css :

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
 
h2 	
{ 
	color: #999;
	margin-bottom: 0; 
	margin-left:13px;
	background:url(../images/menu/navigation.jpg) no-repeat;
	height:40px;
}
 
h2 span
{
	display: none;
}
 
p	
{ 
	color: #ffff66; 
	margin-top: .5em;
	font-size: .75em;
	padding-left:15px;	
}
 
#navigation-block {
	position:relative;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}
 
#hide {
	position:absolute;
	top:30px;
	left:-190px;
}
 
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
	padding: 0;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}
 
ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(../images/menu/heading_bg.jpg) repeat-y;
	font-weight: normal;
}
 
ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#222 url(../images/menu/tab_bg.jpg) repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}
 
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Et le sliding_effect.js c'est celui que j'ai mis au premier post !

Qu'est ce que tu entends par canonique, je n'y connais pas grand chose en JS !

**danielhagnoul** · 23/04/2010, 08h31

Bonjour.

Canonique : conforme aux r�gles, au mod�le. Je parlais de l'�criture des fonctions each.

Code :

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

$(...).each(fonction (i, item) { ...}

Avez-vous test� les modifications propos�es ?

Le code de test fonctionne. Le probl�me est peut-�tre du c�t� du PHP ?

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
 
		/* TEST */
#navigation-block {
	position:relative;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 100%;
}
#hide {
	position:absolute;
	top:30px;
	left:-190px;
}
ul#sliding-navigation
{
	list-style: none;
	font-size: .75em;
	margin: 30px 0;
	padding: 0;
}
 
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
	display: block;
	width: 150px;
	padding: 5px 18px;
	margin: 0;
	margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
	color: #fff;
	background:#333 url(../images/menu/heading_bg.jpg) repeat-y;
	font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
	color: #999;
	background:#222 url(../images/menu/tab_bg.jpg) repeat-y;
	border: 1px solid #1a1a1a;
	text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }	
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
		function slide(navigation_id, pad_out, pad_in, time, multiplier){
			// creates the target paths
			var list_elements = navigation_id + " li.sliding-element";
			var link_elements = list_elements + " a";
 
			// initiates the timer used for the sliding animation
			var timer = 0;
 
			// creates the slide animation for all list elements 
			$(list_elements).each(function(i, item){
				// margin left = - ([width of element] + [total vertical padding of element])
				$(item).css("margin-left","-180px");
 
				// updates timer
				timer = (timer*multiplier + time);
 
				$(item).animate({ marginLeft: "0" }, timer);
				$(item).animate({ marginLeft: "15px" }, timer);
				$(item).animate({ marginLeft: "0" }, timer);
			});
 
			// creates the hover-slide effect for all link elements 		
			$(link_elements).each(function(i, item){
				$(item).hover(
					function()
					{
						$(this).animate({ paddingLeft: pad_out }, 150);
					},		
					function()
					{
						$(this).animate({ paddingLeft: pad_in }, 150);
					}
				);
			});
		}
 
		$(function(){
			slide("#sliding-navigation", 25, 15, 150, .8);
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div id="navigation-block">
			<ul id="sliding-navigation">
				<li class="sliding-element"><h3>Navigation Title</h3></li>
				<li class="sliding-element"><a href="#">Link 1</a></li>
				<li class="sliding-element"><a href="#">Link 2</a></li>
				<li class="sliding-element"><a href="#">Link 3</a></li>
				<li class="sliding-element"><a href="#">Link 4</a></li>
				<li class="sliding-element"><a href="#">Link 5</a></li>
			</ul>
		</div>
 
	</div>
	<iframe src="http://www.developpez.com/ws/badge?user=285162" style="border:none;"></iframe>
</body>  
</html>

**vocal94130** · 24/04/2010, 10h05

Bon �a y est �a marche

Merci tout d'abord de votre aide !

Ce qui bloqu� c'�tait un script que j'appelais dans index.php :

Code :

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

1
2
 
<script type="text/javascript" src="js/s3Slider2.js"></script>

Le s3Slider2.js contenait :

Code :

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

1
2
3
4
5
6
 
$(document).ready(function() {
			$('#slider1').s3Slider({
				timeOut: 4000 
			});
		});

Le s3Slider.js est le script mentionn� depuis le d�but.
J'ai donc mis le contenu directement dans mon index.php !
Je ne suis pas une b�te en JS mais d'apr�s mes recherches cette fonction permet l'ex�cution d'une fonction sp�cifique apr�s chargement du fichier !
Peut-on m'expliquer ce que fait exactement ce petit bouh de js?

**danielhagnoul** · 24/04/2010, 11h52

Bonjour.

C'est un plug-in que je ne connais pas. Documentation s3Slider.

**vocal94130** · 24/04/2010, 17h07

D'accord ! Merci

Je n'arrive pas � faire fonctionner mon menu

jQuery

Discussions similaires

Partager

Partager