2 résultats trouvés pour fa_notifications

positionnement barre de navigation + fusion avec les notifications

Probleme de notifications dans la barre de nav modernBB

Spoiler:

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

});

Spoiler:

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: .5!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;
}

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

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