11521 sujets

JavaScript, DOM et API Web HTML5

Problème de js dans ma page html

Bonjour,

Je suis en étude MMI et en intégration Web on nous a demander de crée un site d'après un exemple en y ajoutant 2 Javascript:

1-lavalamp
2-scrollTo
-(il y a également quelque fonction pour adapter la taille des div a la taille de l’écran mais elles fonctionnent très bien)

Cependant ils marchent tout les deux séparément mais si je met les deux en même temps ça déconne et toutes les réponses sur les forum sont très vague à ce sujet si quelqu'un peut me dépanner svp ça serais super sympas.

j'ai ceci dans mon html:


<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/styles.css" type="text/css"/>
		<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
		<title>Jean Goudat</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript" src="js/lava-Lamp-Master/jquery.easing.1.3.js"></script>
    	<script type="text/javascript" src="js/lava-Lamp-Master/jquery.lavalamp.min.js"></script>


    	<!--<script type="text/javascript" src="js/scrollTo/js/jquery.js"></script>
    	<script type="text/javascript" src="js/scrollTo/js/localscroll/jquery.localscroll.js"></script>
		<script type="text/javascript" src="js/scrollTo/js/localscroll/jquery.scrollTo.js"></script>
    	<script type="text/javascript" src="js/scrollTo/js/lancement.js"></script>-->
	</head>
	<body>
		<div id='all'>
			<header>
				<div id='jean'>
					<p>Jean Goudat - Intégrateur Web</p>
				</div>
				<div id='nav'>
					<nav>
						<ul id="navlist">
							<li class="active"><a href='#/'>ACCUEIL</a></li>
							<li><a href='#/mes_realisation'>MES REALISATION</a></li>
							<li><a href='#/mon_cv'>MON CV</a></li>
							<li><a href='#/contact'>CONTACT</a></li>
						</ul>
					</nav>
				</div>
			</header>
			<section>
				<article>
					<a name='/mes_realisation'></a>
					<header>Mes Réalisations</header>
						<div id='realisation'>
							<img src="images/awesome-banff-wallpaper-1920x1200.jpg" alt="">
						</div>
				</article>
				<article>
					<a name='/mon_cv'></a>
					<header>Mon CV</header>
						<div id='cv'>
							<img src="images/cv.png" alt="">
						</div>
				</article>
				<article>
					<a name='/contact'></a>
					<header>Contactez Moi!</header>
						<div id='contact'>
						</div>
				</article>
			</section>
			<footer>
			</footer>
		</div>

		<script type="text/javascript">
			$('#navlist').lavalamp({
   				fx: "backout",
   				speed: 700,
   				click: function(event, menuItem) {
           		    return true;
               	}
            });

		
       		$(function() {
            	var sH = $(window).height();
            	$('#realisation').css('height', sH + 'px');
        	});        
    
		
   		    $(function() {
        	    var sH = $(window).height();
            	$('#cv').css('height', sH + 'px');
        	});        

        	$(function() {
        	    var sH = $(window).height();
            	$('#contact').css('height', sH + 'px');
        	});

</script>

	</body>
</html>


désoler du paver
du coups quand j’enlève les commentaire encadrant les lien vers le javascript du scroll le js Lavalamp deconne

en vous remerciant d'avance
Antoine
Bonjour et bienvenue sur le forum,

Alors déjà pour commencer, il manque l'appel à la méthode scrollTo() dans ton code, tu appelles deux fois jQuery, tu appelles localScroll avant scrollTo alors que c'est une dépendance de ce dernier...
... Et tu as des ancres html un peu bizarroïdes du style #/ancres (le slash est en trop pour moi), et tu utilises l'attribut name sur un lien ? Smiley rolleyes

Bon mais pour ton problème, il n'y a normalement pas de soucis à associer les deux plugins.
Regarde dans ta console d'erreur javascript si tu n'en as pas une ou deux.

NB: évite au maximum de gérer ton CSS dans ton JS comme tu le fais.
Sujet clos
Aller à