[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Hello !
Encore moi !!
Je me suis décidé a enlever la toolbar et a mettre les notifications dans la barre de navigation en suivant le tuto
https://tambouille-raleuses.forumactif.com/t335-afficher-les-notifications-dans-la-barre-de-navigation-retirer-la-toolbar

Seulement j'ai encore du loupé un truc car le nombre de notif'  ne s'afffiche pas , ça ne me met que le lien ... Surement un probleme au niveau du javascript ?

Alors
lien du forum : https://forumfeminin.forumactif.org/

CSS :

Code:

.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
  background-color: #EFD485;
    color:Black;
  font: Amatic SC;
  font-size: 20px;
}

.headerbar{background-image : url("https://i.servimg.com/u/f57/11/72/51/74/e2809410.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100%; /* Resize the background image to cover the entire container */
  background-position-y: 30%;
background-color:transparent;
height : 430px;
}


/**fixe le header**/
#headerbar-top.is-sticky {
    background: transparent;
    position: relative;
    box-shadow: none;  
}

.headerbar-top > .wrap:first-child{
    padding-top: 27px;
}

.is-sticky #logo {
    display: block;
    height: auto;
    width: auto;
    opacity: 1;
    transform: inherit;
}

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

.newNotif{
 color:red !important;
 font-size:18px !important;
}

/**/



/**Fixe la barre de nav'**/

    ul.navbar.navlinks {
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        background-color: #EDD293;
        font-variant: small-caps;
        visibility: visible;
  
    }

ul.navbar.navlinks li {
    margin-top: 0;
  margin-left:10px;

}

.navbar  {
    color: #2A120A;
    font-size: 12px;
  font-family:Roboto; sans serif;
  
}

.navbar a {  
    color: #2A120A;
    display: inline-block;
    font-size: 14px;
    line-height: 1.3846;
    padding: 6px;
}



#tabs::after, .navbar::after, dl.polls::after, fieldset dl::after, ul.linklist::after, ul.topiclist dl::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: visible;
}

#logo{
  margin-top:0px;
}

/*lien Chat dans la toolbarre*/
#fa_chat_button{
  color :black;
  font-family: Roboto, sans-serif;}


#fa_right{width:40%}

/** Liste des sujets**/
.forumbg .header{
  background-image: url("https://i.servimg.com/u/f44/19/68/75/46/choco11.png")
  background-color:#FFEFDB;
  background-size:100% 57px;
  background-repeat:no-repeat;}

li.row {
    border-color: ;
    border-style: none;
  border-width: 0px 0 0;}


/**/

.content h2, .panel h2 {
    border-color: #e3e2e2;
    color: #e3e2e2;
}

.statistics {
  background-color: #EDD293;
}

#page-footer {
  background-color: #694516;
}

#page-footer .copyright-body {
  border-color: #255227;
}

.module .h3{background:#EDD293; }

/*************CATEGORIES***************/
*{
  box-sizing:border-box;
}
.titre_cate{
  margin:15px auto 0px;
  text-align:center;
  border:none;
  border-radius :5px 5px 0px 0px;
  background:#EDD293;  
}

.titre_cate h2{
  font-size:30px;
  font-variant:small-caps;
  padding:10px;margin:0;
  font: Amatic SC;
  color:#694516;
}
.forums{
  display:flex;
  box-sizing: border-box;
  padding:8px;
  margin: 0px;
  border: none;
  min-height: 100px;
  vertical-align: middle;
  background:#F0E9D7;

}
.image {
  width:10%;
  border-right: none;
}
.corps {
  width: 60%;
  border-right: 4px double #6B390D;
  padding:0 10px;
}
.corps .forumlink{
  text-align:center;
  width:100%;
  font-variant:small-caps;
  font-size:16px;
  padding: 0;
  margin: 0;
}
.description{
  height: 95px;
  box-sizing: border-box;
  padding:5px;
  background:#F7F2E0;
  overflow:auto;
padding:10px 10px 10px 10px;
  -moz-box-shadow: 4px 4px 10px #888;  
  -webkit-box-shadow: 4px 4px 10px #888;  
  box-shadow:4px 4px 6px #888;
color:#3E464C;
font-size: 1.3rem;
font-family: Roboto, sans-serif;}



.sous_forums {
    border-right: 4px double #6B390D;
    font-variant: small-caps;
    text-align: left;
    width: 20%;

}

.sous_forums > span {
    display: block;
    font-size: 11px;
}

.sous_forums a{
  display:inline-block;
  font-size:14px;
  vertical-align: middle;
}

.sous_forums span:before{
  content:' ※ ';
  font-size:11px;
}

.sous_forums > a + a::before {
    display: none;
}

.derniers_messages {
  width: 20%;
  text-align: center;
  padding-left:6px;
}

.lastpost-avatarindex {
  float: none;
  width: 100%;
  height: 40px;
  overflow: hidden;
  margin-top: 3px;
  border: 1px solid black;
  border-radius:5px;
  padding:0;
}

.lastpost-avatarindex img {
  width: 100%;
  margin-top: -40%;
  height:auto;
}




/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
    background: #ddd;
    border: 2px solid #666;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    width: 96%;
}
    
/* Titre "Mes badges" */
#listing-badges h3{
    border-bottom: 2px solid #666;
    color: #666;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 5px;
}

#listing-badges label,
#listing-badges input[type="checkbox"]{
  display: inline-block;
}

/* On cache les cases à cocher */
.liste-badges #listing-badges input{
  display: none;
}

/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

/**QEEL par Cheshire Cat**/
.qeel h1{
  margin-top:60px;
  margin-bottom:0px;
  background-color:#EDD293;
  border-radius:5px 5px 0px 0px;
  text-align:center;
  font-family: 'AMATIC SC', sans-serif;
  font-size:35px;
  color:#694516;
  text-transform:uppercase;
  letter-spacing:5px;
}
.qeel h2{
  text-align:center;
  font-family: 'AMATIC SC', cursive;
  font-size:20px;
  color:#694516;
}
.qeel .bloc{
  font-size:12px;
  color:black;
  font-family:Arial;
  display:block;
  overflow:auto;
  width:210px;
  height:250px;
  margin:auto;
  text-align:justify;
  border-left:2px solid #634344;
  border-right:2px solid #634344;
  background-color:#F0E9D7;
  padding-left:8px;
  padding-right:8px;
}
.qeel .membresco24{
  margin-left:-5px;
  color:#7B4725;
  font-size:12px;
  font-family:Arial
}
.qeel .legend{
  top:5px;
  margin-bottom:20px;
  margin-left:13px;
  margin-right:13px;
  padding-top:10px;
  padding-left:8px;
  padding-right:8px;
  border-top:2px solid #634344;
  background-color:#F0E9D7;
  text-align:center;
}
.qeel .creditqeel{
  font-size:11px;
  text-align:right;
  background-color:#F0E9D7;
  width:100%;
}

.qeel .forumline{
background-color:#F0E9D7;}

.qeel .forumline :hover{
background-color:#F0E9D7;}



.qeel table.forumline tr:hover td {
    background-color: #F0E9D7;
}

/**Modules**/

.mod-top-row .mod-top-pct{
    background: #FEB294;
}

/** Badges**/
    /*** [TUTO] Badges sur fiche perso ***/
    /* Le cadre qui contient les badges */
    #listing-badges{
        background: #F0E9D6;
        border: 1px solid #666;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 10px auto;
        padding: 10px;
        text-align: center;
        width: 96%;
    }
      
    /* Titre "Mes badges" */
    #listing-badges h3{
        border-bottom: 2px solid #666;
        color: #666;
        font-size: 18px;
        font-weight: bold;
        line-height: 25px;
        margin-bottom: 5px;
        background-color:#EFD485;
        font-family:amatic SC;
        font-size:25px;
    }

    #listing-badges label,
    #listing-badges input[type="checkbox"]{
      display: inline-block;
    }

    /* On cache les cases à cocher */
    .liste-badges #listing-badges input,
    .postbody #listing-badges input{
      display: none;
    }

    /* Image en noir & blanc */
    .liste-badges #listing-badges input + label,
    .postbody #listing-badges input + label{
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
    }

    /* Image en couleur qui la case est cochée */
    .liste-badges #listing-badges input[checked="checked"] + label,
    .postbody #listing-badges input[checked="checked"] + label{
      filter: grayscale(0);
      -webkit-filter: grayscale(0);
    }


.mod-recent-info{  border-bottom: 1px solid;}


ul.linklist li.ssrep{
  font-size:15px;
border: 1px solid;
  background-color:#EDD293;
  border-radius:7px;
position: relative;
left:280px;
padding:10px}

Javascript ( je n'ai rien modifié puisque comme sur le tuto je suis en version modernBB et pas d'image ) je l'ai fait s'afficher sur toutes les pages ...

Code:

/*Au chargement de la page*/
$(function(){
  // on indique la version du forum : attention de bien respecter les écritures ci-dessous
  // invision, phpbb2, phpbb3, punbb, modernbb
  var versionForum = 'modernbb';
  var nouvelleImage = '';
 
 var  lastNbNotif, //on crée la variable qui récupérera le nombre de notifications actuelles
    cheminNav; // On crée la variable pour les différents chemins selon la version

 // En fonction de la version du forum, on récupére les bons élements à cibler pour la barre de navigation
    switch(versionForum){
        // Si on est sur invision
        case 'invision':
        cheminNav = '#ipbwrapper #submenu ';
          break;

        // Si on est sur phpbb2
        case 'phpbb2':
        cheminNav = '.bodyline > table td[align="center"] ' ;
          break;

      // Si on est sur phpbb3
        case 'phpbb3':
          cheminNav = '.navbar .navlinks ';
          break;

        // Si on est sur punbb
        case 'punbb':
        cheminNav = '#pun-head #pun-navlinks ';
          break;

        // Si on est sur modernbb
        default:
          cheminNav = '.headerbar .navbar.navlinks ';
          break;
    }
 
  // On récupère le chemin de la barre de navigation et plus particulièrement le "bouton" notification
  //On récupère le texte "normal" du bouton de Notification
var cheminNavbar=cheminNav +'a[href="/profile?mode=editprofile&page_profil=notifications"]';
var textNavBar = $(cheminNavbar).text();

  // On récupère le nombre de notification dans la toolbar
  // S'il y a une notification ET que le nombre de notification de la toolbar est différent de celui enregistré dans la variable
    // on ajoute une class au lien de la barre de navigation concerné
    // On modifie l'image
    // On ajoute le nombre de notification dans la barre de navigation
    // On enregistre le nombre de notification dans la variable
function majNotification() {
  var nbNotif=$('#fa_notifications').find('#notif_unread').text();
 if(nbNotif != "" && nbNotif!=lastNbNotif){
          $(cheminNavbar).addClass("newNotif");
          $(cheminNav +'a[href="/profile?mode=editprofile&page_profil=notifications"] img').attr("src",nouvelleImage);
          $(cheminNavbar).text(textNavBar + ' ' + nbNotif);
 lastNbNotif=nbNotif;
        }
}
 
  // Au chargement de la page, on attend 1 seconde (1000 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);
 
});

 Qu'est ce que j'ai oublié ...?

Coucou

Tu as un compte que je peux utiliser pour voir le lien "en action" ?

Oui

Par contre attend, avant de chercher, je viens tout juste de tilter un truc : Quand on a les notif' sur la toolbar, quand on clique dessus ça n'ouvre pas une nouvelle page, ça s'ouvre sur la même page et il y a la liste des notifications, qui permet d'aller directement sur les sujets... la quand on clique sur Notifications, ça nous ouvre carrément la page des notifications ... il n'y a pas moyens avec du javascript ( ou une baguette magique ) de garder le même système que dans la toolbar mais en la mettant sur la barre de navigation ?
(Car pour le coup, si c'est impossible, cela me gène un peu et dans ce cas je préfère remettre la toolbar, auquel cas ça ne serai pas la peine de se creuser la tête ^^' )

En gros, tu aimerais avoir le lien "notification" dans ta barre de nav' mais garder le système des notifs de la toolbar ? (affichage d'un bloc "en plus" au clic dessus qui contiendrait les notifs)

Miettes a écrit:En gros, tu aimerais avoir le lien "notification" dans ta barre de nav' mais garder le système des notifs de la toolbar ? (affichage d'un bloc "en plus" au clic dessus qui contiendrait les notifs)

Exactement ( En bonne chi*use que je suis )

La bonne nouvelle, c'est que c'est possible

La mauvaise, c'est qu'il va y avoir un peu de CSS à revoir

On essaie ?

Super Comme toujours, trop forte Miettes !!

Pas de soucis pour la CSS, je suis prête !!

Alors c'est parti


On va zapper tout le js du tuto et on va le remplacer par celui-ci :

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 li qui contient le lien des notifs
      // Et on remplace le contenu par celui récupéré plus haut
      $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').parent('li').addClass('link-notifs').html(contentNotif);

      // 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);
    }
 
  }

  // 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');
    });

});

Il est commenté pour que tu puisses le comprendre


Idem, on remplace toute celle du tuto par celle-ci.

Code:

/*******************/
/*  Notifications  */
/*******************/

body{
 margin-top:0 !important;
}

.headerbar{
  overflow: inherit;
}

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

.navbar > li{
  position: relative;
}

.navbar #fa_notifications {
    color: #fff;
    cursor: pointer;
    line-height: 30px;
    padding: 0 5px
}

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

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

.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: 1.3rem;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 42px;
    width: 200px;
    z-index: 10000;
}

.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 .see_all a{
  background: #333;
  border: 1px solid #333;
  color: #fdfdfd;
}

.navbar #notif_list .see_all a:hover{
  background: #fdfdfd;
  color: #333;
}

Ici, je l'ai reprise pour avoir quelque chose de présentable, mais je te laisse faire tes propres modifications.

La CSS n'est pas commentée, donc si besoin, n'hésite pas

Coucou !
J'ai tout mis en place mais ça ne fonctionne pas , dois y avoir un truc qui coince quelques part ^^'

Il y a un espace dans ton lien "notification" on dirait. Du coup, le js ne le trouve pas

J'ai installé la même chose sur la Tambouille et ça fonctionne parfaitement.

Par contre, on ne peut pas supprimer les notifs. J'ai essayé de trouver une solution, impossible :/ Pour ça, il faudra passer par la page "voir toutes les notifs"

Ha oui ^^effectivement !!
ça fonctionne maintenant par contre il y a quand meme un truc surprenant ^^
Quand j'ouvre les notif' ça fonctionne et au bout de quelques instant, l'intérieur du cadre diparait :O



Pareil ici sur la Tambouille quand je cique sur Notifications, le 1er coup ça a bien marché mais depuis :

Oh effectivement

je ne sais pas pourquoi, mais il y a de l'opacité qui s'ajoute :/ heureusement, ça va se régler en CSS :p

Dans la CSS, on va donc remplacer ça

Code:

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

par ça

Code:

.navbar #notif_list li{
  margin: 4px 0;
  opacity: 1!important;
}

et ça devrait régler le problème

(253 notifs )

Super ça fonctionne

Et , une idée, mais si c'est compliqué je peux m'en passer No problem : Est ce qu'on pourrait faire que les notifications lues apparaissent en clair (avec l'opacité justement peut etre ?) , comme ça même si on ne peut pas les supprimer, on sait que ces messages ont étaient vus

(ouais, j'ai un peu de retards sur mes Notifs, c'est le problème d’être irrégulières xD )

Coucou

Alors,on peut sans souci faire ça et bonne nouvelle, ce n'est que de la CSS ^^

Voilà ce qu'on va faire :
- par défaut, on va baisser l'opacité de tous les points de la liste. Du coup, ici, on va mettre l'opacité à la moitié par exemple :

Code:

.navbar #notif_list li{
  margin: 4px 0;
  opacity: .5!important;
}

- Par contre, la liste "voir toutes les notifs", on le mets à 1

Code:

.navbar #notif_list li.see_all{
    opacity: 1!important;
}

- Et celles non lues, on les mets à 1 aussi :

Code:

.navbar #notif_list li.see_all,
.navbar #notif_list li.unread {
    opacity: 1!important;
}

Je te laisse tester ?

ça marche nickel ! c'est parfait !! Merci beaucoup !!

Hello

Ah génial !

Tout est bon du coup ?

Coucou ! J'allais te dire oui on peut archiver mais en fait j'ai une idée/question de plus ^^

Actuellement il y a 10 notifs qui apparaissent, y a t il un moyen d'en mettre plus ?

Et si oui, ajouter une scrollbar dans le cadre des notifs ( mais ça je pense que je trouverai, ce sera surement un truc dans la CSS du genre overflow: scroll ? ^^)

(et j'en profite même si c'est pas le sujet adéquate mais, sais tu s'il existe des tutos assez simple d’accès qui permettrait de comprendre les toute 1ere base du javascript ? Car malgré les annotations sur les scripts j'ai du mal à saisir comment sont fait les liens entre les templates FA et les codes javascripts ça peut etre une idée de tuto de plus sur la tambouille )

Hello

Actuellement il y a 10 notifs qui apparaissent, y a t il un moyen d'en mettre plus ?

ça je pense que c'est lié au script de base de FA :/ On ne pourrait pas changer ça sans tout réécrire :/

Pour le js, c'est dans ma liste de choses à faire J'ai déjà fait un premier tuto : [JavaScript] Les bases du jQuery. Il faut que je prenne le temps de continuer

Ha je n'avais pas vu ce tuto c'est déja pas mal, je vais aller voir ça de plus prés

Tant pis pour le nombre de notifs, c'est bien comme ça aussi

Encore Merci !!
Cette fois c'est bon, tu peux archiver

Topissime

J'archive du coup ^^