11548 sujets

JavaScript, DOM et API Web HTML5

Probleme jquery

Bonjour ,
J'ai pour but de réaliser un carrousel comme ce tuto :

http://www.grafikart.fr/tutoriels/carrousel-javascript-87

Voila tout fonctionne jusqu'au moment ou je fait intervenir jquery dans mon javascript ... je l'ai pourtant télécharger en cliquant sur download il m'a proposé un code que j'ai enregistrer dans mon dossier jquery.js .
Je ne mets pas le code c'est le code qui est fourni directement en cliquant donc sur download.

Voici mon javascript pour le carrousel :

var carrousel = {

   nbSlide : 0,
   nbCurrent : 1,
   elemCurrent : null,
   elem : null,

   init : function(elem){
      this.nbSlide = elem.find('.slide').lenght;
   }
   
}

$(function(){
carrousel.init($('#carrousel'));
alert(carrousel.nbSlide);
});


voici mon html :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title> Julien-ultra </title>
	   <link href="style.css" rel="stylesheet" type="text/css" media="screen"></link>
	   <link href="carrousel.css" rel="stylesheet" type="text/css" media="screen"></link>
	   <script type="text/javascript" src="carrousel.js"></script>
	   <script type="text/javascript" src="jquery.js"></script>
   </head>
   
   <body>
   
     


     <div id="conteneur">
	 
       <div id="header"></div>
	   
	   <div id="a_la_une">
	      <div id="carrousel">
		     <div id="slide1">
			     <div class="visuel">
				    <img src="theme/carrousel_ouverture.jpg"/>
				 </div>
				 <div class="title">
				     ... : Ouverture du site ! 
				 </div>
			 </div>
			 
			 <div id="slide2" class="slide">
			     <div class="visuel">
				    <img src="theme/carrousel_berek.jpg"/>
				 </div>
				 <div class="title">
				     15/01/2011 : Berek Thunderfist
				 </div>
			 </div>
			 
			 <div id="slide3" class="slide">
			     <div class="visuel">
				    <img src="theme/carrousel_rafiel.jpg"/>
				 </div>
				 <div class="title">
				     17/10/2010 : Brother rafiel
				 </div>
			 </div>
			 
			 <!--
			 <div class="navigation">
			    <span>1</span>
			    <span>2</span>
			    <span>3</span>
			 </div>
			 -->
			 
		  </div>
	   </div>
	   
	   <div id="breves"></div>
	   
	   <div id="articles"></div>
	   
	   <div id="commentaires"></div>
	   
	   <div id="footer">
	       <ul id="menufooter_liens"> 
              <li><a href="#"></a></li>
           </ul> 
		   
		   <ul id="menufooter_livre_or"> 
              <li><a href="#"></a></li>
           </ul> 
		   
		   <ul id="menufooter_telechargements"> 
              <li><a href="#"></a></li>
           </ul> 
	   </div>
		  
		  
	 </div> 
	   
	   
	   
	   
	   
  
   </body>
</html>


Et le css de mon carrousel:

#carrousel{
border:none;
width:552px;
height:239px;
margin:0 auto;
position:relative;
}

.slide{
position:absolute;
top:0;
left:0;
width:552px;
height:239px;
}

.title{
position:absolute;
height:35px;
bottom:0;
left:0;
width:537px;
padding-left:15px;
line-height:35px;
background:url(theme/barre_carrousel.png);
color:#FFFFFF;
font-size:18px;
}

.navigation{
position:absolute;
bottom:38px;
right:5px;
}

.navigation span{
background:#FFFFFF;
color:#000000;
padding:2px 4px;
cursor:pointer;
}

.navigation span:hover{
background:#000000;
color:#FFFFFF;
}


Cela à l'air de venir de jquery puisque dans mon code javascript les "null" de elemCurrent et elem ne semblent pas être pris en compte ...je me trompe peut être mais le fait est que mon code javascript ne marche pas puisque qu'il est sensé affiché le message alert comme dans la vidéo à la 15:54 min .
Je ne comprend pas jusque la tout marchait et mon code à l'air pourtant bon . Smiley sweatdrop
Merci d'avance ,
Cordialement.
Hello,

À priori c'est une simple erreur de frappe:
this.nbSlide = elem.find('.slide').lenght;

C'est length, pas lenght. Smiley cligne

En corrigeant ce point, j'obtiens un résultat.
Attention, ton élément qui porte l'identifiant "slide1" n'a pas de classe "slide". C'est un oubli?
Super merci pour la réponse !
Effectivement j'avais mal orthographié le mot length et j'avais oublié la classe "slide" pour l'identifiant "slide1" Smiley cligne
Mais le message alert ne s'affiche toujours pas ...
Quand tu dis que t'obtiens un résultat c'est à dire ? Le message alert s'affiche chez toi ?

Merci d'avance,
Cordialement.

EDIT : j'ai avancé un peu dans le tuto donné plus haut et rien à faire ça ne marche pas ...
Je pense vraiment que cela se rapporte à jquery puisque mes éléments "null " de mon javascript ne changent pas de couleur et donc ne semblent pas être pris en compte ... Ainsi jquery aurait été mal téléchargé ? Bizarre j'ai enregistrer plusieurs fois le code donné en cliquant sur download sur jquery.com car mon code ne marche pas ... mais rien n'y fait .
Merci d'avance pour vos réponses , je suis bloqué de chez bloqué Smiley fache

Re-EDIT: J'ai trouvé YAHOUUUUUUU c'est moi que j'suis trop fort ! Smiley cligne
Le probleme se trouvait dans l'html , fallait juste remplacer ça :

<script type="text/javascript" src="carrousel.js"></script>
           <script type="text/javascript" src="jquery.js"></script>


par ça :

<script type="text/javascript" src="jquery.js"></script>
	   <script type="text/javascript" src="carrousel.js"></script>


Bon , ba merci quand même ...
Modifié par juju.92 (27 Mar 2011 - 18:33)
Sujet clos
Aller à