I have a semi-transparent navigation bar that has a fixed position at the top of the window, and content underneath it.
I'd like to make it so that the #content isn't ever visible underneath the navigation bar. Setting the top margin of the content to the same height as the navigation bar works, when the user is at the top of the page. However when the user scrolls down, the content becomes visible underneath the navigation bar.
Basically I'm trying to push/clip the top of the content div, so none of its content is ever visible underneath the navigation bar.
The navigation bar's transparency is particularly important, so simply having an opaque gray background won't work for what I need.
Any suggestions for accomplishing what I'm trying to do?
Code:
http://jsfiddle.net/NAMka/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="content"></div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#content {
margin-top: 60px;
}
JS:
// This is a little cleaner than just manually repeating the p tags.
for (var i = 0; i <= 20; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
Some mock-ups of what I'm trying to do
This is what the fiddle will look like if you scroll down a little bit. Notice how the content is visible underneath the navigation bar.
Ideally, I'd like the content to be clipped, so it isn't visible underneath the navigation bar.
Update:
Although not ideal, I figured out a somewhat hackish way to achieve what I want involving some JS and the overflow:hidden CSS setting. It seems to work well enough for my purposes.
http://jsfiddle.net/NAMka/4/
HTML:
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="container">
<div id="veil">
<div id="content"></div>
</div>
</div>
CSS:
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
}
#container {
background: yellow;
margin-top: 60px;
z-index: -1;
position: relative;
}
#veil {
background: red;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
overflow: hidden;
}
#content {
background: blue;
position: absolute;
left: 0px;
bottom: 0px;
}
JS:
for (var i = 0; i <= 6; i++) {
$('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}
var height = $('#content').height();
$('#container').height(height);
$('#veil').height(height);
$(window).scroll(function() {
$('#veil').height($('#content').height() - $(window).scrollTop() );
});
You can add a white div that sits beneath the navbar but above the content.
http://jsfiddle.net/naLz7/
HTML
<nav id="top">
<div style="margin: 12px;">foo</div>
</nav>
<div id="bottom"></div>
<div id="content"></div>
CSS
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: white;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
#bottom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
z-index: 0;
}
#content {
margin-top: 60px;
}
Related
I am building a reactJS application in which the navbar is present only in middle column. But when I switch to mobile view, due to bootstrap by default the navbar comes below the first column. If I try to change the position to fixed-top it extends to all columns. I need it to stay in the middle in both lg and md views, but in small screens it should come above the first column. I have attached a screenshot.
This is the application in desktop view
This is in mobile view
How can I make this change in my website ??
You need to implement a combination of css, media breakpoints, and some pure JS. Here's a working example.
Switch the nav to position: fixed; at the mobile breakpoint, which I assume is 768.
Because fixed will remove it from the regular HTML element flow and place it overtop of other items, to account for that shift, add margin-top to the first container .element-one that is the same height as the nav + a few extra pixels to account for spacing.
var navBreakpoint = 768,
el1 = document.body.querySelector('.element-one');
navHeight();
window.addEventListener('resize', function(){
navHeight();
});
function navHeight(){
var mt = document.body.querySelector('nav').offsetHeight + 10,
docWidth = document.body.clientWidth;
if( docWidth < navBreakpoint ){
el1.style.marginTop = mt+'px';
} else {
el1.style.marginTop = 'unset';
}
}
.container {
display: flex;
position: relative;
}
.container > div {
padding: 1rem;
margin: 3px;
border: 1px solid #efefef;
}
.container nav {
position: relative;
border: 1px solid #efefef;
background: #efefef;
}
#media(max-width: 768px){
.container {
flex-direction: column;
}
.container nav {
position: fixed;
top: 0;
width: 100%;
height: auto;
left: 0;
padding: 0.5rem;
}
.element-one {
padding-top: 3rem;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="element-one">
Logo
</div>
<div class="element-two">
<nav>I AM THE NAV</nav>
Mi quis hendrerit dolor magna eget est lorem ipsum dolor. Tempor orci eu lobortis elementum nibh tellus molestie. Nulla facilisi morbi tempus iaculis urna.
</div>
<div class="element-three">
A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Eget mauris pharetra et ultrices neque ornare. Lorem mollis aliquam ut porttitor.
</div>
</div>
So I'm working on this site http://wiafe.github.io/Love-Nonprofits/index.html and near the bottom there are divs that hold messages. And I would like to add an hover effect that will display two buttons and a link over it. And everything I have tried has failed so checking to see if there is a way to do it. I took out the html portions I had and kept the css classes. Have been messing with it all day and it's breaking my brain right now.
HTML:
<div class="message">
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,<br><span class="signature">Leaslie S.</span>
</a>
<a class="message-content overlay">I<span class="heart"></span>working for a nonprofit because we care about more than our own cause. <br><span class="signature">Leaslie S.</span>
</a>
</div>
CSS:
.message-content:hover {
text-decoration: none;
}
.message-content p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: relative;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}
.message-content:hover small {
opacity: 0;
}
.message-content:hover .show-description p {
height: 100%;
}
.message-content .show-description small {
opacity: 1;
}
JS:
$('.message-content').hover(function() {
$(this).toggleClass('show-description');
});
Use this CSS:
.box > .appear {
opacity: 0;
transition: all 0.5s;
}
.box:hover > .appear {
opacity: 1;
}
Add class .appear to whatever you want to display on hover over .box.
JS Fiddle
I'm trying to do an image-based custom alert box using CSS and Javascript. I almost have it working the way I want it to. The issue that's been plaguing me is that box is sharing the overlay's transparency. Setting the box' opacity does nothing and removing the box code from its overlay "nest" makes the overlay cover the box even if the z-index is set up otherwise.
Here should be the relevant CSS Code:
#popUpDisplay {
display: none;
opacity: .8;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: lightgray;
z-index: 8;
}
#popUpTemplate {
display: none;
opacity: 1.0;
z-index: 10;
}
#popUpBackground {
display: block;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
width: 495px;
height: 450px;
padding-top: 1px;
background-image: url("../images/popUp_bg.png");
text-align: center;
z-index: 10;
}
#popUpBanner {
width: 455px;
height: 86px;
margin-left: auto;
margin-right: auto;
background-image: url("../images/popUp_banner.png");
text-align: center;
}
#bannerText {
/* May switch to image */
color: white;
margin-top: 10px;
padding-top: auto;
padding-bottom: auto;
}
#popUpContent {
width: 450px;
height: 347px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Here's the Javascript:
function DlgShow(Message){
// Change the message.
var Msg = document.getElementById("DlgContent");
Msg.innerHTML = Message;
// Display the dialog box.
var Dlg_bg = document.getElementById("popUpDisplay");
var Dlg = document.getElementById("popUpTemplate");
Dlg_bg.style.display = "inline";
Dlg.style.display = "inline";
}
function DlgHide(){
var Dlg_bg = document.getElementById("popUpDisplay");
var Dlg = document.getElementById("popUpTemplate");
Dlg.style.display = "none";
Dlg_bg.style.display = "none";
}
And here's the HTML
<div id="popUpDisplay">
<div id="popUpTemplate">
<div id="popUpBackground">
<div id="popUpBanner">
<h3 id="DlgContent">Test Text</h3>
</div>
<div id="popUpContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum risus metus, a vehicula nibh molestie ac. Duis sollicitudin libero eget nunc maximus auctor. Sed eu commodo arcu. Quisque finibus pellentesque pharetra. Vestibulum quam mi, malesuada vitae sem eget, eleifend mattis nisi. Nunc ac tristique nunc. Morbi blandit justo eleifend dui malesuada, quis varius diam tincidunt. Quisque gravida posuere urna eget ultricies. Nullam ut euismod lectus. Donec congue ex quis elementum dignissim.</p>
Close
</div>
</div>
</div>
</div>
<h1>HTML Test Page</h1>
<p>This Page is strictly for testing things on a page without effecting a pre-existing page.</p>
Open
It's not pretty, and I need to work on the message displayed, but I just want to get it so it displays correctly.
This is because your content div is a child of the transparent div. (And thus inherits the opacity from #popUpDisplay.) Which is why frameworks like Bootstrap place a modal-overlay before (not around) the content div of a modal.
I would just update your CSS to use rgba on the background of #popUpDisplay:
#popUpDisplay{
display: none;
/* opacity: .8; <-- remove this */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(211, 211, 211, .8); /* <-- change this*/
z-index: 8;
}
i want to blur the curved shape overlayed over slider that itself is a image which is a transparent png format, i want to make effect via css3 or jquery or any other.Help me out image here
this is my code
<div class="slider_overlay_menu">
<div class="overlay_menu">
<div class="banner_questions">
<select style="width: 60%;">
<option value="Career">Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</option>
<option value="Subject">Curabitur at erat ornare elit tristique porttitor eget at tellus ?</option>
<option value="Stream">Fusce laoreet, tortor quis mattis congue, enim lacus vulputate tellus ?</option>
<option value="Category">Ut imperdiet egestas purus non ultricies. Sed id aliquet magna ?</option>
</select>
<input type="submit" name="commit" value="Know How !">
</div>
</div>
</div>
css
.slider_overlay_menu
{
float: right;
position:relative;
}
.slider_overlay_menu:before
{
-webkit-fliter:blur(5px);
}
.banner_questions
{
float:right;
width:825px;
text-align:center;
position:relative;
display:block;
margin-top:50px;
}
.overlay_menu input[type="submit"]
{
margin-left:30px;
vertical-align:middle;
}
.overlay_menu
{
position: absolute;
background: url('../images/banner_bg.png')no-repeat;
height: 155px;
overflow: hidden;
width: 1007px;
right: 0;
z-index: 99998;
bottom: 10px;
padding:2%;
}
Actually, my slider is responsive, its width is 100%, and the overlay green shape is also position absolute which means when we increase the page size of the browser its changes it position.
Bottom line: I want to blur the content behind the green shape.
Just add -webkit-filter property for .overlay_menu like this:
.overlay_menu
{
position: absolute;
background: url('../images/banner_bg.png')no-repeat;
height: 155px;
overflow: hidden;
width: 1007px;
right: 0;
z-index: 99998;
bottom: 10px;
padding:2%;
-webkit-filter: blur(5px);
}
My requirement is to get a div overlapping another div at the bottom, as you can see in the first picture, and when you hover on the image I need it to get an effect like in the second image.
Here is my html code, but I don't know how to handle mouse events correctly.
<div id="container">
<div class="overlay">This is overlay div.</div>
<div class="content">This is contents div. This is contents div.</div>
</div>
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
But it doesn't work as I wanted. Could anyone give me some suggestions?
http://jsfiddle.net/mAzsL/
Here ya go man.
<div class="container">
<div class="lower">Blah Blah Blah</div>
<div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat elit vel tortor porta, sit amet venenatis purus condimentum. Suspendisse potenti. Aenean ultrices velit ac mattis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>
</div>
.container{
width:250px;
height:300px;
background:#00f;
position:relative;
}
.lower{
position:absolute;
bottom:0;
width:100%;
color:#fff;
padding:10px 0;
text-indent:5px;
background:rgba(0,0,0,.5);
}
.show{
display:none;
height:100%;
width:100%;
color:#000;
text-indent:5px;
background:rgba(255,255,255,.5);
}
.container:hover > .lower{
display:none;
}
.container:hover > .show{
display:block;
}
Here is a fiddle of the same thing, but with the content sliding up into place. I added this because SiKni8 asked why it did not slide up.
http://jsfiddle.net/mAzsL/15/
Essentially, I moved all content into one container, added transition on hover. Pretty simple changes.
something like
<div class="container">
<img src="http://placehold.it/150X200/fff000" />
<div class="inner">
somecontent goes here
<div class="overlay">sho on hover</div>
</div>
</div>
and
.container {
position: relative;
display: inline-block;
}
.container .inner {
position: absolute;
bottom: 0;
opacity: .85;
}
.container .inner .overlay {
display: none;
}
.container:hover .inner .overlay {
display: block;
}
Demo: Fiddle