I have a difficulty with my code. I have a dropdopwn menu that displays notifications. When the notification shows the same date as the current day it displays <div class="label notification-badge">NOVO</div> . The notification icon has a badge that counts <div class="label notification-badge">NOVO</div> , however I wanted it to only count when they are visible, but it does count even the hidden divs. Is there any way I can make counting only the divs with the "new" labels visible by the date?
//Função para atualizar as mensagens
function refreshItens(){
setTimeout(function(){
//Exibe a Label "Novo" quando a data está no dia atual
$( ".data" ).each(function() {
if($(this).html() === output || $(this).html() === ontem){
$(this).nextAll(".label").css("visibility","visible");
}
});
//Conta quantas Label "Novo" estão visiveis
$( ".notification-list" ).each(function() {
if($(".notification-badge > div:visible").length === 0){
$(".badge").text($(".notification-list div").length)
}
});
}, 1000);
};
//Captura de data
d = new Date();
month = d.getMonth()+1;
day = d.getDate();
dayontem = d.getDate() - 1;
output = (day<10 ? '0' : '') + day + '/' + (month<10 ? '0' : '') + month + '/' + d.getFullYear();
ontem = (dayontem<10 ? '0' : '') + dayontem + '/' + (month<10 ? '0' : '') + month + '/' + d.getFullYear();
setTimeout(function(){
refreshItens();
console.log(output);
console.log(ontem);
}, 1000);.topbar{
width:100%;
height:50%;
background-color:#eee;
}
.dropbtn {
color: black;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
.badge{
z-index: 1;
margin-left:-7px;
border-radius: .5em;
font-size: 7pt;
padding:10px;
margin-top: 10px;
background-color:#c92121;
color:#fff;
}
.notification-badge{
float: right;
margin: 3px;
visibility: hidden;
background-color: #32E6C8;
color:#00285F;
}
.notification-list{
border-radius: 0px;
border-left: 0px;
border-right: 0px;
cursor: default;<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="topbar">
<div class="dropdown">
<div onclick="myFunction()" class="dropbtn"><i class="fa fa-envelope-square fa-3x"><span class="badge"></span></i></div>
<div id="myDropdown" class="dropdown-content">
<ul style="width:400px;">
<li id="painelMsg" style="min-height: 50px; max-height: 400px; overflow: auto;" class="list-group notifica">
<ul>
<!-- notificação 1 -->
<li class="list-group-item msg notification-list">
<span class="data" style="color: #199fae;">08/11/2016</span> -
<span class="titulo ">notificação 1</span>
<div class="label label-primary notification-badge" >NOVO</div>
</li>
<!-- notificação 2 -->
<li class="list-group-item msg notification-list">
<span class="data" style="color: #199fae;">07/11/2016</span> -
<span class="titulo">notificação 2</span>
<div class="label label-primary notification-badge" >NOVO</div>
</li>
<!-- notificação 3 -->
<li class="list-group-item msg notification-list">
<span class="data" style="color: #199fae;">20/09/2016</span> -
<span class="titulo">notificação 3</span>
<div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 4 -->
<li class="list-group-item msg notification-list">
<span class="data" style="color: #199fae;">20/09/2016</span> -
<span class="titulo">notificação 4 </span>
<div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 5 -->
<li class="list-group-item msg notification-list">
<span class="data" style="color: #199fae;">20/09/2016</span> -
<span class="titulo">notificação 5</span>
<div class="label notification-badge">NOVO</div>
</li>
<!-- notificação 6 -->
<li class="list-group-item msg notification-list">
<span class="data" style="color: #199fae;">20/09/2016</span> -
<span class="titulo">notificação 6</span>
<div class="label notification-badge">NOVO</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>