11523 sujets

JavaScript, DOM et API Web HTML5

Srcipt js externaliser pour menu Raphaël

Bonjour

J'essaie de faire un menu first mobil, suite aux conseils de Raphaël j'ai visité cette page http://www.alsacreations.com/tuto/lire/1584-menu-de-navigation-avec-amelioration-progressive.html
J'ai bien travaillé dessus, merci Raphaël Smiley biggrin

J'ai essayé de mettre le script js dans une feuille js à part avec le lien qui va bien sur ma page html, le javascript ne fonctionne pas, le bouton est en css, est ce à cause de çà.

Si vous avez une solution, une réponse, Merci

BB
Modifié par 6l20 (30 Jun 2014 - 17:38)
6l20 a écrit :
Bonsoir,

Probablement une erreur d'adresse.
Peut-on voir une page en ligne ?



Bonsoir

Je viens de mettre en ligne 2 pages, une avec le script en bas de page html et l'autre avec le script dans un fichier js

Script dans la page :
http://www.taina64.net/essai/essai1.html

Script dans un fichier js:
http://www.taina64.net/essai/essai2.html

Code d'appel vers le fichier js:
<script src="fichier.js" type="text/javascript"></script>

Je suis parti de cet exemple
http://goetter.fr/nav/nav1/


Merci

Bonne soirée
Modifié par africa (30 Jun 2014 - 20:53)
Modérateur
Rallala, cette erreur me rappelle quelque chose....

Suivant ton code avec le fichier :

<!-- etc. -->
<head>
<!-- etc. -->
<script src="fichier.js" type="text/javascript"></script>
</head>
<!-- etc. -->
<nav role="navigation" id="navigation">
		<ul>
			<li><a href="#">Salade</a></li>
			<li><a href="#">Tomates</a></li>
			<li><a href="#">Oignons</a></li>
			<li><a href="#">Choucroute</a></li>
			<li><a href="#">Riesling</a></li>
			<li><a href="#">Picon-Bière</a></li>
		</ul>
	</nav>

ça ne peut pas fonctionner. Pourquoi ? Le code JS est :

//etc.
navi();
	// when resize or orientation change, reload function
	window.addEventListener('resize', navi);


On voit clairement l'appel à la fonction. Lorsque la fenêtre se redimensionnera, la fonction jouera également son rôle. Par contre en aucun cas on lit l’événement du chargement de la fenêtre. Ce qui te donne trois options :

- Soit dans le fichier js, tu lui dis au chargement de la fenêtre, tu me lances la fonction "navi()"
- Soit après le noeud nav, tu places l'appel au fichier script (Méthode crade)
- Soit à la fin du document html juste avant </body>. Le document (DOM) est chargé. Smiley cligne

Au passage, lorsque tu utilises des attributs exotiques en html5, je te conseille d'utiliser le prefixe "data-". Dans ton cas, ça te donnera : "data-role".

Mmmmh Jquery mobile....
Modifié par niuxe (30 Jun 2014 - 22:13)
Bonjour

Merci Niuxe

Comme j'ai un niveau zéro en javascript, je n'ai plus qu'à retrousser mes manches.

Bonne journée
Bonjour

J'ai essayé en vain d’appliquer la première solution préconiser par niuxe

- Soit dans le fichier js, tu lui dis au chargement de la fenêtre, tu me lances la fonction "navi()"

En fait il me faut apprendre un minimum de javascript pour réaliser ce code, je galère depuis hier soir..!

Si vous pouvez me donnez un ptit coup de pouce

Merci


Bonne journée

Code situé dans le fichier js

// targeting navigation
	var n = document.getElementById('navigation');
	// nav initially closed is JS enabled
	n.classList.add('is-closed');
	
	function navi() {
		// when small screen, create a switch button, and toggle navigation class
		if (window.matchMedia("(max-width: 767px)").matches && document.getElementById("toggle-nav")==undefined) {
			
			n.insertAdjacentHTML('afterBegin','<button id="toggle-nav"><i class="visually-hidden">Déplier/replier le menu</i></button>');
			t = document.getElementById('toggle-nav');  
			t.onclick=function(){ n.classList.toggle('is-closed');}
		}
		// when big screen, delete switch button, and toggle navigation class
		if (window.matchMedia("(min-width: 768px)").matches && document.getElementById("toggle-nav")) {
			document.getElementById("toggle-nav").outerHTML="";
		}
	}
	navi();
	// when resize or orientation change, reload function
	
	window.addEventListener('resize', navi);


Sujet clos
Aller à