PHPfrance

la communauté d'entraide francophone dédiée au PHP

Problème navbar je soupçonne le js

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Problème navbar je soupçonne le js

Re: Problème navbar je soupçonne le js

par Shake021 » 18 juin 2019, 15:03

Note ; je parle avec différent personne sur qui certain la nav bar fonctionne sur mobile et d'autre ou comme moi elle ne fonctionne pas ?

Re: Problème navbar je soupçonne le js

par Saian » 18 juin 2019, 14:54

Ok vu, ton erreur c'est simplement quand l'ancre n'existe pas dans la page où la il faudrait que le lien soit ouvert.
Quand tu es sur la page actualité par exemple l'ancre #apropos n'est pas présente dans la page et donc $('#apropos') ne correspond à aucun élément.
C'est pour cela que $(hash).offset() n'est pas défini (TypeError: $(...).offset(...) is undefined).
// navigation
var OnePageNavigation = function() {
  $("body").on("click", ".main-menu li a", function (e) {
    e.preventDefault();

    var hash = this.hash;

    if ($(hash).length)
      $('html, body').animate({
        'scrollTop': $(hash).offset().top
      }, 600, 'easeInOutExpo', function () {
        window.location.hash = hash;
      });
    else
      window.location.href = $(this).attr('href');
  });
};
OnePageNavigation();
Le if ($(hash).length) va retourner 0 si l'encre n'existe pas et le code passera donc sur le else window.location.href = $(this).attr('href'); qui va ouvrir le lien.

Re: Problème navbar je soupçonne le js

par Shake021 » 18 juin 2019, 13:23

Salut , merci beaucoup de ta réponse détaillé . Je ne suis pas très doué en js j'ai essayé le code que tu m'as donné mais ça ne fonctionne pas , le problème ne pourrait t'il pas venir d'autre endroit du main.js l'erreur dans la partie développeur m'indiquer qu'il n'arrivait pas a trouver le .top de la ligne ou plus précisément Uncaught TypeError: Cannot read property ‘top’ of undefined

Merci de votre aide :)


voilà le liens du site ou il y a le problème "www.cocooningdog.fr" ci vous voulez inspecter en profondeur ^^

ou l'erreur en question :
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:302)
at HTMLBodyElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLBodyElement.y.handle (jquery-3.3.1.min.js:2)

Re: Problème navbar je soupçonne le js

par Saian » 18 juin 2019, 11:54

Salut, en regardant le code je suis étonné que ça fonctionne même pour les liens avec ancre.
Le sélecteur capture tous les liens suivant
.main-menu li a[href^='#']
.smoothscroll[href^='#']
.site-mobile-menu .site-nav-wrap li a

Le [href^='#'] veut dire les nœuds dont l'attribut href commence par #, normalement href="#ancre".
Or aucun des href de ton menu ne commencent par #, ils commencent tous par index, href="index[...]".

Donc à moins qu'ils soient tous capturés par le sélecteur .site-mobile-menu .site-nav-wrap li a... mais on ne voit pas ces class dans ton code.

En tout cas si tous les liens sont capturés ça bloquerait effectivement les liens sans ancre.

Théoriquement comme ça, ça devrait fonctionner (en tout cas sous firefox où la propriété hash est vide s'il n'y a pas de hash, à vérifier sur les autres navigateurs; tu peux t'amuser par exemple via la console de te ton navigateur sur ce sujet à tester ça $('.postbody-header a').get(1).hash et $('.postbody-header a').get(2).hash qui correspondent aux liens dans l'entête du sujet du nombre de messages et de l'icone de feuille à côté de la date) : 
var OnePageNavigation = function() {
  $("body").on("click", ".main-menu li a", function(e) {
    if (this.hash != '') {
      e.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        'scrollTop': $(hash).offset().top
      }, 600, 'easeInOutExpo', function () {
        window.location.hash = hash;
      });
    }
  });
};
mais uniquement pour les liens répondant au sélecteur .main-menu li a.
Tous les tags a du menu sont capturés par le sélecteur mais seuls ceux ayant une propriété hash différente de vide feront l'animation du scroll. Les autres ne faisant rien, le lien du a sera appelé.
C'est en fait le e.preventDefault(); qui empêche l'action par défaut du lien (l'ouverture du lien) de se faire.

La liste des sélecteurs jquery ici https://api.jquery.com/category/selectors/
Et le sélecteur en question Attribute Starts With Selector [name^=”value”] https://api.jquery.com/attribute-starts-with-selector/

Problème navbar je soupçonne le js

par Shake021 » 18 juin 2019, 03:14

Bonjour Bonsoir !

Alors voilà j'ai un problème par rapport à ma navbar qui viens d'une template ColorLib ( liens : https://colorlib.com/wp/template/doglife/)

Et je l'ai adapté pour un site mais , la navbar ne fonctionne qu'a moitié les liens sur la page fonctionne les encrages .. Mais quand je cherche a changer de page elle ne fonctionne plus donc ci quelqu'un aurait déjà eu le problème ou a un don inné :)

Voila ma navbar 
<header class="site-navbar js-sticky-header site-navbar-target" role="banner" >
      <div class="container">
        <div class="row align-items-center">

          <div class="col-6 col-xl-2">
            <h1 style=" font-size: 45px;color :#9c2c2c;font-family: Vivaldi; justify-content: none;" >CocooningDog<span class="text-primary">.</span></h1>
          </div>
          <div class="col-12 col-md-10 d-none d-xl-block">
            <nav class="site-navigation position-relative text-right" role="navigation">
              <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
                <li><a href="index.php?page=actualite">Actualités</a></li>
                <li><a href="index?page=acceuil#apropos" class="nav-link">A propos</a></li>
                <li><a href="index?page=acceuil#presentation" class="nav-link">Presentation </a></li>
                <li><a href="index?page=acceuil#avis" class="nav-link">Avis</a></li>
                <li><a href="index?page=acceuil#informations" class="nav-link">Informations</a></li>
                <li><a href="index?page=acceuil#contact-section" class="nav-link"> Contact</a></li>

                {% if session.login is defined %}
                <li class="has-children active">
                  <a> Mon compte</a>
                    <ul class="dropdown">
                        <li><a href="index.php?page=membre"class="nav-link">Espace Membre</a></li>
                        <li><a href="index.php?page=deconnexion" class="nav-link">Deconnexion</a></li>
                    </ul>
                </li>
                {% else %}
      <li><a href="index?page=connexion" class="nav-link">Connexion</a></li>
      {% endif %}
              </ul>
            </nav>
          </div>
          <div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top: 3px;"><a href="#" class="site-menu-toggle js-menu-toggle float-right"><span class="icon-menu h3"></span></a></div>
        </div>
      </div>
    </header>

Voila mes ressources 
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700, 900|Vollkorn:400i" rel="stylesheet">
    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
    <link rel="stylesheet" href="css/aos.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="img/fav.png" />
    <link rel="icon" type="image/gif" href="www.cocooningdog.fr"  src="images/fav.png" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <meta name="keywords" content="pet, sitting, sitter, dog , garderie, vacances, hotel, chien, camps, colonie, chenil , cocooning,  détente ">

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.countdown.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/jquery.sticky.js"></script>
  <script src="js/isotope.pkgd.min.js"></script>
  <script src="js/main.js"></script>

L'erreur viendrait de la mais je ne comprend qu'a moitié :/ 
var OnePageNavigation = function() {
    var navToggler = $('.site-menu-toggle');
   	$("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a", function(e) {
      e.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        'scrollTop': $(hash).offset().top
      }, 600, 'easeInOutExpo', function(){
        window.location.hash = hash;
      });

    });
  };
  OnePageNavigation();

  var siteScroll = function() {
Merci de votre aide :)