I'm having a little trouble with CSS and can't seem to find a solution. I have this HTML
<div id="closelink">
Close
Click to close
</div>
Now I want to hide the text «Click to close» only, without hiding neither the div, nor the link within it.
Can this be done?
The visibility attribute can be overriden on children elements, so you are able to do this:
#closelink {
visibility: collapse;
}
#closelink a {
visibility: visible;
}
<div id="closelink">
Close Click to close
</div>
.closelink {
font-size: 0px;
}
.close-link a {
font-size: 12px;
}
Try
#closelink {
position: relative;
left: -9999px;
}
#closelink a {
position: relative;
left: 9999px;
}
<div id="closelink">
Close Click to close
</div>
It works but you can use visibility:hidden instead of visibility:collapse
To avoid the child element breaking to a new line (as happens with just using visibility: hidden/collapse and visibility: visible), and to avoid drawing a 9999px block in the browser (generally frowned upon as it is unnecessary overhead), try this:
#closelink {
position: relative;
visibility: hidden;
}
#closelink a {
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
<div id="closelink">
Close Click to close
</div>
You can adjust your left: 0 value to provide some padding.
There are three methods I could think of:
One
#parent {
opacity: 1;
}
.child {
opacity: 0;
}
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
Two
.child {
visibility: hidden;
}
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
Three
.child {
display: none;
}
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
Opacity is best if you want the image to always be on the page to keep the structure but, you don't want it to be visible.
Hope this was helpful.
Related
First post, so hopefully it is clear enough.
I have been tasked to create a modal object that overlays a multi-column/-row grid layout on a page. The modal should appear on hover of a particular grid item. When the modal appears, the background of the grid area only should dim. I was asked not to use any additionally libraries (e.g., jQuery).
To complete this task, I added two modal objects, one for the actual modal window and the other for the dimmer object. I could not get the CSS hover to work for both objects on the hover of the item in question, so I used JavaScript to add the CSS changes.
The transition effect works for the transition in but not the transition out. I assume I am overthinking this task so appreciate any suggestions.
<style type="text/css">
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
margin: 0;
padding: 0;
}
.column {
background-color: hsl(0,80%,70%);
}
#modal_maker {
font-size: 5vw;
height: 100%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
#modal_maker, #modal {
z-index: 2;
}
#modal {
visibility: hidden;
background-color: hsl(200,50%,70%);
width: 80%;
height: 80%;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
opacity: 0;
transition: opacity 1s;
}
#background-dimmer {
visibility: hidden;
background-color: black;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
</style>
<body>
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column" id="modal_maker">Hover Here</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div id="modal"></div>
<div id="background-dimmer"></div>
</div>
<script type="text/javascript">
document.querySelector(".container").addEventListener("mouseover", function(el) {
if (el.target.id=="modal_maker" || el.target.id=="modal") {
document.getElementById("modal").style.cssText = "visibility:visible; opacity: 1;"
document.getElementById("background-dimmer").style.cssText = "visibility:visible; opacity: 0.75;"
} else {
document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="opacity: 0; visibility:hidden;")
}
})
</script>
</body>
Its all because of visibility:hidden
in js
...
} else {
document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="opacity: 0; visibility:hidden;")
}
...
in instant way you change opacity to 0 but also visibility:hidden so there is no time for transition, right away when code fires element is hiding.
You use cssText to change properties of element so visibility:visible won't be there when you move mouse on the other element, instead there will be visibility:hidden from the css(so you need to delete that also).
I know that it casues #modal to capture mouseover event then... thats the problem to figure out
I don't know if this solution is on purpose to hide modal when you mouseover other element only, what if I will leave mouse entirely from the table, the modal will stay... just wanted to mention maybe its not relevent.
I made fiddle based on your code: https://jsfiddle.net/svh6dpfk/1/
One idea to fix this #modal capturing event is adding proper visibility as a callback(there is transitionend event which will capture moment when animation is done, so something like this would help:
document.querySelector("#modal, #background-dimmer").addEventListener("transitionend", function(el) {
if(parseFloat(el.target.style.opacity) > 0){
el.target.style.cssText = "visibility:visible;opacity:1";
alert("animation end visible");
}else{
el.target.style.cssText = "visibility:hidden;opacity:0";
alert("animation end unvisible");
}
});
Update
it does work right now for me...
its a bit tricky, your css needs to have visibility:hidden for modal and background-dimmer(like your code has)
this seems to work for me:
document.querySelector(".container").addEventListener("mouseover", function(el) {
if (el.target.id=="modal_maker" || el.target.id=="modal") {
document.getElementById("modal").style.cssText = "visibility:visible;opacity: 1;"
document.getElementById("background-dimmer").style.cssText = "visibility:visible;opacity: 0.75;"
} else {
if(document.getElementById("modal").style.opacity == "1"){
document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="visibility:visible;opacity: 0; ")
}
/* alert("should be on leave") */;
}
})
this part .forEach(x => x.style.cssText="visibility:visible;opacity: 0; ") changes because your css has always visibility:hidden, so you need to perform transition always on visible.
full example:
https://jsfiddle.net/Loary65w/1/
you need to remember to have cross browser support you need to cover all those events
webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend
Hope it helps. Maybe there is better solution much simpler and I overcomplicated that one :F
I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.
Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}
When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.
I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});
I have 2 classes of divs to which I apply draggable with the stack option set.
How can I make one of those classes(class "A") float above the other one(class "B"), so that no matter if the object is moved in the B all the elements in A stay above all of the elements in B?
CSS:
div { opacity:0.5; position:absolute; font-size:2em; padding:20px; }
.above { background:green; }
.below { background:red; }
JS:
$("div").draggable({ stack:'div' });
HTML:
<div class="above" style="left:30px; top:0px">A1</div>
<div class="above" style="left:60px; top:0px">A2</div>
<div class="above" style="left:90px; top:0px">A3</div>
<div class="below" style="left:30px; top:30px">B1</div>
<div class="below" style="left:60px; top:30px">B2</div>
<div class="below" style="left:90px; top:30px">B3</div>
Fiddle:
http://jsfiddle.net/4Cje9/2/
Lets take an example:
HTML
<div id="container">
<div id="navi">a</div>
<div id="infoi"><img src="info_icon2.png" height="20" width="32"/>b</div>
</div>
CSS
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
Add these styles to two respective divs.it'll solve your problem.
I would suggest learning about position: relative and child elements with position: absolute.
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}
http://jsfiddle.net/awfex/4/
HTML:
<div class="section-header section-header-on" id="section_header_289" style="left: 50px;">
<span class="collapse"></span>
<div class="section-name">
<span class="name">Testing Facebox suff</span></div>
<ul class="tools">
<li>
<a class="trash" href="#"></a>
</li>
<li>
</li>
</ul>
<div class="clear"></div>
</div>
js:
$j = jQuery.noConflict();
$j(".section-header").hover(function(){
$j(this).find("ul").show();
});
So, I need this to be relative, because there are multiple "section-header"s and the ID is generally unknown / generated by the app. But, basically, I want to be able to hover over the section-header, and then have ul.tools change from display: none; to display: block. So I figured .show() could do that. but.. I guess my selector is wrong. =\
Your css specifies:
.section-header ul.tools,
.section-content li.content ul.tools {
visibility: hidden;
position: absolute;
top: 0;
left: -40px;
z-index: 1002;
cursor: default;
width: 40px;
height: 35px;
list-style: none;
}
Most notably visibility: hidden; which is not affected by the show()/hide() functions. So you need to change the css visibility property so your list will show-up.
Change:
$j(this).find("ul").show();
To:
$j(this).find("ul").css({visibility: 'visible'});
Or set the CSS to display: none; rather than use the visibility property.
show() documentation: http://api.jquery.com/show/
Demo
just needed a little coercion ;)
$j = jQuery.noConflict();
$j(".section-header").hover(function(){
$j(this).find(".tools").css({visibility:"visible"});
},function(){
$j(this).find(".tools").css({visibility:"hidden"});
});
Just needed a little css.
.tools {
display: none;
}
div.section-header:hover ul {
display: block;
}