[Aide Codage] Besoin d'aide avec ma barre de navigation

En fait tu es magicienne '-' Ca marche niquel ! **

Je crois que je vais vraiment apprendre à coder et pas juste me contenter de glaner des infos ici et là x)

Je m'occupe de l'aspect esthétique demain (2h de sommeil c'est définitivement pas assez), je te tiens au courant si j'ai encore des soucis mais là j'entre sur ma zone de confort, ça devrait aller ^^

Ah si, juste, je ne pense pas mais je pose la question au cas où, il y a un petit bout de code qui permet de ne montrer que les trois dernières notifications ? '^'

Coucou

Il reste une place dispo' dans nos formations de codage :p

Ah si, juste, je ne pense pas mais je pose la question au cas où, il y a un petit bout de code qui permet de ne montrer que les trois dernières notifications ? '^'

Hum... Je pense qu'on pourrait les cacher en ajoutant un petit quelque chose dans la CSS et dans le js si tu le souhaites Mais ça ne serait que les "cacher" visuellement. ça irait ?

Hihi, justement j'y pensais ^^ Faut que je vois si j'ai le temps de m'y consacrer, mais je me suis dit en voyant ça "pourquoi pas ?" ^^

Hm... Je ne sais pas, ça dépend .-. C'est possible de "cacher les notifications "en trop" en remontant les autres pour faire un plus petit bloc sur le rendu final ? ^^

Sinon je pense en avoir fini avec le rendu final (qui me satisfait assez au final), le seul soucis c'est que de temps en temps mes notifications apparaissent blanches - écriture blanche sur un fond blanc, pas ouf - alors que dans mon CSS j'indique bien que je les veux noires .-. J'ai pensé que ça pouvait venir du dernier morceau (qui ne concerne pourtant que l'effet de transition sur le bouton si j'ai bien compris) mais ça ne change rien ^^' En rechargeant la page, le problème disparait mais il revient occasionnellement ce qui peut être problématique

Coucou

C'est possible de "cacher les notifications "en trop" en remontant les autres pour faire un plus petit bloc sur le rendu final ? ^^

J'ai pas compris

Pour le souci de la couleur de l'écriture, tu peux me donner la CSS stp ? je vais regarder ça

Oui, je suis mal polie mon dieu, en plus je débarque après deux jours sans nouvelles Bijour, comment vas-tu ? ^^

Je t'avoue que je ne sais pas comment expliquer ce que je voulais dire .-. Globalement, si on cache les notifications en trop, ça rendrait comment sur le rendu final ? '^'

Pour le CSS :

Code:

body{
 margin-top:0 !important;
}

.headerbar{
  overflow: inherit;
}

.m-d-none{
  display: none !important;
}

.is-sticky#headerbar-top.w-toolbar {
    top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
  display:none;
}

.navbar > li{
  position: relative;
}

.navbar .link-notifs{
  position: relative;
}

.navbar #fa_notifications {
    color: white;
    cursor: pointer;
    font-size: 12px;
    line-height: 30px;
    padding: 0 5px
}

.navbar #fa_notifications.unread{
  color: red;
}

.navbar #fa_notifications:hover{
  color: white;
}

.navbar #notif_list{
  background-color: #fdfdfd;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
    color: #333;
    display: none;
    font-size: 12px;
    list-style-type: none;
    margin-right: 500px;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 42px;
    width: 180px;
    z-index: 999;
}

.navbar #notif_list li{
  margin: 4px 0;
}

.navbar .notification #notif_list {
    display: block;
}

.navbar #notif_list .content a{
  color: #000;
  font-weight: bold;
  padding: 0;
}

.navbar #notif_list .content,
.navbar #notif_list .see_all a {
    white-space: normal;
}

.navbar #notif_list .see_all a{
  background: #21646e;
  border: 1px solid #21646e;
  color: white;
  display: block;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  width: 160px;
}

.navbar #notif_list .see_all a:hover{
  background: #21646e;
  color: white;
  width: 160px;
}

Si on les cache, ça sera avec des display none. Du coup, ça serait vraiment comme si elle n'existait pas (mais on les verrait dans le code). Donc ça réduirait la hauteur de ton bloc.

Pour le souci de la couleur, je t'avoue que je ne sais pas trop quoi faire... Peut être en essayant d'ajouter un !important

Code:

.navbar #notif_list .content a{
  color: #000 !important;
  font-weight: bold;
  padding: 0;
}

Code:

.navbar #notif_list .see_all a{
  background: #21646e;
  border: 1px solid #21646e;
  color: white !important;
  display: block;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  width: 160px;
}

Je n'ai pas réussi à le reproduire sur ton forum

Je veux bien tenter le coup du coup ! Parce que c'est vrai que le seul truc qui me dérange c'est de voir un bloc aussi mastoc sur le coté de l'écran quand tu ouvres ^^

Je t'avoue que je ne sais pas trop si ça fait quelque chose ou pas puisque c'est pas tout le temps que le texte devient blanc :/ Je vais mettre les !important et au pire ben les gens actualiseront hein si ça ne marche pas

D'accord

Alors du coup, on y va ^^

Dans un premier temps, on va mettre en display none tous les li

Code:

.navbar #notif_list li{
  display: none !important;
  margin: 4px 0;
}

mais sur celui du bouton, on met un display block

Code:

.navbar #notif_list .see_all{
  display: block !important;
}

Ensuite, on va ajouter cette classe dans la CSS

Code:

.navbar #notif_list li.m-d-block{
  display: block !important;
}


et on va ajouter un test dans le js :

Code:

var cpt = 0 ;
    // On parcourt chaque lien
    $('.navbar .link-notifs #notif_list li').each( function(){
      // On ajoute la class m-d-block
      $(this).addClass('m-d-block');
      // On ajoute 1 au compteur
      cpt ++ ;
      // si le compteur = 3
      // cela veut dire qu'on a affiché 3 notifs
      if(cpt == 3){
        // On ne continue pas
        return false;
      }
    });

qui va afficher uniquement les 3 premières notifs

Voilà le js complet :

Code:

$(function(){

  function majNotification(){
    // On récupére le contenu des notifications de la toolbar
    var contentNotif = $('#fa_notifications')[0].outerHTML;
    contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;

    if(firstTime){
      // Si on arrive sur la page la première fois,
      // on ajoute une classe sur le lien qui contient le lien des notifs pour le cacher
      // Et on ajoute juste après celui-ci le contenu récupéré plus haut
      $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').addClass('m-d-none').after('<span class="link-notifs">'+ contentNotif +'</span>');

      // On indique qu'on a déjà vérifié la toolbar une fois
      firstTime = false;
    }else{
      // Si on a déjà vérifié la toolbar une fois
      // dans ce cas, on se contente de mettre les notifs à jour
      $('.navbar.navlinks').find('.link-notifs').html(contentNotif);
    }


    var cpt = 0 ;
    // On parcourt chaque lien
    $('.navbar .link-notifs #notif_list li').each( function(){
      // On ajoute la class m-d-block
      $(this).addClass('m-d-block');
      // On ajoute 1 au compteur
      cpt ++ ;
      // si le compteur = 3
      // cela veut dire qu'on a affiché 3 notifs
      if(cpt == 3){
        // On ne continue pas
        return false;
      }
    });
  }

  // Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
  var firstTime = true;

  // Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
  setTimeout(function(){
    majNotification();
  }, 1000);
  // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
  setInterval(function(){
    majNotification();
  }, 30000);

  $('body')
    // Au clic sur le lien des notifications dans la barre de navigation
    // On lui ajoute une classe pour déplier la liste des notifs
    .on('click', '.navbar .link-notifs #fa_notifications', function(evt){
      evt.preventDefault();
      $(this).parent().toggleClass('notification');
    });

});

Alours xD D'un côté c'est pas mal effectivement ça cache les notifications, d'un autre côté ben... Je n'ai plus rien xD

Jte montre .-.:

Tu peux me donner ton js ? J'ai l'impression que le test est mis au mauvais endroit

C'est possible, ma collègue qui gère le forum avec moi dit que je casse constamment le forum en mettant les codes n'importe comment..

Code:

$(function(){

  function majNotification(){
    // On récupére le contenu des notifications de la toolbar
    var contentNotif = $('#fa_notifications')[0].outerHTML;
    contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;

    if(firstTime){
      // Si on arrive sur la page la première fois,
      // on ajoute une classe sur le lien qui contient le lien des notifs pour le cacher
      // Et on ajoute juste après celui-ci le contenu récupéré plus haut
      $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').addClass('m-d-none').after('<span class="link-notifs">'+ contentNotif +'</span>');

      // On indique qu'on a déjà vérifié la toolbar une fois
      firstTime = false;
    }else{
      // Si on a déjà vérifié la toolbar une fois
      // dans ce cas, on se contente de mettre les notifs à jour
      $('.navbar.navlinks').find('.link-notifs').html(contentNotif);
    }
  }

  var cpt = 0 ;
    // On parcourt chaque lien
    $('.navbar .link-notifs #notif_list li').each( function(){
      // On ajoute la class m-d-block
      $(this).addClass('m-d-block');
      // On ajoute 1 au compteur
      cpt ++ ;
      // si le compteur = 3
      // cela veut dire qu'on a affiché 3 notifs
      if(cpt == 3){
        // On ne continue pas
        return false;
      }
    });
 
  // Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
  var firstTime = true;

  // Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
  setTimeout(function(){
    majNotification();
  }, 1000);
  // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
  setInterval(function(){
    majNotification();
  }, 30000);

  $('body')
    // Au clic sur le lien des notifications dans la barre de navigation
    // On lui ajoute une classe pour déplier la liste des notifs
    .on('click', '.navbar .link-notifs #fa_notifications', function(evt){
      evt.preventDefault();
      $(this).parent().toggleClass('notification');
    });

});

J'ai essayé de le mettre comme tu l'as indiqué mais à coup sûr j'ai fait une connerie :')

Coucou ^^

C'est bien ce qui me semblait : le test n'est pas au bon endroit. Voici le js corrigé :

Code:

$(function(){

  function majNotification(){
    // On récupére le contenu des notifications de la toolbar
    var contentNotif = $('#fa_notifications')[0].outerHTML;
    contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;

    if(firstTime){
      // Si on arrive sur la page la première fois,
      // on ajoute une classe sur le lien qui contient le lien des notifs pour le cacher
      // Et on ajoute juste après celui-ci le contenu récupéré plus haut
      $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').addClass('m-d-none').after('<span class="link-notifs">'+ contentNotif +'</span>');

      // On indique qu'on a déjà vérifié la toolbar une fois
      firstTime = false;
    }else{
      // Si on a déjà vérifié la toolbar une fois
      // dans ce cas, on se contente de mettre les notifs à jour
      $('.navbar.navlinks').find('.link-notifs').html(contentNotif);
    }

     var cpt = 0 ;
    // On parcourt chaque lien
    $('.navbar .link-notifs #notif_list li').each( function(){
      // On ajoute la class m-d-block
      $(this).addClass('m-d-block');
      // On ajoute 1 au compteur
      cpt ++ ;
      // si le compteur = 3
      // cela veut dire qu'on a affiché 3 notifs
      if(cpt == 3){
        // On ne continue pas
        return false;
      }
    });
  }

  // Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
  var firstTime = true;

  // Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
  setTimeout(function(){
    majNotification();
  }, 1000);
  // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
  setInterval(function(){
    majNotification();
  }, 30000);

  $('body')
    // Au clic sur le lien des notifications dans la barre de navigation
    // On lui ajoute une classe pour déplier la liste des notifs
    .on('click', '.navbar .link-notifs #fa_notifications', function(evt){
      evt.preventDefault();
      $(this).parent().toggleClass('notification');
    });

});

Tu testes avec celui-ci ?

Coucou !

Ca fonctionne nickel avec le bon code x) Juste, je n'ai plus le bouton d'accès pour voir toutes les notifs pour le coup :/

C'est bizarre :/ Je le vois bien moi :/ ça le fait dans un cas précis ?

Non, du tout, ça ne s'affiche juste pas en fait .-. J'ai mes trois notifications et le bloc s'arrête là :/ J'ai vérifié sur un de mes comptes membres - des fois que ça le fasse seulement sur mon compte admin - mais ça change rien '^' Pareil, changé de navigateur juste pour voir, ça n'apparait pas non plus :/

Dans la CSS, essaie de remplacer ça

Code:

.navbar #notif_list .see_all{
  display: block !important;
}

par ça

Code:

.navbar #notif_list li.see_all{
  display: block !important;
}

Ca ne change rien :/

Hum... ça aurait du marcher. Tu peux me montrer ta CSS stp ?

Mais sinon ce n'est pas grave, je peux laisser avec les 10 notifications, ça fonctionnait  

Code:

body{
 margin-top:0 !important;
}

.headerbar{
  overflow: inherit;
}

.m-d-none{
  display: none !important;
}

.is-sticky#headerbar-top.w-toolbar {
    top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
  display:none;
}

.navbar > li{
  position: relative;
}

.navbar .link-notifs{
  position: relative;
}

.navbar #fa_notifications {
    color: white;
    cursor: pointer;
    font-size: 12px;
    line-height: 30px;
    padding: 0 5px
}

.navbar #fa_notifications.unread{
  color: red;
}

.navbar #fa_notifications:hover{
  color: white;
}

.navbar #notif_list{
  background-color: #fdfdfd;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
    color: #333;
    display: none;
    font-size: 12px;
    list-style-type: none;
    margin-right: 500px;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 42px;
    width: 180px;
    z-index: 999;
}

.navbar #notif_list li{
  display: none !important;
  margin: 4px 0;
}

.navbar .notification #notif_list {
    display: block;
}


.navbar #notif_list .content a{
  color: #000;
  font-weight: bold;
  padding: 0;
}

.navbar #notif_list .content,
.navbar #notif_list .see_all a {
    white-space: normal;
}

.navbar #notif_list li.see_all a{
  background: #21646e;
  border: 1px solid #21646e;
  color: white;
  display: block !important;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  width: 160px;
}

.navbar #notif_list .see_all a:hover{
  background: #21646e;
  color: white;
  width: 160px;
}

.navbar #notif_list li.m-d-block{
  display: block !important;
}

Hop :

Code:

body{
 margin-top:0 !important;
}

.headerbar{
  overflow: inherit;
}

.m-d-none{
  display: none !important;
}

.is-sticky#headerbar-top.w-toolbar {
    top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
  display:none;
}

.navbar > li{
  position: relative;
}

.navbar .link-notifs{
  position: relative;
}

.navbar #fa_notifications {
    color: white;
    cursor: pointer;
    font-size: 12px;
    line-height: 30px;
    padding: 0 5px
}

.navbar #fa_notifications.unread{
  color: red;
}

.navbar #fa_notifications:hover{
  color: white;
}

.navbar #notif_list{
  background-color: #fdfdfd;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
    color: #333;
    display: none;
    font-size: 12px;
    list-style-type: none;
    margin-right: 500px;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 42px;
    width: 180px;
    z-index: 999;
}

.navbar #notif_list li{
  display: none !important;
  margin: 4px 0;
}

.navbar .notification #notif_list {
    display: block;
}


.navbar #notif_list .content a{
  color: #000;
  font-weight: bold;
  padding: 0;
}

.navbar #notif_list .content,
.navbar #notif_list .see_all a {
    white-space: normal;
}

.navbar #notif_list li.see_all a{
  background: #21646e;
  border: 1px solid #21646e;
  color: white;
  display: block !important;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  width: 160px;
}

.navbar #notif_list .see_all a:hover{
  background: #21646e;
  color: white;
  width: 160px;
}

.navbar #notif_list li.see_all,
.navbar #notif_list li.m-d-block{
  display: block !important;
}

Il n'y avait pas la ligne qui forçait l'affichage du li contenant le bouton. Cette fois, on devrait être bon

Effectivement, ça marche nickel maintenant !

Normalement c'est tout bon pour moi, merci beaucoup pour ton aide ! **

Ah super =)

Si ça n'avait pas marché ça m'aurait rendu folle

On peut classer ce sujet du coup ?

Pour ça que je te disais que si ça marchait pas j'aurai pu laisser les 10 notifs, que c'était pas bien grave x)

Yep, encore une fois merci beaucoup !

Oui mais j'aime pas les échecs :p Enfin, on a réussi à régler le problème, c'est le principal ^^

Alors zoup, je classe ^^ N'hésite pas à repasser par ici si besoin ^^