Navigation responsive javascript

**amani1** · 23/10/2014, 23h07

Bonsoir,
je debutte avec javascript et je suis entrain de realiser une navigation responsive pour les appareils mobile et j'ai suivi ce tutoriel

http://toddmotto.com/building-an-htm...es-javascript/
mon probl�me et que j'aimerai bien s�par� le script dans un fichier externe au lieu de le mettre dans une balise <script></script> et puis je fais l'appel de ce dernier dans ma page html comme suit
<script type="text/javascript" src="script.js"></script>
mais rien ne ce passe lors de l'execution malgr� �a marche bien si je met le script au niveau de ma page html.voici le code

Code html :

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
<!doctype html>
<html>
<head>
	<link href="css/main.css" rel="stylesheet">
	<link href="css/demo.css" rel="stylesheet">
</head>
<body>
	<!-- Nav -->
	<nav class="nav">
		<ul class="nav-list">
			<li class="nav-item"><a href="#">Home</a></li>
			<li class="nav-item"><a href="#">About</a></li>
			<li class="nav-item"><a href="#">Services</a></li>
			<li class="nav-item"><a href="#">Portfolio</a></li>
			<li class="nav-item"><a href="#">Testimonials</a></li>
			<li class="nav-item"><a href="#">Contact</a></li>
		</ul>
	</nav>
	<!-- /Nav -->
</body>
</html>

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
(function () {
	// Create mobile element
	var mobile = document.createElement('div');
	mobile.className = 'nav-mobile';
	document.querySelector('.nav').appendChild(mobile);
	// hasClass
	function hasClass(elem, className) {
		return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
	}
	// toggleClass
	function toggleClass(elem, className) {
		var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
		if (hasClass(elem, className)) {
		    while (newClass.indexOf(' ' + className + ' ') >= 0) {
		        newClass = newClass.replace(' ' + className + ' ', ' ');
		    }
		    elem.className = newClass.replace(/^\s+|\s+$/g, '');
		} else {
		    elem.className += ' ' + className;
		}
	}
	// Mobile nav function
	var mobileNav = document.querySelector('.nav-mobile');
	var toggle = document.querySelector('.nav-list');
	mobileNav.onclick = function () {
		toggleClass(this, 'nav-mobile-open');
		toggleClass(toggle, 'nav-active');
	};
})();

**SylvainPV** · 24/10/2014, 00h00

Tu as bien laiss� la balise script au m�me endroit, apr�s ton HTML ?

**amani1** · 24/10/2014, 00h10

j'ai mis la balise script dans la section head

**Bovino** · 24/10/2014, 07h59

Il ne faut pas.
Si tu sais � quoi correspond la syntaxe (function () {...})(); (IIFE), tu sais alors que le code sera imm�diatement ex�cut�, donc avant que le DOM ne soit cr��. C'est pourquoi Sylvain t'indiquais de mettre la balise apr�s le HTML.

**SylvainPV** · 24/10/2014, 09h51

Tu peux la laisser dans la HEAD, � condition de changer ton code de cette mani�re :

remplacer

Code :

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

1
2
3
(function () {
...
})();

par :

Code :

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

1
2
3
document.addEventListener('DOMContentLoaded', function() {
...
});

De cette mani�re, la fonction ne sera plus imm�diatement invoqu�e mais attendra que le DOM est charg�. Mais le mieux reste de mettre tes scripts juste avant la fin de la balise </body>.

Navigation responsive javascript

JavaScript

Partager

Partager