Jquerry : TypeError: $(...).offset(...) is undefined

Jquerry : TypeError: $(...).offset(...) is undefined - HTML/CSS - Programmation

Marsh Posté le 30-12-2015 à 16:36:56    

Bonjour a tous. ;)   :jap:  
 
Je me suis lancé dans la création d'un site web, et je suis totalement novice.  :sarcastic:  
Je bloque sur un truc qui va tres certainement vous paraitre évident ^^
 
J ai un petit script pour que le div menu suive le scroll a partir d'un certain point. D'apres mes recherche, c'est pas faisable avec du CSS donc je me suis tourné vers d autres moyens.
 
J ai une erreur : TypeError: $(...).offset(...) is undefined  a la ligne 5 "var menu = $('#menu').offset().top;":o  
 
Si une ame charitable pouvait me dépatouiller de cette galere ! ^^  
 
 
Le Jquery :

Code :
  1. <script language="JavaScript" type="text/javascript" src="file://C:/Users/Ehones4/Desktop/jQuery v2.1.4.js"></script>
  3. <script>
  5. var menu = $('#menu').offset().top;
  6. $(window).scroll(
  7. function() {
  8.  if ($(window).scrollTop() > 100) {
  9.   // fixed  
  10.   $('menu').addClass("floatable" );
  11.  } else {
  12.   // relative
  13.   $('menu').removeClass("floatable" );
  14.  }
  15. }
  16. );
  18. </script>


 
le CSS :

Code :
  1. #menu
  2. {
  3. height:60px;
  4. background-color:grey;
  5. width:1000px;
  6. top:130;
  7. margin-left: auto;
  8. margin-right: auto;
  9. font-family: Verdana;
  10. color: white;
  11. opacity:0.5;
  12. }
  16. #menu a /* Contenu des listes */
  17. {
  18. display : block;
  19. height:20px; /* barre verticale */
  20. padding-right : 0.5em;
  21. padding-left : 0.5em;
  22. text-decoration : none;
  23. padding: 12px;
  25. }
  27. #menu li /* Barre vericale * */     
  28. {
  29. border-right:1px solid #FFF;
  30. padding:0 4px;
  31. z-index:2;
  32. }
  35. #nav {
  36. top:0;
  37. font-family: Verdana;
  39. }
  40. #nav li {
  41. display: inline;
  42. list-style: none;
  44. }
  45. #nav a {
  46. display:inline-block;
  47. color: white;
  49. }


 
l'HTML :

Code :
  1. <div id="menu">
  6.                 <ul id="nav">
  7.               <ul>
  8.   <li class="nav-item"><a href="index.html"><SPAN style=" left: 250px;width: 103px; height: 61px">
  9. <IMG SRC="file:///C:/Users/Ehones4/Desktop/Nouveau%20dossier%20%284%29/Images/home.png">
  10. </SPAN></a></li>
  11.                         <li class="nav-item"><a href="index.html">BLALBLA</a></li>
  12.   <li class="nav-item"><a href="Presentation.html">PRESENTATION</a></li>
  13.                         <li class="nav-item"><a href="Stages.html">STAGES</a></li>
  14.                         <li class="nav-item"><a href="Tarif.html">TARIFS</a></li>
  15.              <li class="nav-item"><a href="Planning.html">PLANNING</a></li>
  16.   <li class="nav-item"><a href="Contacts.html">CONTACTS</a></li>
  17.                     </ul>
  18.         </ul>
  22. </div>
  24. </body>
  25. </html>


Message édité par ehones le 30-12-2015 à 17:06:50
Reply

Marsh Posté le 30-12-2015 à 16:36:56   

Reply

Marsh Posté le 30-12-2015 à 19:50:27    

désolé d'up aussi vite, mais ca m'ennuie vraiment cet histoire :3

Reply

Marsh Posté le 30-12-2015 à 20:02:45    

:hello:  
 
A vue d'oeil tu appelles ton offset alors que la page n'est pas encore chargée :
1 - tu places ton code dans une fonction " $(document).ready(function() {}); "
2 - bienvenue dans le monde de la programmation où tu dois systématiquement vérifier que tes variables existent avant de les utiliser " var menu = $('#menu').offset().top;
    if (menu.length) {  //ton code } "
3 - <script language="JavaScript" type="text/javascript" src="file://C:/Users/Ehones4/Desktop/jQuery v2.1.4.js"></script>
Est une horreur car "language" n'est plus utilisé depuis un bail, de plus le type est tout le temps du JS donc t'es pas obligé de le mettre (HTML5)
 
EDIT 4 - Tu as un fichier CSS mais pourtant tu utilises une balise "style" je me demande bien pourquoi?

Code :
  1. $(document).ready(function() {
  2.     var menu = $('#menu').offset().top;
  3.     if (menu.length) {
  4.         $(window).scroll(
  5.             function() {
  6.                 if ($(window).scrollTop() > 100) {
  7.                     // fixed   
  8.                     $('menu').addClass("floatable" );
  9.                 } else {
  10.                     // relative
  11.                     $('menu').removeClass("floatable" );
  12.                 }
  13.             }
  14.         );
  15.     }
  16. });

Message cité 1 fois
Message édité par caps lock le 30-12-2015 à 20:04:59
Reply

Marsh Posté le 30-12-2015 à 20:18:52    

Merci !
J ai enlever le style inutile et j'ai corrigé le script.
La console ne m'indique plus d erreur, mais le script ne fonctionne toujours pas :/

Reply

Marsh Posté le 31-12-2015 à 04:04:30    

Oui, je t'ai juste aidé à comprendre ton erreur. Maintenant tu rajoutes une classe à ta balise "menu" mais elle n'existe même pas dans ton CSS  :sweat:  
Il ne suffit pas de copier/coller du code si tu me comprends pas ce que tu fais
regarde par ici : http://manos.malihu.gr/jquery-floating-menu/

Message cité 1 fois
Reply

Marsh Posté le 31-12-2015 à 08:17:10    

caps lock a écrit :

:hello:  
 
A vue d'oeil tu appelles ton offset alors que la page n'est pas encore chargée :
1 - tu places ton code dans une fonction " $(document).ready(function() {}); "
2 - bienvenue dans le monde de la programmation où tu dois systématiquement vérifier que tes variables existent avant de les utiliser " var menu = $('#menu').offset().top;
    if (menu.length) {  //ton code } "
3 - <script language="JavaScript" type="text/javascript" src="file://C:/Users/Ehones4/Desktop/jQuery v2.1.4.js"></script>
Est une horreur car "language" n'est plus utilisé depuis un bail, de plus le type est tout le temps du JS donc t'es pas obligé de le mettre (HTML5)
 
EDIT 4 - Tu as un fichier CSS mais pourtant tu utilises une balise "style" je me demande bien pourquoi?

Code :
  1. $(document).ready(function() {
  2.     var menu = $('#menu').offset().top;
  3.     if (menu.length) {
  4.         $(window).scroll(
  5.             function() {
  6.                 if ($(window).scrollTop() > 100) {
  7.                     // fixed   
  8.                     $('menu').addClass("floatable" );
  9.                 } else {
  10.                     // relative
  11.                     $('menu').removeClass("floatable" );
  12.                 }
  13.             }
  14.         );
  15.     }
  16. });



1- Pas besoin dans son cas de le mettre dans un document.ready si son code est à la fin de la page
2- C'est une erreur courante de vouloir tester le .length d'un objet jquery, étant donné que jquery s'en fout et que tu aies 0 ou N élément dans la collection jquery il n'y a pas besoin de faire un if($jQueryObject.length).

Reply

Marsh Posté le 31-12-2015 à 12:18:27    

caps lock a écrit :

Oui, je t'ai juste aidé à comprendre ton erreur. Maintenant tu rajoutes une classe à ta balise "menu" mais elle n'existe même pas dans ton CSS  :sweat:
Il ne suffit pas de copier/coller du code si tu me comprends pas ce que tu fais
regarde par ici : http://manos.malihu.gr/jquery-floating-menu/

 

Dans le CSS, je dois creer #menu.fixed c'est bien ca?


Message édité par ehones le 31-12-2015 à 12:22:28
Reply

Marsh Posté le 01-01-2016 à 00:27:35    

gatsu35>
1 - on ne sait pas comment il a bidouillé sa mise en page de code
2 - oui très bonne remarque!
 
ehones>
Oui tout à fait !  
Le HTML est le fond, le CSS la forme, puis le JavaScript te permet d'interagir avec le document.
Ici quand tu scroll sur ta page, tu rajoutes ou tu enlèves une classe à ton menu, il faut donc qu'elle existe dans ton css

Reply

Marsh Posté le 01-01-2016 à 23:52:39    

Salut, et bonne année !

 

J ai réussi a faire fonctionner le script, mais il y a un détail qui me chiffonne encore :/
En fait, lorsque j atteints le point ou le menu devient fixed, la page scroll brutalement vers le bas, d'une cinquentaine de pixel.
Je trouve pas ca très esthétique, et je ne comprend pas pourquoi cela fait ca.
Si vous pouviez me donner une piste pour résoudre ce pb :pt1cable:

 

Le CSS

 
Code :
  1. #menu{
  2. position: relative;
  3. border-radius: 15px;
  5. height:60px;
  6. width: 1000;
  8. box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
  9. box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
  10. box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
  11.             -1px 2px 20px rgba(0, 0, 0, 0.6) inset;
  13. border-width:2px;
  14. border-style:solid;
  15. border-color:black;
  16. border-radius: 15px;
  18. font-family: Verdana;
  20. margin: 0 auto;
  21. top:100;
  22. z-index:1;
  23. opacity:1;
  24. background-color:black;
  26. }
  29. #menu.fixed{
  31. display:block
  32. border-width:2px;
  33. border-style:solid;
  34. opacity:1;
  35. margin: 0 auto;
  36. background-color:black;
  37. left : 50%;
  38. margin-left : -502px;
  39. top : 0px;
  40. width:1000px;
  41. height: 60px;
  42. position: fixed;
  43. z-index:1;
  45. }
 


Le JS

Code :
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  4. <script type="text/javascript">
  6.     $(document).ready(function($){
  8.         menu = $('#menu');
  10.     $(window).scroll(function(event){
  11.         windowScroll = $(window).scrollTop();
  13.         if( $(window).scrollTop() >= 100 ){
  14.             menu.addClass('fixed');
  15.         } else {
  16.             menu.removeClass('fixed');
  17.         }
  18.     });
  19. });
  22. </script>


Message édité par ehones le 01-01-2016 à 23:54:00
Reply

Marsh Posté le 02-01-2016 à 00:13:59    

La réponse est simple, comme tu supprime le menu du flux, alors le flux remonte d'autant de la hauteur de pixel. Pour corriger ton problème tu pourrais rajouter un padding-top ou rajouter un div vide qui ferait la hauteur du menu à la place.
 

Reply

Marsh Posté le 02-01-2016 à 00:13:59   

Reply

Marsh Posté le 02-01-2016 à 01:02:55    

Un padding top? C'est l'espacement interieur du haut d'un div?
J ai testé en le rajoutant dans menu.fixed, ca agrandit la div, mais ya toujours le flux qui remonte.
 
Pour la deuxieme méthode, je doit faire apparaitre le div uniquement lorsque je scroll non?

Message cité 1 fois
Reply

Marsh Posté le 02-01-2016 à 01:11:05    

ehones a écrit :

Un padding top? C'est l'espacement interieur du haut d'un div?
J ai testé en le rajoutant dans menu.fixed, ca agrandit la div, mais ya toujours le flux qui remonte.
 
Pour la deuxieme méthode, je doit faire apparaitre le div uniquement lorsque je scroll non?


J'ai dis un padding-top sur le parent de menu Car tu enleve le menu du flux, donc tu dois ajouter quelque chose sur le parent ou le body pour éviter cette rémontée.
 
Mais je pense qu'il y a plus simple.  
Au lieu d'ajouter une classe sur menu.fixed, ajoute une classe "menu-fixed" sur le body, ainsi tu pourras modifier ce que tu veux au niveau CSS :  
 
 

Code :
  1. #menu.fixed

devient  

Code :
  1. .menu-fixed #menu


et tu rajoutes ça dans ta css :  

Code :
  1. .menu-fixed body {
  2.    padding-top:60px; (la hauteur du menu quoi)
  3. }


 
nettoie un peu ta CSS, tu peux supprimer les 2 premières lignes de box-shadow, elles ne servent à rien, seule la dernière sera prise en compte.
et ton width doit avoir des unités, dont met 1000px au lieu de 1000.

Reply

Marsh Posté le 02-01-2016 à 01:28:16    

Ok merci beaucoup :)

 

Mais du coup, faut corriger le script ici?

Code :
  1. menu.addClass('fixed');
  2.         } else {
  3. menu.removeClass('fixed');

Message cité 1 fois
Message édité par ehones le 02-01-2016 à 01:28:42
Reply

Marsh Posté le 02-01-2016 à 01:30:37    

ehones a écrit :

Ok merci beaucoup :)
 
Mais du coup, faut corriger le script ici?

Code :
  1. menu.addClass('fixed');
  2.         } else {
  3. menu.removeClass('fixed');



remplace menu par $('#body')

Reply

Marsh Posté le 02-01-2016 à 01:38:11    


Je dois oublier quelque chose, ca fonctionne pas   :heink:

 
Code :
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  4. <script type="text/javascript">
  6.     $(document).ready(function($){
  8.         body = $('#body');
  10.     $(window).scroll(function(event){
  11.          windowScroll = $(window).scrollTop();
  12.         if( $(window).scrollTop() >= 100 ){
  13.             body.addClass('menu-fixed');
  14.         } else {
  15.             body.removeClass('menu-fixed');
  16. }
  18.     });
  19. });
 
Code :
  1. body {
  2. background-image:url(file:///C:/Users/Ehones4/Desktop/Nouveau%20dossier%20%284%29/Images/fond.jpg);
  3. background-attachment:fixed;
  4. }
  6. .menu-fixed body {
  7. padding-top:60px;
  8. }
  11. #menu{
  12. position: relative;
  13. border-radius: 15px;
  14. height:60px;
  15. width: 1000px;
  16. box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),-1px 2px 20px rgba(0, 0, 0, 0.6) inset;
  17. border-width:2px;
  18. border-style:solid;
  19. border-color:black;
  20. border-radius: 15px;
  21. font-family: Verdana;
  22. margin: 0 auto;
  23. top:100px;
  24. z-index:1;
  25. opacity:1;
  26. background-color:black;
  27. }
  30. .menu-fixed #menu{
  31. display:block
  32. border-width:2px;
  33. border-style:solid;
  34. opacity:1;
  35. margin: 0 auto;
  36. background-color:black;
  37. left : 50%;
  38. margin-left : -502px;
  39. padding-top:10px;
  40. top : 30px;
  41. width:1000px;
  42. height: 60px;
  43. position: fixed;
  44. z-index:1;
  45. }


Message édité par ehones le 02-01-2016 à 01:39:06
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed