A client has very specifically requested that their project page has a similar feel to this. Whereby, you click a '+' button to display project information, in what I would say is a full-screen overlay window.
I'm familiar with HTML / CSS & while I have dabbled with PHP I have never touched JS. And I'm pretty sure that is what the developer of the above site has used here.
So, my questions are:
How do I achieve this outcome (or something very close to it)? Note - the site is being developed on WP. I'm not sure if that changes anything.
Once it is done, how do I add Project Information to the overlay?
On button click add class active to .element and thats it
.element {
bottom: 0;
height: 100%;
left: -100%;
position: fixed;
right: auto;
top: 0;
width: 100%;
transition: left .3s ease-in;
}
.element.active {
left: 0;
right: 0;
}
I created a small pen demonstrating how you can achieve this using CSS and very little plain Javascript:
https://codepen.io/Tauka/pen/OjEQzE
.overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: green;
transition: width 2s ease-out;
overflow-x:hidden;
}
Important moments:
.overlay must have width: 0 and position: fixed
.content must have width in absolute measure, i.e. px/rem/em
Hope it helps!
You can find a good example on the W3School web site.
Look at that https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp.
You can see on that site the almost exact same effect. I give the example code just here :
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
</script>
</body>
</html>
Related
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I created an example:
jsfiffle
exactly identical to this one in w3schools:
w3schools sidenav_push
except that mine has more anchor tags in the side panel.
Why scrolling to the very bottom of the left pane is not possible?
At some point I saw a difference in that behavior when you scroll down using the bar or with the mouse wheel, so please try both. i tried in Chrome and Firefox.
Html:
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>..</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
The main issue is that the padding-top property pushes the content down, but overflow only limits to height.
If you want to the padding to compute with the 100% height, you have to modify the box-sizing.
.sidenav {
box-sizing: border-box;
}
Answer based on: CSS padding overrides overflow?
Working JSFiddle: https://jsfiddle.net/wcfwLxtx/2/
Add this to your CSS.
.sideNav {
overflow: auto;
}
That should do it.
The issue is related to the padding-top. Eliminating it will enable the entire content to be displayed.
Here's an example https://jsfiddle.net/kzpjmmf2/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
}
you just need to reduce the padding
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}
here is a working example
https://codepen.io/anon/pen/EXXaKN
I am trying to get overlay opened first than the alert box to be opened after it. Alert box comes first even if i have written it after the overlay one.So i need to know what problem is here in my code
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
alert("hello");
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
Your javascript code is not going to wait at your
document.getElementById("myNav").style.width = "100%";
line while the css transition happens. It is going to immediately start executing whatever lines of javascript come next.
If you want an action to happen after a transition you need to add an event listener for transitionend (or animationend if using keyframe animations).
So if you want your alert to happen after your transition you need to change your code to something like
var nav = document.getElementById("myNav");
nav.addEventListener("transitionend",function(){
//this callback is called when transition ends
alert("hello");
});
nav.style.width = "100%";
Demo
var nav = document.getElementById("myNav");
var btn = document.querySelector("button");
function openNav() {
nav.addEventListener("transitionend", function() {
//this callback is called when transition ends
alert("hello");
});
nav.style.width = "100%";
}
btn.addEventListener("click", openNav);
#myNav {
display: block;
width: 0%;
height: 100px;
background: grey;
transition: width 1s;
}
<div id="myNav">
</div>
<button>Open</button>
I saw this offer on a website which was being displayed above the navbar.
It looked like this once clicked on the arrow on the top right corner.
And how can I make it responsive?
Can anyone share how to implement such a solution? Are there any already existing solutions which I can reuse?
It is simple to make one by yourself.
The main steps are:
create a div element, fixed to the top, height zero
put a button to the top right corner
bind an event to the button, when clicked, toggle the height of the div.
Here's an example: http://codepen.io/SLRXXX/pen/YWVdJZ
$('.button').on('click', function () {
$('.top').toggleClass('active');
});
.top {
position: fixed;
top: 0;
left: 0;
height: 0;
width: 100%;
}
.strip {
height: 0;
background-color: yellow;
transition: height 0.5s;
line-height: 40px;
text-align: center;
overflow: hidden;
}
.top.active .strip{
height: 40px;
}
.button {
position: absolute;
top: 0;
right: 5px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
background-color: yellow;
color: #fff;
cursor: pointer;
}
.arrow-down {
transition: transform 0.5s;
}
.top.active .arrow-down{
transform: rotate(180deg)
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="top">
<div class="strip">
some content
</div>
<div class="button">
<i class="glyphicon glyphicon-chevron-down arrow-down"></i>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
I have implemented the following sidebar navigation into a simple admin. I've got it working and moved to the right side. I would like to have it appear and disappear using a single button rather than a separate close and open button. I tried modifying the JS with an onToggle function that if isOpen was null, it would open the panel and then set isOpen to true and then the next time it ran, it would delete isOpen. I'm very new at JS and this failed so I thought I'd ask here. How do I get this puppy appearing and disappearing with a single button?
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
Thank you kindly.
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60px;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<script>
function openNav() {
var e = document.getElementById("mySidenav");
if (e.style.width == '250px')
{
e.style.width = '0px';
}
else
{
e.style.width = '250px';
}
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
This is the same code with little modifications in the openNav() method. For triggering the sideNavbar with a button, it needs to be visible before and after triggering the sideNavBar. So i have moved the view button to the top and i have modified the top property of sidenav to keep the trigger button visible even after activation
You can view this in action here: https://jsfiddle.net/ngohrvk1/
I know the question is tagged with JavaScript and you probably don't want to change the markup or add new elements. But if you could, here's a pure CSS solution that works.
body {
margin: 0;
}
.sidebar-toggle {
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding: 10px;
background: red;
color: white;
}
#sidebar-toggle-input {
display: none;
}
#sidebar-toggle-input+label:before {
content: "➡️";
}
#sidebar-toggle-input:checked + label:before {
content: "❌"
}
.sidebar {
position: fixed;
width: 200px;
transition: 0.3s;
background: blue;
height: 100vh;
top: 0;
left: 0;
transform: translateX(-100%);
}
#sidebar-toggle-input:checked ~ .sidebar {
transform: none;
}
<input type="checkbox" id="sidebar-toggle-input" />
<label class="sidebar-toggle" for="sidebar-toggle-input"></label>
<div class="sidebar"></div>
This code will help you out, I have created a function and saving data-isshown attribute on the element, to get whether the element is shown or not, we can decide this on the basis of the width as well but this is more generic approach
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
Whole code would look like this
function toggleNav() {
var element = document.getElementById("mySidenav")
var shown = element.getAttribute("data-isshown");
if (shown == "true") {
element.setAttribute("data-isshown", "false");
element.style.width = "0";
} else {
element.setAttribute("data-isshown", "true");
element.style.width = "250px";
}
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰ open</span>