I have a working sidebar menu that opens up when clicked. However, the background overlay doesn't work efficiently as the website has many elements. Here's the JS that does the work of adding background color to opacity of 0.4
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("mainbody").style.marginRight = "0";
jQuery("body").addClass("mySidenav_intro");
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
When clicked; the body of the pages change to
<body id="mainbody" class="mySidenav_intro" style="margin-right: 0px; background-color: rgba(0, 0, 0, 0.4);">
However, it changes only the background color of the website. I want to create an overlay of sort like a modal does when it opens. How should I achieve this?
Rather than change the background colour of the body, what you want is an element that will sit on top with some opacity, for instance using the approach here.
At its simplest, you could have a div with class overlay, use JS to trigger an enabled class on it, and use CSS:
.overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-color: rgba(0,0,0,0.9);
}
.overlay.enabled {
display: initial;
}
By default this will cover everything, to keep it from covering your sidebar just make sure it has a z-index higher than the overlay (i.e. 2).
Related
I have a sidebar and I have 2 functions.
One opens it and the other one closes it.
Here are the two functions.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
I want to create a condition between both so I can toggle them but for that I need to detect if it's opened or closed.
How can I detect it so I can create a toggle function calling the functions above?
You don't need two functions. You can do this with just one CSS class and one function that toggles that one class on the sidebar element.
To do this, add the default width of 0% on the sidebar and then create another class, lets call it .sidebarToggle, that changes the width to 100%.
In javascript, you just need one function, lets call it toggleSidebar() that just toggles the .sidebarToggle class. This way, you not only need less code but also don't need to worry about checking whether the sidebar is opened or closed.
A Better Solution
A better approach is to change the transform property of the sidebar instead of the width. Changing transform property, in this case, is better as compared to changing width, because if you change the width, you will have to handle the:
resizing of the child elements of the sidebar as the sidebar's width is increased or decreased.
remove the left or right padding (if there's any) on the sidebar when the width of the sidebar is 0px or 0%. If you don't remove the padding, sidebar will not completely hide on 0px or 0% width.
With transform, you don't need to worry about the above mentioned points because, instead of resizing, we just translate the sidebar from one point to another.
Animating transform property is also more efficient as compared to animating the width property because changing transform property doesn't causes the browser to go through Layout and Paint steps of its critical rendering path whereas changing the width property will cause the browser to again go through these steps.
Following code snippet shows an example:
const btn = document.querySelector('button');
const sidebar = document.querySelector('.sidebar');
btn.addEventListener('click', () => {
sidebar.classList.toggle('sidebarToggle');
});
body {
margin: 0;
}
.sidebar {
display: flex;
flex-direction: column;
background: #666;
color: #fff;
padding: 15px 25px;
box-sizing: border-box;
width: 30%;
height: 100vh;
transform: translateX(-100%);
position: absolute;
transition: transform 0.5s ease;
}
span {
margin: 5px 0;
}
.sidebarToggle {
transform: translateX(0);
}
button {
position: absolute;
right: 0;
background: green;
color: #fff;
padding: 15px 25px;
}
<div class="sidebar">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</div>
<button>Toggle Sidebar</button>
This is best done with classes. That way, stying is better separated from behaviour and there is even a toggle function built in:
document.getElementById("button").onclick = function() {
document.getElementById("myNav").classList.toggle("width100");
};
#myNav {
background-color: red;
display: block;
height: 100px;
width: 0%;
}
#myNav.width100 {
width: 100%;
}
<nav id="myNav"></nav>
<button id="button">Toggle</button>
I have been playing around with Zerodevx Transformicon where the Transformicons adds a class (tcon-transform) when the icon is transformed to the secondary version (in this case, the minus).
On clicking the "+" icon a open() function is called to open the overlay. On clicking the "-" icon, closeNav() function is called to close the overlay.
Once the overlay is opened, the "-" icon is disabled as it is behind the overlay.
See this code snippet for your reference as an example
function openNav() {
// if the element has the class tcon-transform (added/removed before calling this)
if (event.target.classList.contains("tcon-transform")) {
// the original icon was the plus: open the navigation
document.getElementById("myNav").style.left = "50%";
} else {
// the original icon was the minus: close the navigation
closeNav();
}
function closeNav() {
document.getElementById("myNav").style.left = "100%";
}
}
.overlay {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
left: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
overflow-x: hidden;
transition: 0.5s;
}
#transformicon {
float: right;
}
<head>
<!-- Import webcomponents-lite.js polyfill -->
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<!-- Import zero-transformicon build bundle -->
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
</head>
<body>
<div id="transformicon">
<zero-transformicon icon="plus-minus" onclick="openNav()">
</zero-transformicon>
</div>
<div id="myNav" class="overlay"></div>
</body>
I was thinking about how to get around this problem. One way is probably add another icon inside the overlay with the same functionality of the icon outside the overlay. When the "+" is clicked, The overlay is opened with the "-" icon inside the overlay which calls the closeNav() function, the icon outside the overlay should be hidden so that only one icon is visible.
Once the overlay is closed, the transformicon should display the "+" sign again. Would love some thoughts on the best way to achieve this. Thank you.
I currently have a white SVG logo that I am using as my website is mostly dark backgrounds. However, I do have a section that is white so I am looking to change the colour of the logo to black while scrolling through the white section.
Here is a copy of the logo code and white section:
<!-- Logo -->
<div class="logo" style="display: block;">
</div>
<!-- About -->
<div class="scrollview about">
<div class="col-sm-3">
</div>
</div>
Here is my current styles:
.logo {
position: fixed;
top: 0;
left: 0;
margin: 20px;
padding: 2.8em 2.8em;
z-index: 9;
}
.logo a {
width: 95px;
height: 16px;
display: block !important;
background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
background-image: none,url('../img/logo-light.svg');
}
.about {
padding: 12.25em 10.25em;
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: auto;
z-index: 3;
}
I'm not sure if it can be done using only CSS, but if someone can even point me towards a plugin or script it would be much appreciated.
Thanks
You can't use CSS like that to change the style of an SVG that's in a separate file. CSS rules do not cross document boundaries.
To style the SVG, you would need to need to inline it in your HTML page.
Assuming you made that change, then you could add a scroll event handler to the page and watch the position of the logo. If you detect it is at the right point on the page (ie. it is over the white section), then you could add a class to it (or the <a> or the <div>). The class would change the colour of the logo using fill: black, or whatever.
Have you considered an easier solution? Such as giving the logo a dark outline, so that it stands out when over the white background?
The fill property in CSS is for filling in the color of a SVGs.
svg {
fill: currentColor;
}
But you can't change the color of your logo for specific section of your site.
i check your demo link and I found out that they are use jquery to add and remove css class from there logo.
So you need add jquery 2.3.+
get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
Now on scroll add function
$(window).on('scroll',function()
and in it just add
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.logo').addClass('logo-dark');
} else {
$('.logo').removeClass('logo-dark');
}
Here's demo on codepen I made for you hope this will help you.
I am trying to add background color to the overall image slider located at http://192.241.239.235 so that it looks like
.
I have tried adding the style attribute
background-color: rgba(0,0,0,0.6);
overflow: auto;
to the
<div id='content'>
but the background color just does not show.
You already have an overlay on your slides that you can change here: .tp-banner ul li:after. And I see that you need to give it a higher ´z-index´ to make it appear above the video in the slideshow.
/* The fullscreen video */
.tp-caption.fullscreenvideo {
z-index: 0;
}
/* The covering black */
.tp-banner ul li:after {
background: rgba(0,0,0,.6);
z-index: 1;
}
/* All slideshow content */
.tp-caption {
z-index: 2;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am using an 'onclick' to view a picture and text. I now want to fade the background.
document.body.style.opacity = 0.1;
The page isn't fading or changing. So what am I doing wrong?
The full JS file is:
function changeImage()
thanks
opacity on body tag will change whole page style.
You probably want to change only background image or color.
1. color
You need rgb format for color 0,0,0, and just add alpha to make it rgba.
document.body.style.backgroundColor = "rgba(0,0,0,.1);"
2. image
You need pseudo element to change opacity without affecting body tag.
body {
position: relative;
}
body:after {
content: "";
background: url(image.jpg);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Here is fiddle
UPDATE
If you just need an overlay when your image is enlarged,
than you should use overlay element, like every lightbox plugin.
Style overlay
CSS
body {
position: relative;
}
#overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.7); //choose opacity
z-index: -1; // set z-index smaller than image and text
}
JS
if () {
//Create element and append it to body.
var page = document.body;
var overlay = document.createElement('div');
overlay.id = "overlay";
page.appendChild(overlay);
} else {
//Remove element
var overlay = document.getElementById("overlay");
overlay.parentNode.removeChild(overlay);
}
I'm guessing that what you really want is for the whole background to darken, you can do this by just adding a few simple lines to your css:
html {
background-color: black;
}
body {
background-color: white; /*<< or whatever it was previously,
but it has to have a color*/
}
And now it does work: http://jsfiddle.net/ru3pdqc7/1/
You may wish to add margin: 0; to your body, to prevent the black sides of the html from being shown, as demonstrated here.
Or, instead of css, 100% js:
document.getElementsByTagName("html")[0].style.backgroundColor = "black";
document.body.style.backgroundColor = "white";
document.body.style.margin = 0;
in a fiddle
Animations are added within fiddle, just to show you how you can fade it in and out. Really, it's all based on that simple idea.
NOTE: to avoid having your pop-out fade as well, you need to set its opacity to 1 at every stage of your animation.