I am seeing simlar questions about hiding parent divs if there is no child but can't find how to show a different div in the parent if no other child is in it.
I have a parent div that is updated with free meeting rooms:
.Parent{
width: 100%;
margin-top: 4px;
overflow: auto;
}
if there is a free room it is display on the board (in the parent). This is done in JS like so:
$('#Parent').addClass("showRooms");
If a room is not free by default it is hidden:
if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");
}
The css classes are as so:
.showRooms{
visibility: visible;
background-color: green;
}
.hideRooms{
visibility:hidden;
}
When all the rooms are hidden there is a blank board, I would like to show a different child div in the parent so I can show something more interesting eg the company logo.
(I am aware I could have the compnay logo on the parent even if there are rooms showing but I only want it to show if there are no rooms free)
What can I use to achieve this?
I've came up with a pure CSS solution, because combining selectors is awesome:
Consider the following setup:
.container { margin: 10px; border: 1px solid #000; } .room { width: 100px; height: 75px; background-color: #F00; } .hidden { display: none; } .placeholder { display: block; } .room:not(.hidden) ~ .placeholder { display: none; }
<div class="container"> <div class="room hidden"></div> <div class="room hidden"></div> <div class="room hidden"></div> <div class="room hidden"></div> <div class="placeholder">No rooms available!</div> </div> <div class="container"> <div class="room hidden"></div> <div class="room"></div> <div class="room"></div> <div class="room hidden"></div> <div class="placeholder">No rooms available!</div> </div>
Now the magic lies in the following lines:
.room:not(.hidden) ~ .placeholder {
display: none;
}
Take a placeholder, who is a sibling of a .room that does not contain the .hidden class. The placeholder is visible by default, but if it can find a sibling that has a .room without .hidden, it will fall back into display none.
Take note, this requires the placeholder div to always be the last child of it's parent. Since the ~
selector only checks for next siblings, not previous.
I would go something like :
if(allRoomStatusAreTaken()){
$('#Parent').addClass("showLogo");
} else {
$('#Parent').removeClass("showLogo");
}
And
.showLogo{
visibility: visible;
background-image: url(...);
}
In allRoomStatusAreTaken()
you have to check if all rooms are taken. I would use a function like every
from Lodash :
function allRoomStatusAreTaken() {
return every(allRooms, room => room.status === "Taken");
}
You could hide the logo by default, and change the display
using js if the rooms are hidden. Example:
$(function() { var roomStatus = "Taken"; if (roomStatus == "Taken") { $('#Parent').addClass("hideRooms"); $('.logo').addClass('show'); } })
.Parent { width: 100%; margin-top: 4px; overflow: auto; } .showRooms { visibility: visible; background-color: green; } .hideRooms { visibility: hidden; } .logo { display: none; width: 200px; height: 200px; background: red; } .logo.show { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Parent"> <div class="logo"> </div> </div>
Just Keep the Logo div with class 'companyLogo' inside parent and use the following CSS and will work.
.hideRooms .companyLogo{
visibility:visible;
}
.showRooms .companyLogo{
visibility:hidden;
}
For more specific answer please provide HTML structure.
When the parent is free you have to use append to add anything you want to the parent
if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");
$("#Parent").append("<span>somthing to show</span>");
}
You can have a logo wrapped in some div (or anything else, or you can add a class to the logo image, really anything), which will have a 'hidden' class by default which will hide it and then you can also show this whet you have no rooms, something like:
if(roomStatus == "Taken") {
$('#Parent').addClass("hideRooms");
$('.logo').addclass("visible");
$('.logo').removeClass("hidden");
} else {
$('#Parent').addClass("showRooms");
$('.logo').removeClass("visible");
$('.logo').addClass("hidden");
}
```
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.