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