What I've tried (css):
div:hover #h2 {
color: transparent;
}
I want to hide text in a div like this:
<div>
<h2>text</h2>
</div>
You should remove the #:
div:hover h2 {
color: transparent;
}
A # indicates an id instead of a tag name (so you were selecting id="h2").
this will hide H2 tag on DIV hover
div:hover h2{
display: none;
}
if you need fix height in your DIV you can use this one:
div:hover h2{
visibility: hidden;
}
UPDATE:
duo to questioner comment, if you want to use a specific id, do like this:
<div id="spdiv"><h2>message</h2></div>
and in css
#spdiv:hover h2{
display: none;
}
using # helps you to specify element id
Related
I have three different Links that all lead to the same page. But I need the page to load with different CSS settings (depending on which link was clicked, certain elements should be hidden on the new page).
Is that possible? Thank you!
Sure, you can use the :target pseudo-class to do so.
From MDN:
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
With target, you click a link, like page.html#some-condition, and in your CSS, listen for that condition. When the id matches the hash in the address bar, you have a match and the target is met.
A link
<div id="some-condition"></div>
#some-condition:target {
/* style appropriately */
}
Here's a quick demo. In this case, the links contain the ids, but as demonstrated above, you can structure things however you'd like.
#red:target ~ .result {
background-color: red;
}
#blue:target ~ .result {
background-color: blue;
}
#green:target ~ .result {
background-color: green;
}
.result {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid;
background-color: #fff;
transition: 0.3s background-color;
}
<a id="red" href="#red">Red</a>
<a id="blue" href="#blue">Blue</a>
<a id="green" href="#green">Green</a>
<div class="result"></div>
jsFiddle
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 e.g. 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?
Yes!
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;
}
Explanation:
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");
}
```
Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>
I have an h1 and h3 tag that will erase itself and type, using theater.js. The problem is that when it erases itself to empty, the height of the div it's in get smaller, then snaps bigger when it has content again.
I want to make the h1 and h3 tag (or change the tag completely) keep its height even while empty.
Any idea?
Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h2>ABCD</h2></div>
and then add this to your css:
.header2 {
min-width: 100px;
width: auto;
min-height:45px;
background-color:#333;
color:#FFF;
display:inline-block;
padding:10px;
}
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
two possible solutions:
1) you can set min-height to the div
For example:
div{min-height:50px;}
2) or to set min-height of h2 and p1 tags
h1,p1 {
min-height:5px;
}
Demo for 2nd approach :
h1{
background:yellow;
min-height:5px;
}
<h1></h1>
Note: as paulie_D mentioned, h1 ,p and div are block level elements by default
You may use a pseudo element to force an empty space within the element and swip it away with text-indent
h1.fixed:before {
content:' ';
display:inline-block;
width:1em;
}
h1 {
background:lightgray;
box-shadow:inset 0 0 0 1px;
}
h1.fixed {
text-indent:-0.8em; /* swip off the pseudo element */
}
<h1 contenteditable="true"></h1>
<h1 class="fixed" contenteditable="true"></h1>
else, use the :empty pseudo-class
h1:empty:before {
content:'|';
}
<h1 contenteditable="true"></h1>
I'm trying to do something, like when you Mouseover on text inside a span, the background changes.
My code:
<script>
function unhighlight(x) {
x.style.backgroundColor="transparent"
}
function highlight(x) {
x.style.backgroundColor="red"
}
</script>
<span onmouseover="highlight(this)" onmouseout="unhighlight(this)">
<h2>What's New</h2>
</span>
The reason I don't apply it to the h2 is a little complicated. Don't need to explain. Help?
Your javacript is fine.
The span element is the inline level generic container. It also helps
to inform the structure of document, but it is used to group or wrap
other inline elements and/or text, rather than block level elements.
So h2 is not valid child for span:
html standard
function unhighlight(x) {
x.style.backgroundColor = "transparent"
}
function highlight(x) {
x.style.backgroundColor = "red"
}
span {
display: block;
}
<span onmouseover="highlight(this);" onmouseout="unhighlight(this)"><h2>What's New</h2></span>
I suggest for containers to use block elements like div. And also i suggest to use css for this:
div:hover {
background: red;
}
<div>
<h2>What's New</h2>
</div>
Just set CSS to <span>
display: block;
You need to change your span element to an inline block for this to work :
span {
display: inline-block;
}
But note that you can achieve the same effect with CSS only :
span {
display: inline-block;
background-color: transparent;
}
span:hover {
background-color: red;
}
You don't need javascript to do it, just with HTML and CSS :
#myText {
display: inline-block;
background-color: transparent;
}
#myText:hover {
display: inline-block;
background-color: red;
}
<span id="myText"><h2>What's New</h2></span>