Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1719 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2272471
ehones
Posté le 30-12-2015 à 16:36:56  profilanswer
 

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
mood
Publicité
Posté le 30-12-2015 à 16:36:56  profilanswer
 

n°2272477
ehones
Posté le 30-12-2015 à 19:50:27  profilanswer
 

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

n°2272478
caps lock
Posté le 30-12-2015 à 20:02:45  profilanswer
 

: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
n°2272480
ehones
Posté le 30-12-2015 à 20:18:52  profilanswer
 

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 :/

n°2272501
caps lock
Posté le 31-12-2015 à 04:04:30  profilanswer
 

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
n°2272504
gatsu35
Blablaté par Harko
Posté le 31-12-2015 à 08:17:10  profilanswer
 

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).

n°2272521
ehones
Posté le 31-12-2015 à 12:18:27  profilanswer
 

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
n°2272555
caps lock
Posté le 01-01-2016 à 00:27:35  profilanswer
 

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

n°2272590
ehones
Posté le 01-01-2016 à 23:52:39  profilanswer
 

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
n°2272592
gatsu35
Blablaté par Harko
Posté le 02-01-2016 à 00:13:59  profilanswer
 

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.
 

mood
Publicité
Posté le 02-01-2016 à 00:13:59  profilanswer
 

n°2272594
ehones
Posté le 02-01-2016 à 01:02:55  profilanswer
 

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
n°2272595
gatsu35
Blablaté par Harko
Posté le 02-01-2016 à 01:11:05  profilanswer
 

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.

n°2272596
ehones
Posté le 02-01-2016 à 01:28:16  profilanswer
 

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
n°2272597
gatsu35
Blablaté par Harko
Posté le 02-01-2016 à 01:30:37  profilanswer
 

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')

n°2272598
ehones
Posté le 02-01-2016 à 01:38:11  profilanswer
 


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
undefined reference to (code block)undefined reference to _kill, _getpid and _sbrk
undefined reference to, Makefile[python]Problème TypeError: 'int'
Problème "undefined reference to setPixelV@16"JS : reference error x is undefined
namespace undefined reference[Perl] Can't call method "Open" on an undefined value
Problème formulaire ["undefined"] 
Plus de sujets relatifs à : Jquerry : TypeError: $(...).offset(...) is undefined

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.118 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR