CoreTM
Reputation: 305
Hide the .message-notif class if there is a record else show if there is no record
Please see code below:
.menu-notif-f {
position: absolute;
top: 50px;
right: 12px;
background-color: #ffffff;
width: 320px;
height: 480px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 3px 22px 0px rgb(0 0 0 / 15%);
animation: ani_desk_menuuserf .16s ease;
}
.menu-notif-t._title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
color: #555555;
border-bottom: 1px solid #d5fff8;
}
.menu-notif-l._notif-title {
font-size: 16px;
font-weight: 600;
letter-spacing: .04px;
color: #555555;
}
.meni-notif-r._notif-see-all {
font-size: 14px;
font-weight: 500;
letter-spacing: .04px;
color: #01d2af;
}
._profile-c {
background: url(../media/icons/_overview/profile.png);
background-size: 66%;
}
.menu-notif-img {
width: 66px;
height: 66px;
/*height: 9vw;
max-width: 45px;
max-height: 45px;
min-width: 45px;
min-height: 45px;*/
background-color: #ffffff;
border-radius: 50px;
box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
background-repeat: no-repeat;
background-position: center;
padding: 5px;
}
.menu-notif-c._notif-c {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
margin: 5px 5px;
}
.menu-notif-cl {
flex: 0 0 30%;
}
.menu-notif-cr {
flex: 0 0 70%;
}
.menu-notif-dt {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
align-items: center;
}
.menu-notif-name {
font-size: 14px;
font-weight: 600;
color: #01d2af;
}
.menu-notif-time {
font-size: 13px;
font-weight: 600;
color: #657688;
}
.menu-notif-desc {
font-size: 13px;
color: #657688;
display: -webkit-box;
max-width: 100%;
/*height: 30px;*/
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-notif-cc::-webkit-scrollbar {
display: none;
}
.menu-notif-cc {
overflow: auto;
height: 420px;
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
top: 50px;
}
.hdr-noah-c a {
color: #ffffff;
text-decoration: none;
}<div class="menu-notif-f">
<div class="menu-notif-t _title">
<div class="menu-notif-l _notif-title">Notification</div>
<div class="meni-notif-r _notif-see-all">See All</div>
</div>
<div class="menu-notif-cc">
<div class="menu-notif-c _notif-c">
<div class="menu-notif-cl">
<div class="menu-notif-img _profile-c"></div>
</div>
<div class="menu-notif-cr">
<div class="menu-notif-dt">
<div class="menu-notif-name">Test Name</div>
<div class="menu-notif-time">03:53</div>
</div>
<div class="menu-notif-desc">
Login details need to be update
</div>
</div>
</div>
<div class="menu-notif-c _notif-c">
<div class="menu-notif-cl">
<div class="menu-notif-img _profile-c"></div>
</div>
<div class="menu-notif-cr">
<div class="menu-notif-dt">
<div class="menu-notif-name">Test Name</div>
<div class="menu-notif-time">03:53</div>
</div>
<div class="menu-notif-desc">
Login details need to be update
</div>
</div>
</div>
<!-- This will shown if there is no notification available. Hide if there is an exsiting notification. -->
<div class="message-notif">
<div class="currently-para">There's nothing to be shown as of now</div>
</div>
</div>
</div>Can anyone help me with this? My goal is if there's a record the .message-notif class will hide and if there is no record The .message-notif class will show. using jQuery? Currently, I don't have any jQuery code that is why the .message-notif is showing, But now there 2 records so meaning the .message-notif should be hidden by now. Please help me with how can I accomplish that transition. Thanks in advance
Upvotes: 0
Views: 45
Answers (3)
Viira
Reputation: 3911
If the <div class="menu-notif-c _notif-c"> wouldn't render if empty, I have a better solution for you.
Just use
.message-notif {display: none;}
.menu-notif-cc > .message-notif:nth-of-type(1) {
display: block;
}This will hide and display the notification based on the presence of notification messages.
Full code snippet here:
.menu-notif-f {
position: absolute;
top: 50px;
right: 12px;
background-color: #ffffff;
width: 320px;
height: 480px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 3px 22px 0px rgb(0 0 0 / 15%);
animation: ani_desk_menuuserf .16s ease;
}
.menu-notif-t._title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
color: #555555;
border-bottom: 1px solid #d5fff8;
}
.menu-notif-l._notif-title {
font-size: 16px;
font-weight: 600;
letter-spacing: .04px;
color: #555555;
}
.meni-notif-r._notif-see-all {
font-size: 14px;
font-weight: 500;
letter-spacing: .04px;
color: #01d2af;
}
._profile-c {
background: url(../media/icons/_overview/profile.png);
background-size: 66%;
}
.menu-notif-img {
width: 66px;
height: 66px;
/*height: 9vw;
max-width: 45px;
max-height: 45px;
min-width: 45px;
min-height: 45px;*/
background-color: #ffffff;
border-radius: 50px;
box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
background-repeat: no-repeat;
background-position: center;
padding: 5px;
}
.menu-notif-c._notif-c {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
margin: 5px 5px;
}
.menu-notif-cl {
flex: 0 0 30%;
}
.menu-notif-cr {
flex: 0 0 70%;
}
.menu-notif-dt {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
align-items: center;
}
.menu-notif-name {
font-size: 14px;
font-weight: 600;
color: #01d2af;
}
.menu-notif-time {
font-size: 13px;
font-weight: 600;
color: #657688;
}
.menu-notif-desc {
font-size: 13px;
color: #657688;
display: -webkit-box;
max-width: 100%;
/*height: 30px;*/
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-notif-cc::-webkit-scrollbar {
display: none;
}
.menu-notif-cc {
overflow: auto;
height: 420px;
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
top: 50px;
}
.hdr-noah-c a {
color: #ffffff;
text-decoration: none;
}
.message-notif {display: none;}
.menu-notif-cc > .message-notif:nth-of-type(1) {
display: block;
}<div class="menu-notif-f">
<div class="menu-notif-t _title">
<div class="menu-notif-l _notif-title">Notification</div>
<div class="meni-notif-r _notif-see-all">See All</div>
</div>
<div class="menu-notif-cc">
<div class="menu-notif-c _notif-c">
<div class="menu-notif-cl">
<div class="menu-notif-img _profile-c"></div>
</div>
<div class="menu-notif-cr">
<div class="menu-notif-dt">
<div class="menu-notif-name">Test Name</div>
<div class="menu-notif-time">03:53</div>
</div>
<div class="menu-notif-desc">
Login details need to be update
</div>
</div>
</div>
<div class="menu-notif-c _notif-c">
<div class="menu-notif-cl">
<div class="menu-notif-img _profile-c"></div>
</div>
<div class="menu-notif-cr">
<div class="menu-notif-dt">
<div class="menu-notif-name">Test Name</div>
<div class="menu-notif-time">03:53</div>
</div>
<div class="menu-notif-desc">
Login details need to be update
</div>
</div>
</div>
<!-- This will shown if there is no notification available. Hide if there is an exsiting notification. -->
<div class="message-notif">
<div class="currently-para">There's nothing to be shown as of now</div>
</div>
</div>
</div>Same code without the <div class="menu-notif-c _notif-c"> inside the parent <div class="menu-notif-cc">
.menu-notif-f {
position: absolute;
top: 50px;
right: 12px;
background-color: #ffffff;
width: 320px;
height: 480px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 3px 22px 0px rgb(0 0 0 / 15%);
animation: ani_desk_menuuserf .16s ease;
}
.menu-notif-t._title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
color: #555555;
border-bottom: 1px solid #d5fff8;
}
.menu-notif-l._notif-title {
font-size: 16px;
font-weight: 600;
letter-spacing: .04px;
color: #555555;
}
.meni-notif-r._notif-see-all {
font-size: 14px;
font-weight: 500;
letter-spacing: .04px;
color: #01d2af;
}
._profile-c {
background: url(../media/icons/_overview/profile.png);
background-size: 66%;
}
.menu-notif-img {
width: 66px;
height: 66px;
/*height: 9vw;
max-width: 45px;
max-height: 45px;
min-width: 45px;
min-height: 45px;*/
background-color: #ffffff;
border-radius: 50px;
box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
background-repeat: no-repeat;
background-position: center;
padding: 5px;
}
.menu-notif-c._notif-c {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
margin: 5px 5px;
}
.menu-notif-cl {
flex: 0 0 30%;
}
.menu-notif-cr {
flex: 0 0 70%;
}
.menu-notif-dt {
display: flex;
justify-content: space-between;
margin-bottom: 3px;
align-items: center;
}
.menu-notif-name {
font-size: 14px;
font-weight: 600;
color: #01d2af;
}
.menu-notif-time {
font-size: 13px;
font-weight: 600;
color: #657688;
}
.menu-notif-desc {
font-size: 13px;
color: #657688;
display: -webkit-box;
max-width: 100%;
/*height: 30px;*/
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-notif-cc::-webkit-scrollbar {
display: none;
}
.menu-notif-cc {
overflow: auto;
height: 420px;
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
top: 50px;
}
.hdr-noah-c a {
color: #ffffff;
text-decoration: none;
}
.message-notif {display: none;}
.menu-notif-cc > .message-notif:nth-of-type(1) {
display: block;
}<div class="menu-notif-f">
<div class="menu-notif-t _title">
<div class="menu-notif-l _notif-title">Notification</div>
<div class="meni-notif-r _notif-see-all">See All</div>
</div>
<div class="menu-notif-cc">
<!-- This will shown if there is no notification available. Hide if there is an exsiting notification. -->
<div class="message-notif">
<div class="currently-para">There's nothing to be shown as of now</div>
</div>
</div>
</div>Upvotes: 1
iamdlm
Reputation: 1973
Used a for loop because you have no #id on the no message div tag, but something like this should work:
var notifications = document.querySelectorAll(".menu-notif-c");
var noNotif = document.querySelectorAll(".message-notif");
if (notifications.length > 0) {
for (let i = 0; i < noNotif.length; i++) {
noNotif[i].style.display = "block";
}
} else {
for (let i = 0; i < noNotif.length; i++) {
noNotif[i].style.display = "none";
}
}
Upvotes: 1
Jordan Breton
Reputation: 1327
Usually, for empty-list or things, there is how I manage it without JS : I never remove the item nor hide it. I just say that, if it's the last item in the list, I'll show it.
Let's say that you have a notice list in a div with class .notice-list. Put your 'empty' message in the notice list. Then :
.notice-list > .no-notice-to-show{
display: none;
}
.notice-list > >.no-notice-to-show:last-child{
display: block;
}
When you have a notice, just append your ntoice in the list. The notice will become the last child in your list, causing your 'empty' message to desapear.
Indeed, it doesn't work if you need your empty message to be displayed elsewhere tha tin the empty list. But it's rarely the case.
Upvotes: 1
Related Questions
- When the last class is hidden, A message will be shown
- How to hide a div when it contains no value with jquery
- How to hide Bootstrap alert box when no message
- Hide a tag if mailto or tel doesn't exist
- Using Javascript to show and hide a message
- how to hide on item in a class if the following element is empty
- How to hide this message using jQuery?
- jQuery hide record title if record not found
- Show alert when I get null record using if/else statement
- jQuery Check for Hidden DIVs then display message