11521 sujets

JavaScript, DOM et API Web HTML5

Utilisation de $(

Bonsoir,

Je dois créer un site Web pour un projet de cours et je rencontre actuellement un problème. J'aimerais pouvoir switcher de page rapidement comme ici : http://www.thepetedesign.com/demos/onepage_scroll_demo.html

Cependant, cela ne marche pas et je trouve pas l'erreur.
Merci d'avance pour votre aide.

Voici ci-joint les codes HTML, CSS, et JAVASCRIPT :

<html>
	<head>
		<meta charset="utf-8"/>
			<link rel="stylesheet" href="CodeCss.css" type="text/css"/>
                        <script src="js/Code.js"></script>
		<title>Site</title>
	</head>
<body>
<div class="main"> 
<section>
	<div id="index"> 
		<header> 
			<div id="Menu-gauche">
				<p>Logo agence</p>
					<hr/>
						<ul class="menu-vertical"> 
							<li class="li-menu"><a href="#">A</a></li>
							<li class="li-menu"><a href="#">B</a></li>
							<li class="li-menu"><a href="#">C</a></li>
							<li class="li-menu"><a href="#">D</a></li> 
							<li class="li-menu"><a href="#">E</a></li>
						</ul>
					<hr/>
				<p>Réseaux sociaux</p>
			</div>
		</header>
			<div id="Menu-droite">
			</div>	
	</div>
</section>
	
<section>
	<div id="Page1"> 
	</div>
</section>

<section>
	<div id="Page2"> 
	</div>
</section>
</div>

</body>
</html>


			/* Structure du site */

body {
  width: 100%; 
  margin: auto;
}

div{
  text-align: center;
}

div#Index{
  height: 100%;
  background-color: #6796c8;
}
	div#Menu-gauche{
	  height: 100%; width:15%;
	  float: left;
	  background: white;
	  position: fixed;
	  margin-left: 3%;
	}
	
	div#menu-droite{
	  height: 100%; width: 85%;
	}

div#Page1{
  height: 100%;
  background-color: blue;
}

div#Page2{
  height: 100%;
  background-color: green;
}

			/* Menu en-tête */		
			
hr{
  width: 50%;
}			
			
.menu-vertical {
  list-style: none; 
  background: white;
  text-align: center;
  padding:0;
}
 
.li-menu a {
  font-family: Arial;
  display: block; /* Liens deviennent des blocs + Retirer les puces */
  margin: 1em 0 0 0; /* espace entre les liens */
  color: black;
  text-decoration: none; /* pour enlever le soulignement */

  -webkit-transition: all .3s; /* Chrome et Safari */
  -moz-transition: all .3s; /* Firefox */
  transition: all .3s; /* syntaxe officielle */
}
 

.li-menu a:hover, /* Survol de la souris */
.li-menu a:focus { /* Focus au clavier */
  color: #671519; font-size: 130%;
}




$(window).load(function() {
 $(".main").onepage_scroll();
});

Modifié par flox (05 Oct 2016 - 23:15)
Modérateur
Coucou,


Alors le $ c'est signe d’utilisation de JQuery (un framework Js).

Il faudrait que tu télécharge JQuery (ici : http://jquery.com/download/) et que tu l'ajoute dans ton head comme tu l'a fait avec ton script (mais juste avant). Ex :
<html>
	<head>
		<meta charset="utf-8"/>
			<link rel="stylesheet" href="CodeCss.css" type="text/css"/>
                        <script src="js/jquery-3.1.1.min.js"></script>
                        <script src="js/Code.js"></script>
		<title>Site</title>
	</head>


Suffit de lire la doc Smiley cligne https://github.com/peachananr/onepage-scroll

One Page Scroll 1.3.1 by Pete R. a écrit :
Requirement :

jQuery (1.9.0 or later)

Modifié par _laurent (06 Oct 2016 - 17:22)
_laurent a écrit :
Coucou,


Alors le $ c'est signe d’utilisation de JQuery (un framework Js).

Il faudrait que tu télécharge JQuery (ici : http://jquery.com/download/) et que tu l'ajoute dans ton head comme tu l'a fait avec ton script (mais juste avant). Ex :
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="utf-8"/&gt;
			&lt;link rel="stylesheet" href="CodeCss.css" type="text/css"/&gt;
                        &lt;script src="js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
                        &lt;script src="js/Code.js"&gt;&lt;/script&gt;
		&lt;title&gt;Site&lt;/title&gt;
	&lt;/head&gt;


Suffit de lire la doc Smiley cligne https://github.com/peachananr/onepage-scroll



Hello,

J'ai bien rajouté "<script src="js/jquery-3.1.1.min.js"></script>" puis téléchargé jQuery, mais cela ne marche toujours pas Smiley ohwell
Modérateur
Tu as bien téléchargé le fichier "jquery-3.1.1.min.js" et tu l'as bien mis dans le dossier nommé "js" qui se trouve dans le même dossier que ta page html ?
_laurent a écrit :
Tu as bien téléchargé le fichier "jquery-3.1.1.min.js" et tu l'as bien mis dans le dossier nommé "js" qui se trouve dans le même dossier que ta page html ?


Oui.

upload/63002-1.png
upload/63002-2.png
Modérateur
Ha mais je viens de caler que tu n'as pas importé la librairie du tout !!! Smiley ravi

Il faut bien que tu link aussi le fichier jquery.onepage-scroll.js pour que ça marche ! C'est pas magique Smiley ravi

Du coup en lisant la doc il faut aussi le fichier onepage-scroll.css.

Donc au final tu aura :

<html>
	<head>
		<meta charset="utf-8"/>
			<link rel="stylesheet" href="CodeCss.css" type="text/css"/>
			<link rel="stylesheet" href="onepage-scroll.css" type="text/css">
                        <script src="js/jquery-3.1.1.min.js"></script>
                        <script src="js/jquery.onepage-scroll.js"></script>
                        <script src="js/Code.js"></script>
		<title>Site</title>
	</head>


Pense bien à tout télécharger (https://github.com/peachananr/onepage-scroll) et a bien tout mettre dans les bon dossier (suivre les chemins indiquer dans les href)
Bon j'ai tout téléchargé et au final ça m'a changé la structure de ma page, et je ne peux même plus utiliser le scroll pour changer de page vu qu'elles ne s'affichent plus.

Je pensais pas que c'était si compliqué pour juste pouvoir switcher de page de cette manière là. Je ferai autrement, tant pis.

Merci tout de même pour ton aide précieuse et le temps que tu m'as accordé.

Bonne soirée !
Sujet clos
Aller à