Le Deal du moment :
Carte graphique MSI Radeon RX 6700XT Gaming X 12 Go ...
Voir le deal
839.99 €

Aller en bas
dreams' paradise
dreams' paradise
Informations : vocivus (icon)
Messages : 8

[aide codage] notif dans la barre de navigation Empty [aide codage] notif dans la barre de navigation

Dim 18 Avr 2021 - 11:24
Bonjour I love you

Alors tout d'abord j'espère que je ne me suis pas trompé d'endroit pour poster ma question.

J'ai suivi le tuto de Mäven (ici) pour retirer la toolbar et avoir les notifications dans la barre de navigation. Mäven a déjà été d'une très grande aide pour la réalisation de ce tuto

Il me reste cependant un soucis, celui de faire apparaitre le menu déroulant et ne pas atterrir sur la page des notifications lorsqu'on clique sur le lien, en fouillant sur le forum je suis tombé sur ce sujet dans les archives que j'ai essayé de suivre, mais je n'ai toujours pas de menu déroulant scratch

J'ai deux code js différent et je suppose que le soucis vient de là scratch
Donc voici le code java pour afficher les notifs dans la barre de navigation qui fonctionne
Code:
/*Au chargement de la page*/
$(function(){
  var nouvelleImage = '';
 
 var  lastNbNotif=0, //on crée la variable qui récupérera le nombre de notifications actuelles
    cheminNav='.link_navbar '; // On crée la variable pour les différents chemins selon la version

  // 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();
console.log($(cheminNavbar).html(), textNavBar);

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

le second code java pour afficher le menu déroulant
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');
    });

});

et enfin toute la partie css correspondante
Code:
/*******************/
/*  Notifications  */
/*******************/

.newNotif {
 color:#AB9EBA !important;
 font-size:11px !important;
}

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: 999;
}

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

.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;
}

Merci d'avoir pris le temps de lire mon petit message, et pour l'aide que vous pourrez m'apporter love
En vous souhaitant une bonne fin de week-end I love you
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

[aide codage] notif dans la barre de navigation Empty Re: [aide codage] notif dans la barre de navigation

Lun 19 Avr 2021 - 22:01
Hello

Alors, non ce n'est pas la bonne section, nous ne faisons plus d'aide.
Quand ça concerne un tutoriel, tu peux poster à la suite de celui ci.
De plus, tu m'as déjà posé la question ici et ma réponse est toujours la même : je dois faire l'autre tutoriel. Mais les journées ne font que 24h, j'ai besoin de dormir 5 à 6h minimum, je travaille 7 à 8h par jour + les trajets et la pause déjà, on rajoute 2h. Déjà il me reste 8h. J'ai une petite fille à la maison qui a besoin de sa maman et dont je loupe déjà beaucoup de chose quand je suis au boulot + une maison à m'occuper, des repas à faire, et juste une vie à vivre. Donc, comme déjà dit (et c'est pour ça que je me permet d'être un peu plus sèche), le tutoriel arrivera quand il arrivera et si c'est dans 6 mois ça sera dans 6 mois.

A bientôt

_________________
Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses