18041 sujets

Questions générales et questions de débutants

Pb Tuto Parallaxe (Javascript)

Hello,

Je viens de découvrir ce site en recherchant des infos sur l'effet "PARALLAXE" qui m'attire beaucoup ;o)
J'ai donc suivi le tuto.

Tout ce passe bien, jusqu'a l'insertion du script JQuery. (j'ai vu d'autres topics sur ce sujet, mais ils datent de 2012.. et ne comportaient pas de réponse.)

Donc, j'insère tel que proposé le code de chargement du scripts et ne constate pas l'effet attendu.
J'ai utilisé l'inspection de la page pour en savoir plus, et j'ai découvert qu'autant j'arrive a accéder au script "jquery.min.js" (car on y indique l'URL complete) autant mon navigateur ne trouve pas le script "jquery.parallax-1.1.js" Ce qui me semble normale (a mon niveau car je ne maitrise pas les "scripts" pour l'instant) car on demande de le chercher dans un repertoire "scripts" répertoire qui n'existe pas sur mon site..
<script type="text/javascript" src="[b][#red]scripts[/#][/b]/jquery.parallax-1.1.js"></script>


Alors, je ne sais pas si mon navigateur DEVRAIT s'y retrouver tout seul en ayant chargé jquery.min.js juste avant. Ou si il manque une information pour accéder au jquery.parallax-1.1.js..

Pour information, je fais tourner mon site en LOCALHOST via MAMP (sur mac) et j'utilise SAFARI (derniers version)

Voila si quelqu'un a une idée ca m'aiderai ;o)
Merci !!
Modifié par Keihilin (02 Feb 2014 - 12:34)
Salut,

ça se trouve ta page est en cache du coup tu n'as pas le reste des modifications que tu as effectué, ou alors tu n'as pas spécifié le bon chemin du coup ton nav passe en 404 l'appel et n'affiche rien dans la source.
Merci pour ton retour.

Ca m'arrive souvent d'oublier de rafraichir, mais pas dans ce cas la.
D'ailleurs, je fais afficher le code de ma page, et j'y retrouve bien le bout de code proposé dans le tuto..

Peut-etre qu'il faut adapter quelque chose dans ce code pour agire sur ma page, par exemple, je vois la variable "$document" c'est pareil pour tout le monde ou pas ?
Keihilin a écrit :
Peut-etre qu'il faut adapter quelque chose dans ce code pour agir sur ma page, par exemple, je vois la variable "$document", c'est pareil pour tout le monde ou pas ?

Bonjour,

Difficile de te répondre sans voir ton code, ou mieux tes pages en ligne...
Oui, c'est pareil pour tout le monde.
Here we are !

 <body>
    	<!-- <?php include("../PHP/fond.php"); ?> -->
     	<header>
     		<h1>. [langue]arallaxe Effect</h1>
     		<?php include("../PHP/nav.php"); ?>
     	</header>
     	<section>
     		<div id="slide1">
     			<div class="slidein">
     				<h1>Lorem ipsum dolor sit amet</h1>
     				<p>BlaBla.</p>
     			</div>
     		</div>
     		<div id="slide2">
     			<div class="slidein">
     				<h1>Lorem ipsum dolor sit amet</h1>
     				<p>BlaBla.</p>
     			</div>
     		</div>
     		<div id="slide3">
     			<div class="slidein">
     				<h1>Lorem ipsum dolor sit amet</h1>
     				<p>BlaBla.</p>
     			</div>
     		</div>
     	</section>
     	<!-- <?php include("../PHP/footer.php"); ?> -->
     	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     	<script type="text/javascript" src="scripts/jquery.parallax-1.1.js"></script>
     	<script type="text/javascript">	
   			 $(document).ready(function(){		
       		 	$('#slide1').parallax("center", 0, 0.1, true);
       		 	$('#slide2').parallax("center", 900, 0.1, true);
       		 	$('#slide3').parallax("center", 2900, 0.1, true);
   			 })
		</script>
    </body>


Et pour le CSS:
body
{
	background-color : grey;
	margin: 0;
	padding: 0;
} 

#slide1, #slide2, #slide3 {
	height: 1000px;
	padding-top:200px;
	margin: 0;
}
 
#slide1
{
	background: url(../images/nuage_2000.jpg) no-repeat center 0 fixed;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
 	-o-background-size: cover; /* pour Opera */
 	background-size: cover; /* version standardisée */
}

#slide2
{
	background: url(../images/montagne_2000.jpg) no-repeat center 0 fixed;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
 	-o-background-size: cover; /* pour Opera */
 	background-size: cover; /* version standardisée */
}

#slide3
{
	background: url(../images/route_2000.jpg) no-repeat center 0 fixed;
	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
 	-o-background-size: cover; /* pour Opera */
 	background-size: cover; /* version standardisée */
}

.slidein
{
	width : 749px;
	background-color: rgba(220,220,220, 0.8);
	min-height : 230px; 
	margin: 0 auto;
}


Et si j'affiche les warning :
upload/53339-Capturedec.png

C'est pourquoi, je me dit que le problème vient du faite que le script n'est pas joinable (faut telecharger quelque chose ?)
Modifié par Keihilin (02 Feb 2014 - 17:13)
Salut et bienvenue Smiley smile

Et bien c'est sûr que si tu ne lie pas le script, ça ne risque pas de fonctionner ! Smiley lol

a écrit :
<script type="text/javascript" src="scripts/jquery.parallax-1.1.js"></script>

Cette ligne va aller chercher le fichier "jquery.parallax-1.1.js" dans un répertoire "scripts" lui-même situé dans le répertoire contenant ta page HTML.

Il faut donc que tu créé ce répertoire "scripts" et que tu y place le fichier javascript concerné Smiley smile
Merci Audrasjb ;o)

Tu confirmes mes doutes donc ;o)
Le truc, c'est qu'il ne me semble pas qu'on parle de telecharger quoi que ce soit dans le tuto..
{EDIT : J'y repasse une 50eme fois sur le tuto, et cette fois je vois la ligne ou il est question de telecharger... rahhh..}

J'en profite pour une derniers question. J'ai l'habitude de voir les appel de scripts dans le bloc HEAD.
plutôt qu'en fin de page, pourquoi dans le tuto on nous conseille de charger les scripts juste avant la fermeture de BODY ?
Modifié par Keihilin (02 Feb 2014 - 19:59)
Le chargement des scripts juste avant </body> c'est pour permettre au document de se charger en premier, sans attendre que l'intégralité des scripts soient chargés.
Ok merci pour l'info.

Sinon, après avoir telechargé le repertoire (qui ne contient pas que le scripts..) et en adaptant le code (car maintenant la version est 1.1.3) j'ai un autre PB ;o) toujours pas l'effet souhaité. Mais maintenant c'est pire.. je ne vois que ma 1ere image du slide1, les slides 2 et 3 ne s'affiche plus..

Je regarderais ca a tete reposer. ca la sature un peu..
Hello,

Après avoir mis de coté ma recherche sur l'effet Parallaxe, je m'y suis retenté ce matin.
J'ai opté pour telecharger le code HTML et CSS de la demo proposé, (j'ai juste remplacé les images de fond, et adapté les chemins dans le code)

Je me suis retrouvé dans la meme situation que pour mon essai personnel (voir plus haut).

Puis, j'ai pensé a récupérer le script parallaxe : jquery.parallax-1.1.js
En le téléchargeant depuis la page DEMO car si l'on suit le lien donné dans le TUTO on obtiens la version 1.1.3 du script.

Et la miracle : Ca fonctionne parfaitement.

Donc, en conclusion ce code fonctionne pour la version 1.1 et pas pour la version 1.1.3
Je suppose qu'en adaptant le code on pourrait éventuellement le faire fonctionner pour le 1.1.3...

Il serait bon pour les débutant comme moi, de proposer dans le text du tuto un lien vers votre source 1.1
Ca éviterait de devoir vampiriser votre site demo ;o))

(Bon tuto cependant, j'adore cet effet)
Hello, je suis dans le même cas où tu étais au début :
impossible de comprendre quoi "télécharger ", ca rje ne fais pas encore de JQuery / Javascript, donc je ne m'y connais pas .

J'ai bien mis les script en fin de page,
j'ai créé un dossier "script" mais dedans j'essaie de mettre le 1.1 de la page vers laquelle on nous dirige (pas évident de savoir où chercher)
et maintenant , ça ne fait pas l'effet escompté, décris...


Peux-tu m'aider ?
Sujet clos
Aller à