Site parallax JS - faire fonctionner 2 scripts ensemble

[Gros edit suite à une nouvelle idée pour le projet]

Bonjour à tous !

Pièce jointe 175695

Je travaille actuellement avec un ami pour un projet de site web, qui présentera un genre de site/BD qu'il a conçu, et nous rencontrons actuellement un soucis quand à un menu en Javascript. Nous sommes tous les 2 débutants en Javascript et bien que nous y passions toutes nos nuits dernièrement il reste quelques problèmes x)

Un mot sur le projet

Il s'agit d'un site one page qui représente une histoire (images BD + textes explicatifs) dans lequel on peut naviguer dans toutes les "cases". Voici le site qui nous a servi de base : http://stolksdorf.github.io/Parallaxjs/.
Nous avons sans problème réadapté le code et toutes les "cases" du site sont créés et la navigation via les flèches fonctionne.
Là où nous rencontrons un problème, c'est qu'en plus de pouvoir naviguer grâce au flèches en suivant un chemin établi, nous voulons que les utilisateurs puissent accéder à n'importe quel page via un menu qui reste en bas de page et qui contient les 25 "cases" du site. J'ai réussi à l'intégrer mais pas moyen de comprendre comment faire coïncider tel lien du menu avec telle "case" ou position sur le site.
C'est un menu Smint (démo du site dans le lien) : http://www.outyear.co.uk/smint/demo/.

Notre code

HTML

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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!-- saved from url=(0039)http://stolksdorf.github.io/Parallaxjs/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Feuille de style du site -->
	<link rel="Stylesheet" type="text/css" href="./Parallaxjs_files/xo.css"/>
<!-- Code Javascript Parallax -->	
	<script type="text/javascript" src="./Parallaxjs_files/jq.js"></script>
	<script type="text/javascript" src="./Parallaxjs_files/parallax.min.js"></script>
	<script type="text/javascript" src="./Parallaxjs_files/index.js"></script>
<!-- Feuille de style principale du site -->
	<link rel="Stylesheet" type="text/css" href="./Parallaxjs_files/index.css">
<!-- Code Javascript lightbox + Css A REMETTRE
	<link rel="stylesheet" href="./Parallaxjs_files/jquery.fancybox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="./Parallaxjs_files/jquery.fancybox.pack.js"></script>
	<script type="text/javascript" src="./Parallaxjs_files/jquery.fancybox.js"></script>
-->
<!-- Code Javascript Smint + Css -->	
	<link href="./Parallaxjs_files/Smint/css/demo.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="./Parallaxjs_files/Smint/js/jquery.min.js"></script>
	<script	src="./Parallaxjs_files/Smint/js/jquery.smint.js" type="text/javascript" ></script>
<!-- Appel du code JS de Smint -->
		<script type="text/javascript">
$(document).ready( function() {
    $('.subMenu').smint({
        'scrollSpeed' : 1000
    });
});
</script>
</head>
<body class="background" >
	<div class="container">
<!-- Minimap Smint -->	
	<div class="subMenu" >
	 	<div class="inner">
	 		<a href="#sTop" class="subNavBtn">Home</a>
	 		<a href="#s1" class="subNavBtn">Section 1</a> 
			<a href="#s2" class="subNavBtn">Section 2</a>
			<a href="#s3" class="subNavBtn">Section 3</a>
			<a href="#s4" class="subNavBtn">Section 4</a>
			<a href="#s5" class="subNavBtn">Section 5</a>
		</div>
	</div>
<!-- Fin Minimap Smint -->	
<!-- Page d'acceuil -->
		<div class="s1">
		<div id="index" class="leaguegothic white page" style="display: block; top: 0px; position: absolute; left: 0px;">
			<div id="titlebox" class="f2 lghtgrey">
				<div class="f5 white">Projet de ouf</div>
				On y passe des heures et des heures mais on s'éclate à donf'.
				</div>
			</div></div>
<!-- NOS 24 PAGES -->
			<div class="s2">
			<div id="sos" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			</div></div>
<!-- Lightbox A REMETTRE
			<a class="fancybox" rel="group" href="./Parallaxjs_files/images/fullscreen/1.jpg"><img src="./Parallaxjs_files/images/thumbnails/t_1.jpg" alt="" /></a>
			<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script> --></div>
		<div class="s3">
		<div id="contact" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
		</div></div>
		<div id="survivants" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="bad" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="orphelinat" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="depart" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="destin" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="jours" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="centrale" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="histoire" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="mort" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="yan" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="prison" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="debrief" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="camp" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="boom" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="revolution" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="forteresse" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="habitation" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="tour" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="ligne" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="toctoc" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="berlin" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
		<div id="corbusier" class="leaguegothic white page" style="display: none; top: 0px; position: absolute;">
			<div class="center;">
			<span class="calibri f0">Page de test 2</span></div>
		</div>
<!-- FIN NOS 24 PAGES -->
<!-- Divs pour les flèches de navigation -->	
	<div id="leftControl" class="control" style="display: block;">
		<img id="leftArrow" class="arrow left" style="width:60px" src="./Parallaxjs_files/arrowleft2.png">
		<div id="leftText" class="dirText" style="float:right"></div>
	</div>
	<div id="rightControl" class="control" style="display: block;">
		<img id="rightArrow" class="arrow right" style="width:60px" src="./Parallaxjs_files/arrowright2.png">
		<div id="rightText" class="dirText" style="float:left"></div>
	</div>
	<div id="topControl" class="control center" style="width: 145px; left: 45%; display: block;">
		<img id="topArrow" class="arrow left" style="height:60px" src="./Parallaxjs_files/arrowtop2.png">
		<div id="topText" class="dirText txtcenter"></div>
	</div>
	<div id="bottomControl" class="control center" style="width: 145px; left: 45%; bottom: 0px; display: none;">
		<div id="bottomText" class="dirText txtcenter"></div>
		<img id="bottomArrow" class="arrow left" style="height:60px" src="./Parallaxjs_files/arrowbottom2.png">
 
	</div>
</div>
<iframe frameborder="0" scrolling="no" style="border: 0px; display: none; background-color: transparent;"></iframe><div id="GOOGLE_INPUT_CHEXT_FLAG" style="display: none;" input="null" input_stat="{&quot;tlang&quot;:null,&quot;tsbc&quot;:null,&quot;pun&quot;:null,&quot;mk&quot;:false,&quot;ss&quot;:true}"></div></body></html>

CSS

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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
 
body{
	overflow:hidden;
}
.background{
	background-image: url(assets/1.png);
}
.noanchor:link, .noanchor:visited, .noanchor:active {
	text-decoration: none;
	color:white;
}
.page{
	width:100%;
	height:100%;
}
#logo{
	left:10px;
	top:0px;
}
#content{
	height:100%;
	overflow-y: scroll;
	overflow-x: hidden;
	background-image: url(assets/brushed_alu.png);
}
.jscode{
	background-color:white;
	font-family:"Courier New",Courier,monospace;
	width:600px;
	margin-left:40px;
	padding:10 15 10 15;
	-moz-box-shadow: 5px 5px 5px #888;-webkit-box-shadow: 5px 5px 5px #888;box-shadow: 5px 5x 5px #888;
}
p{
	margin-left:10px;
	font-family:Calibri;
	font-size:15px;
	margin-bottom:15px;
}
#titlebox{
	position:absolute;
	left:40%;
	top:100px;
	width:650px;
	height:500px;
}
#codebox{
	margin-top:20px;
	background-color:white;
	font-family:"Courier New",Courier,monospace;
	width:500px;
	height:100px;
	margin-left:40px;
	padding:10 15 10 15;
	-moz-box-shadow: 5px 5px 5px #888;-webkit-box-shadow: 5px 5px 5px #888;box-shadow: 5px 5x 5px #888;
}
.arrow{
	opacity:0.2;
}
.dirText{
	color:white;
	font-size:40px;
	margin-top:45px;
	opacity:0.0;
}
.control{
	position:fixed;
	width:170px;
	cursor:pointer;
}
#rightControl{
	right:0px;
	top:40%;
}
#leftControl{
	left:0px;
	top:40%;
}
#bottomControl{
	position: fixed;
	margin-bottom: 50px
}
#bandeau{
	background-image:url(../images/bandeau.png);
	background-repeat:no-repeat;	
	background-position:top center;
	width:100%;
	height:225px;
	margin:844px auto;
	position:absolute;
	z-index:6;
}
.a{
	background-repeat:no-repeat;
	background-size:100%;
	height:500px;
	background-color:grey;
	visibility:hidden;
	z-index:-1;
	position:absolute;
	margin:500px 0px;
	border-style:solid;
	border-width:10px;
	border-color:white;
	box-shadow: 0px 0px 40px rgba(0,0,0,0.75);
}
.apret{
	width:80px;
	height:25px;
	background-color:black;
	margin:0px auto;
	margin-top:470px;
	text-align:center;
	padding-top:5px;
}
.apret a{
	color:white;
	font-weight:bold;
}
.apret a:hover{
	color:#87ffc2;
}
.clear {
	clear: both;
}
/* Minimap */
.inner {
	width: 960px;
	margin: 0 auto;
	position: relative;
	min-height: 50px;
	padding:30px 0;
	font-size: 18px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
.inner:after {
	  content: "";
	  display: table;
	  clear: both;
}
.subMenu {
	height: 50px;
	z-index: 1000;
	width: 100%;
	background: #0977bc;
	position: fixed;
	bottom: 0px;
}
.subMenu .inner {
	padding:0;
	font-weight: 400;
	margin: 0 auto;
}
.subNavBtn {
	display: block;
	height: 35px;
	width: 10%;
	float: left;
	margin: 0px 0px 0 0;
	text-decoration: none;
	font-size: 14px;
	padding: 15px 2% 0 2%;
	text-align: center;
	color: #fff;
}
.subMenu a:hover {
	background: #1783c7;
}
.active {
	background: #25aae1;
}
.end {
	margin: 0;
}
/* Sections */
.sTop {
	min-height: 130px;
	background:#fff;
	color:#3d3d3d;
	padding: 50px 0;
	height: 300px;
}
.s1 {
	background:#184764;
	color:#fff;
}
.s2 {
	background: #313131;
}
.s2 a {
	color: #fff;
}
.s3 {
	background: #1b83b3;
}
.s4 {
	background: #5aa3c4;
}
.s5 {
	background: #bce1f1;
	color: #3d3d3d;
}
.s6 {
	background: #161616;
}

JavaScript navigation des flèches

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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
var rightKey, leftKey, topKey, bottomKey;
 
 
$(document).ready(function () {
 
	//Set up the triggers for the arrow keys
	$(document).keydown(function(e){
		if (e.keyCode == 37 && typeof leftKey === 'function') {
			leftKey();
		} else if(e.keyCode == 38 && typeof topKey === 'function') {
			topKey();
		} else if(e.keyCode == 39 && typeof rightKey === 'function') {
			rightKey();
		} else if(e.keyCode == 40 && typeof bottomKey === 'function') {
			bottomKey();
		}
	});
 
	parallax.add($("#index"))
			.add($("#sos"))
			.add($("#contact"))
			.add($("#survivants"))
			.add($("#bad"))
			.add($("#orphelinat"))
			.add($("#depart"))
			.add($("#destin"))
			.add($("#jours"))
			.add($("#centrale"))
			.add($("#histoire"))
			.add($("#mort"))
			.add($("#yan"))
			.add($("#prison"))
			.add($("#debrief"))
			.add($("#camp"))
			.add($("#boom"))
			.add($("#revolution"))
			.add($("#forteresse"))
			.add($("#habitation"))
			.add($("#tour"))
			.add($("#ligne"))
			.add($("#toctoc"))
			.add($("#berlin"))
			.add($("#corbusier"))
 
	parallax.background = $("body");
 
	//Clears each page navigation on load
	parallax.preload = function(){
		rightKey = leftKey = topKey = bottomKey = "";
		$(".control").hide();
	};
 
 
	//Setting up page navigation
	parallax.index.onload=function(){
		setBottom("sos","SOS");
	};
 
	parallax.sos.onload=function() {
		setTop("index","Home");
		setBottom("contact","Premier Contact");
	};
 
	parallax.contact.onload=function() {
		setTop("sos","SOS");
		setBottom("survivants","Survivants");
		setRight("depart","Départ Hamburg")
	};
 
	parallax.survivants.onload=function() {
		setTop("contact","Premier Contact");
		setRight("destin","Accepter son destin");
	};
 
	parallax.bad.onload=function() {
		setRight("jours","Tous les jours");
	};
 
	parallax.orphelinat.onload=function() {
		setBottom("depart","Départ Hamburg");
	};
 
	parallax.depart.onload=function() {
		setTop("orphelinat","Orphelinat");
		setBottom("destin","Accepter son destin");
	};
 
	parallax.destin.onload=function(){
		setTop("depart","Départ Hamburg");
		setBottom("jours","Tous les jours");
		setLeft("survivants","Survivants")
	};
 
	parallax.jours.onload=function(){
		setTop("destin","Accepter son destin");
		setLeft("bad","Bad Svend");
		setBottom("centrale","Centrale Hamburg");
	};
 
	parallax.centrale.onload=function(){
		setTop("jours","Tous les jours");
		setRight("debrief","Débriefing");
	};
 
	parallax.histoire.onload=function(){
		setBottom("mort","Mort Svend");
		setRight("camp","Camp Prague");
	};
 
	parallax.mort.onload=function(){
		setTop("histoire","Histoire Prague");
		setBottom("yan","Fin Yan");
	};
 
	parallax.yan.onload=function(){
		setTop("mort","Mort Svend");
	};
 
	parallax.prison.onload=function(){
		setRight("forteresse","Forteresse");
		setBottom("debrief","Débriefing");
	};
 
	parallax.debrief.onload=function(){
		setTop("prison","Prison dorée");
		setRight("habitation","Unité d'habitation");
	};
 
 
	parallax.camp.onload=function(){
		setLeft("histoire","Histoire Prague");
		setRight("tour","Tour Prague");
	};
 
	parallax.boom.onload=function(){
		setRight("ligne","Dernière ligne droite");
		setBottom("revolution","Révolution");
	};
 
	parallax.revolution.onload=function(){
		setTop("boom","Boom Berlin");
		setRight("toctoc","Toc toc toc");
	};
 
	parallax.forteresse.onload=function(){
		setLeft("prison","Prison dorée");
		setBottom("habitation","Unité d'habitation");
	};
 
	parallax.habitation.onload=function(){
		setTop("forteresse","Forteresse");
		setLeft("debrief","Débriefing");
		setRight("corbusier","Mission Corbusier");
	};
 
	parallax.tour.onload=function(){
		setLeft("camp","Camp Prague");
		setBottom("ligne","Dernière Ligne Droite");
	};
 
	parallax.ligne.onload=function(){
		setLeft("boom","Boom Berlin");
		setTop("tour","Tour Prague");
	};
 
	parallax.toctoc.onload=function(){
		setLeft("revolution","Révolution");
		setBottom("berlin","Go to Berlin");
	};
 
	parallax.berlin.onload=function(){
		setTop("toctoc","Toc toc toc");
		setBottom("corbusier","Mission Corbusier");
	};
 
	parallax.corbusier.onload=function(){
		setTop("berlin","Go to Berlin");
		setLeft("habitation","Unité d'habitation");
	};
 
 
 
	//Sets the correct triggers for the arrows, plus arrow keys
	function setRight(page, text){
		$("#rightText").text(text);
		$("#rightControl").show().unbind('click').click(function(){
			parallax[page].right();
		});
		rightKey = function(){
			parallax[page].right();
		};
	}
 
	function setLeft(page, text){
		$("#leftText").text(text);
		$("#leftControl").show().unbind('click').click(function(){
			parallax[page].left();
		});
		leftKey = function(){
			parallax[page].left();
		};
	}
 
	function setTop(page, text){
		$("#topText").text(text);
		$("#topControl").show().unbind('click').click(function(){
			parallax[page].top();
		});
		topKey = function(){
			parallax[page].top();
		};
	}
 
	function setBottom(page, text){
		$("#bottomText").text(text);
		$("#bottomControl").show().unbind('click').click(function(){
			parallax[page].bottom();
		});
		bottomKey = function(){
			parallax[page].bottom();
		};
	}
 
	//The fadey bits
	$("#bottomControl").mouseenter(function(){
		$("#bottomArrow").fadeTo(500,1);
		$("#bottomText").fadeTo(500,1);
	}).mouseleave(function(){
		$("#bottomArrow").stop().fadeTo(500,0.2);
		$("#bottomText").stop().fadeTo(500,0);
	});
 
	$("#leftControl").mouseenter(function(){
		$("#leftArrow").fadeTo(500,1);
		$("#leftText").fadeTo(500,1);
	}).mouseleave(function(){
		$("#leftArrow").stop().fadeTo(500, 0.2);
		$("#leftText").stop().fadeTo(500,0);
	});
 
	$("#rightControl").mouseenter(function(){
		$("#rightArrow").fadeTo(500,1);
		$("#rightText").fadeTo(500,1);
	}).mouseleave(function(){
		$("#rightArrow").stop().fadeTo(500, 0.2);
		$("#rightText").stop().fadeTo(500,0);
	});
 
	$("#topControl").mouseenter(function(){
		$("#topArrow").fadeTo(500,1);
		$("#topText").fadeTo(500,1);
	}).mouseleave(function(){
		$("#topArrow").stop().fadeTo(500, 0.2);
		$("#topText").stop().fadeTo(500,0);
	});
 
 
	$(".control").hide();
	parallax.index.show();
 
});

JavaScript menu Smint

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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
/*
 
SMINT V1.0 by Robert McCracken
SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy)
SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy)
 
SMINT is my first dabble into jQuery plugins!
 
http://www.outyear.co.uk/smint/
 
If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
 
*/
 
 
(function(){
 
 
	$.fn.smint = function( options ) {
 
		var settings = $.extend({
			'scrollSpeed'  : 500,
			'mySelector'     : 'div'
		}, options);
 
		// adding a class to users div
		$(this).addClass('smint');
 
 
 
 
		//Set the variables needed
		var optionLocs = new Array(),
			lastScrollTop = 0,
			menuHeight = $(".smint").height(),
			smint = $('.smint'),
        	smintA = $('.smint a'),
        	myOffset = smint.height();
 
 
 
 
 
		if ( settings.scrollSpeed ) {
				var scrollSpeed = settings.scrollSpeed
			}
 
		if ( settings.mySelector ) {
				var mySelector = settings.mySelector
		};
 
 
 
		return smintA.each( function(index) {
 
			var id = $(this).attr('href').split('#')[1];
 
			if (!$(this).hasClass("extLink")) {
				$(this).attr('id', id);
			}
 
 
			//Fill the menu
			optionLocs.push(Array(
				$(mySelector+"."+id).position().top-menuHeight, 
				$(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id)
			);
 
			///////////////////////////////////
 
			// get initial top offset for the menu 
			var stickyTop = smint.offset().top;	
 
			// check position and make sticky if needed
			var stickyMenu = function(direction){
 
				// current distance top
				var scrollTop = $(window).scrollTop()+myOffset; 
 
				// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
				if (scrollTop > stickyTop+myOffset) { 
					smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addClass('fxd');
 
					// add padding to the body to make up for the loss in heigt when the menu goes to a fixed position.
					// When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page
					$('body').css('padding-top', menuHeight );	
				} else {
					smint.css( 'position', 'relative').removeClass('fxd'); 
					//remove the padding we added.
					$('body').css('padding-top', '0' );	
				}   
 
				// Check if the position is inside then change the menu
				// Courtesy of Ryan Clarke (@clarkieryan)
				if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){	
					if(direction == "up"){
						$("#"+id).addClass("active");
						$("#"+optionLocs[index+1][2]).removeClass("active");
					} else if(index > 0) {
						$("#"+id).addClass("active");
						$("#"+optionLocs[index-1][2]).removeClass("active");
					} else if(direction == undefined){
						$("#"+id).addClass("active");
					}
					$.each(optionLocs, function(i){
						if(id != optionLocs[i][2]){
 
							$("#"+optionLocs[i][2]).removeClass("active");
						}
					});
				}
			};
 
			// run functions
			stickyMenu();
 
			// run function every time you scroll
			$(window).scroll(function() {
				//Get the direction of scroll
				var st = $(this).scrollTop()+myOffset;
				if (st > lastScrollTop) {
				    direction = "down";
				} else if (st < lastScrollTop ){
				    direction = "up";
				}
				lastScrollTop = st;
				stickyMenu(direction);
 
				// Check if at bottom of page, if so, add class to last <a> as sometimes the last div
				// isnt long enough to scroll to the top of the page and trigger the active state.
 
				if($(window).scrollTop() + $(window).height() == $(document).height()) {
	       			smintA.removeClass('active')
	       			$(".smint a:not('.extLink'):last").addClass('active')
 
   				} else {
   					smintA.last().removeClass('active')
   				}
			});
 
			///////////////////////////////////////
 
        	$(this).on('click', function(e){
				// gets the height of the users div. This is used for off-setting the scroll so the menu doesnt overlap any content in the div they jst scrolled to
				var myOffset = smint.height();   
 
        		// stops hrefs making the page jump when clicked
				e.preventDefault();
 
				// get the hash of the button you just clicked
				var hash = $(this).attr('href').split('#')[1];
 
 
 
				var goTo =  $(mySelector+'.'+ hash).offset().top-myOffset;
 
				// Scroll the page to the desired position!
				$("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
 
				// if the link has the '.extLink' class it will be ignored 
		 		// Courtesy of mcpacosy ‏(@mcpacosy)
				if ($(this).hasClass("extLink"))
                {
                    return false;
                }
 
			});	
 
 
			//This lets yo use links in body text to scroll. Just add the class 'intLink' to your button and it will scroll
 
			$('.intLink').on('click', function(e){
				var myOffset = smint.height();   
 
				e.preventDefault();
 
				var hash = $(this).attr('href').split('#')[1];
 
				if (smint.hasClass('fxd')) {
					var goTo =  $(mySelector+'.'+ hash).position().top-myOffset;
				} else {
					var goTo =  $(mySelector+'.'+ hash).position().top-myOffset*2;
				}
 
				$("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
 
				if ($(this).hasClass("extLink"))
                {
                    return false;
                }
 
			});	
		});
 
	};
 
	$.fn.smint.defaults = { 'scrollSpeed': 500, 'mySelector': 'div'};
})(jQuery);

Problèmes identifiés

Hum nous avons quelques idées sur ce qui ne pourrait pas fonctionner, un conflit des 2 scripts, une mauvaise référence au niveau des classes, ou des id dans le JavaScript, pourtant même avec le tutoriel du menu Smint on bloque... A savoir que comme l'on prend du code venant de plusieurs sources, on se perd vite dans ce qu'il faut laisser ou non, on passe pas mal de temps à faire des tests pour cleaner le code etc... Mais comme nous avons une deadline assez short et que ce projet nous tient vraiment à coeur, nous demandons votre aide :) !

Merci d'avance pour vos réponses, si déjà nous arrivons à faire cela ce sera génial =)

Ah, et en bonus pour les plus forts ! L'idéal pour nous serait de se rapprocher de ce menu à droite (qui m'avait l'air assez chaud à coder c'est pourquoi nous avons pris Smint), cela correspond exactement à une fonction de "minicarte" que nous voulons mettre sur notre site : http://www.exsus.com/highway-one-roadtrip/