I just customized my fixed nav on my web and it works but for one thing - every header type of page doesn't recognize the main menu as under the header. When I load every page for the first time, the menu itself appears at the top of the page and it's like the fixed nav is taking the main nav up with it instead of not appearing at all until reaching the actual menu (the header is about 305px high).
I'm not sure if there's something wrong with the elements' order or if it's because of the js offset. But before adding the fixed nav everything worked just fine and every page loaded the menu under the header.
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class='header-page page-has-banner wsite-theme-dark'>
<div class="wrapper">
<div class="banner-wrap">
<div class="container">
<div class="banner">{content}</div>
</div>
</div><!-- end banner-wrap -->
<div class="dusk-header">
<div class="nav-wrap">
<div class="container">
<div class="logo">{logo}</div>
<div class="nav desktop-nav"></div>
<label class="hamburger"><span></span></label>
</div><!-- end container -->
</div>
</div>
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div><!-- end main-wrap -->
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div>
<div class="nav mobile-nav">{menu}</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
css
/* Fixed Nav */
body.page-has-banner.affix {
padding-top: 65px;
}
body.page-has-banner.affix .dusk-header {
position: fixed !important;
top: 0;
z-index: 15;
}
/* Fade out scroll */
body.fade-on-scroll .banner {
opacity: 0;
}
/* Mobile app */
body.wsite-checkout-page .dusk-header,
body.wsite-native-mobile-editor .dusk-header {
position: absolute !important;
}
/* Header */
.dusk-header {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
background: #navBg;
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.dusk-header .nav-wrap {
width: 100%;
background: #navBg;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.dusk-header .container {
display: table;
overflow-y: hidden;
}
.dusk-header label.hamburger {
display: none;
}
.dusk-header .logo {
display: table-cell;
vertical-align: middle;
margin-right: 30px;
color: white;
}
.dusk-header .logo .wsite-logo {
vertical-align: auto !important;
}
.dusk-header .logo a {
display: block;
overflow: hidden;
margin-right: 30px;
color: white;
letter-spacing: 0.03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 26px;
font-weight: 300;
line-height: 40px;
}
.dusk-header .logo img {
display: block;
overflow: hidden;
max-width: 200px;
max-height: 40px;
}
.dusk-header .logo #wsite-title {
display: block;
max-width: 400px;
font-family: 'Lato', sans-serif;
font-size: 26px;
font-weight: 300;
line-height: 40px;
}
after that follows the nav code
js
// Fixed nav
$.fn.checkElementPositioning = function($el, $offsetHeightEl, scrollClass) {
if (!this.length) {
return;
}
if(((this.offset().top - $(window).scrollTop()) <=
$offsetHeightEl.outerHeight()) && !$el.hasClass(scrollClass)) {
$el.addClass(scrollClass);
} else if(((this.offset().top - $(window).scrollTop()) >=
$offsetHeightEl.outerHeight()) && $el.hasClass(scrollClass)) {
$el.removeClass(scrollClass);
}
}
Any ideas or do I needs to provide more info?
Related
I have a fixed div element and I want to hide it after scrolling for a width smaller than 767px. With media queries, I can do this when the width is smaller than 767px but I want to trigger the display: hidden after scrolling.
How can I do it?
body {
background: #000;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
</body>
</html>
I wrote the part of the code related to those fixed elements but feel free to use anything.
Thanks in advance!
You can listen to a scroll event and run the check below
if (window.matchMedia('screen and (max-width: 767px)').matches) {
// hide the element here
}
Take a look at How to hide a div wih jQuery dependant on screen size
You can use innerWidth and write a statement that if the width of the client is lower equal to 768, after scrolling, hide the element. else(width more equal to 769): show element.
I also used IIFE Function. That helps us after loading the page, it runs immediately and you won't need any other action or call to run the function.
(function () {
const section = document.querySelector('section');
window.addEventListener('scroll', () => {
window.innerWidth <= 768 ? section.style.opacity = 0 : section.style.opacity = 1;
}
)
})();
body {
height: 200vh
}
section {
width: 300px;
height: 200px;
background-color: orange;
}
<section></section>
It can be quite overheady listening for the scroll event, especially as in this case we are only interested when the user has moved down from (or back up to) the top.
This snippet uses a different method. It places a tiny div at the top of the page and sets an intersection observer on it. When it is in the viewport we know that we want to show magic whatever the width of the viewport so we set the visibility of magic to visible.
However, when it goes out of the viewport that means the user has scrolled and we set the visibility of magic to var(--visibility). --visibility is set to visible for larger viewport widths, and through a media query is set to hidden for widths under 768 - so magic will disappear. It will reappear if the user scrolls to the top or the viewport is widened (e.g. by the user altering the window size or maybe going to landscape mode on some devices).
This way we avoid the overhead of having to look at all scroll events and there is no need to look for the resize event either.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style>
body {
background: #000;
height: 300vh;
/* just so we can scroll for the testing */
}
#sensor {
/* when this goes out of view we are deemed to have scrolled */
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 20px;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
visibility: visible;
/* this will get changed to var(--visibility) after a scroll on any width of device */
--visibility: visible;
/* this will get changed by CSS stylesheet media query on a narrow device */
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
--visibility: hidden;
}
}
</style>
</head>
<body>
<div id="sensor"></div>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
<script>
let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// we are at the top of the page so haven't scrolled (or have scrolled right back up)
magic.style.visibility = 'visible'; //make magic element visible
} else {
magic.style.visibility = 'var(--visibility)';
}
});
};
const sensor = document.querySelector('#sensor');
const observer = new IntersectionObserver(callback);
const magic = document.querySelector('#magic');
observer.observe(sensor);
</script>
</body>
</html>
There are two options.
Listen to scroll event and then check the screen size
Listen to resize event, check the screen size and then listen to scroll event.
It is better to use the second option as resize triggers less frequently than scroll.
let element = document.querySelector('#magic')
window.addEventListener('resize', check)
check()
function check() {
if (window.matchMedia('screen and (max-width: 767px)').matches)
document.addEventListener('scroll', hide)
}
function hide() {
element.style.display = 'none'
}
body {
height: 1000px;
background: #000;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
</body>
Specifically, I want to change colors of sticky and fixed elements on my page dynamically as the user scrolls into specific sections. I know that this is possible with the pixel height on scroll, but I can't use this technique, because the background of my page consists of a stack of images. This causes the pixel height of the page to change dramatically on window resize due to the height needing to increase as the image gets wider
.
I guess it would be possible to do this with a bunch of media calls, but I'm trying to avoid this, and I'm not even sure it would work.
My main goal would be:
When a div is scrolled into view, the style (mainly color and font-weight) of the navigation bar and fixed footer change.
Also - This has to be in Vanilla JS.
If someone has a pure CSS solution, that's very acceptable as well, I just can't think of a way this would work.
Thank you!
How About Using This?
These are VanillaJS SpyScroll
https://github.com/cferdinandi/gumshoe
https://github.com/ederssouza/vanillajs-scrollspy
From Codepen zchee/pen/ogzvZZ
HTML
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home" class="section"></div>
<div id="portfolio" class="section"></div>
<div id="about" class="section"></div>
<div id="contact" class="section"></div>
SCSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
ul {
margin: 15px 0 0 0;
li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
}
}
.active {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
}
#portfolio {
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
JS
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
}
}
};
})();
I cant seem to figure out how to get left column to go over the top as an overlay... not move the whole table.
I've seen examples of where it overlays the whole page, but i just need it to overlay in the nested section, not the whole page.
Im not exactly sure what you call it when the left column slides over the top of the inner element, but ive seen examples of it sliding over the the whole page, i just need it to slide over the top of the div.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".toggle-sidebar").click(function () {
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");
return false;
});
});
</script>
<style>
html,
body {
height: 100%;
}
.jumbotron {
margin-top: 30px;
}
#content,
#sidebar {
min-height: 500px;
}
#row-main {
overflow-x: hidden; /* necessary to hide collapsed sidebar */
}
#content {
background-color: lightyellow;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#content .btn-group {
margin-bottom: 10px;
}
.col-md-9 .width-12,
.col-md-12 .width-9 {
display: none; /* just hiding labels for demo purposes */
}
#sidebar {
background-color: lightgrey;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.collapsed {
display: none; /* hide it for small displays */
}
#media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%; /* same width as sidebar */
}
}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 50%; }
#sortable li { margin: 0 3px 3px 3px; font-size: 1.4em; height: 15px; }
#sortable li span { position: absolute; margin-left: -1.25em; }
</style>
</head>
<body>
<div class="container">
<div class="row" id="row-main">
<div class="col-md-3" id="sidebar">
side area
</div>
<div class="col-md-9" id="content">
<div class="btn-group" role="group" aria-label="Controls">
<button type="button" class="btn btn-default toggle-sidebar">Toggle sidebar</button>
</div>
<pre>Inner</pre>
</div>
</div>
</div>
</body>
</html>
Fiddle:- https://jsfiddle.net/nrqpay4k/
If you want the sidebar to go on top of the rest of the content you have to make its position: absolute.
You also should take it out of the table.
This is what you need:
#sidebar {
background-color: lightgrey;
width: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: transform 500ms ease-in-out;
}
.collapsed {
transform: translateX(-100%)
}
I also changed a little bit of the html to take the sidebar out of the row element.
____ update - close button added _____
To add a close button add the following html inside the sidebar container:
<button id="closeSidebar">x</button>
The css is the following:
#closeSidebar {
position: absolute;
top: 0;
right: 0;
padding: 3px 10px;
cursor: pointer;
}
And finally the Javascript is the following:
$("#closeSidebar").click(function() {
$("#sidebar").toggleClass("collapsed");
return false;
});
See if this is what you want:
https://jsfiddle.net/wnpv2got/2/
I'm working on a layout with a fixed header and footer in the content area with a collapsible sidebar. Currently it's working pretty well but there are some small quirks which I can't seem to figure out.
When the sidebar is toggled shut the body content snaps to it's 100% width and shows a scroll bar on the bottom until it's finished collapsing. I want the content to either have it's width tween like the sidebar or just have overflow-x hidden so it doesn't show the scroll bar at all.
I want the footer to be a dynamic height. I will be loading different content in there based on database queries and the number of entries I pull will determine the height of the footer. Currently it's locked at 60px.
As for the first problem, I've tried adding overflow-x hidden to various elements without success. The second problem has been a little more complicated. I've tried some CSS calc() operations but nothing has worked so far.
Here is my code, if you want to test it out you'll need bootstrap.min.css, bootstrap.min.js and jquery.js. I tried setting up a Codepen or Bootply example but it wouldn't work with the collapsible sidebar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Calendar</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/frame.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<header>header</header>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<footer>footer</footer>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
$("header").toggleClass("toggled");
$("footer").toggleClass("toggled");
});
</script>
</body>
</html>
CSS (from Frame.css)
/* Header Footer Styles */
header {
width: 100%;
height: 60px;
background: red;
position: fixed;
top: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
header.toggled {
width: calc(100% - 250px);
}
footer {
width: 100%;
height: 60px;
background: red;
position: fixed;
bottom: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
footer.toggled {
width: calc(100% - 250px);
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
overflow-x: hidden;
}
#page-content-wrapper {
width: 100%;
position: absolute;
margin-top:60px;
max-height: calc(100% - 120px);
overflow-y: auto;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
width: calc(100% - 250px);
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
It's a bit hacky, but for problem 1, you could try adding the following to your click function:
$("body").css("overflow-x", "hidden");
setTimeout(function(){$("body").css("overflow-x", "auto");}, 1500);
For problem 2, you could just remove the height.
Update: Sorry, I think I misunderstood problem 2. The only solution I can think of (again a bit of a hack) is to have jquery calculate and set it when the page loads:
$(document).ready(function() {
var currentFooterHeight = $('footer').css('height');
var newContentHeight = 'calc(100vh - 60px - ' + currentFooterHeight + ')';
$('#page-content-wrapper').css('height', newContentHeight);
})
Updated Bootply
I know it's got to be a stupid simple problem, but it's been holding my back for too long...
I want to click the menu icon (picture) in the top right corner and have it display a transparent div menu over the entire screen. Then when I click the icon again, I want it to disappear.
JQuery is supposed to be hiding and showing a div on each click of the button. It shows the div the first time but after that, it doesn't register the click. I'm using transparent divs quite a lot on this project so my first guess is that something loads that is covering the button and that is stopping the click from "reaching" the button in question. But I've set a z-index to the button so it appears above everything else (also corroborated by the background color property) and yet when I click the button a second time, the div that it is supposed to hide stays there.
Here's my JQuery code:
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").fadeIn(400);
}
});
And here's my HTML:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<header>
<p class="homeLink">Company Name Here</p>
<div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
</header>
<div class="slider">
<div class="sliderPic"></div>
<div class="sliderText"><p>This is come content just chilling right here.</p></div>
</div>
</div>
<footer>
<div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
</footer>
<div id="menuOverlay" class="menuDiv">
<ul id="menu">
<li>Work.</li>
<li>About.</li>
<li>Careers.</li>
<li>Ideas.</li>
<li>News.</li>
<li>Events.</li>
<li>Contact.</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
And just in case it's relevant, here's my CSS:
html, body {
width: 100%;
height: 100%;
}
body, html, .non-footer {
height: 100%;
min-height: 100%;
width: 100%;
}
.footer {
height: 55px;
margin-top: -55px;
width: 100%;
}
#arrowJumper {
width: 100%;
height: 55px;
margin-top: -56px;
background: rgba(0, 0, 0, 0);
/*background-image: url('../images/greyArrow.png');
background-position: center -15px;
background-repeat: no-repeat;*/
text-align: center;
position: absolute;
}
header {
position: absolute;
width: 100%;
z-index: 90;
}
footer {
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 90;
}
.slider {
position: absolute;
height: 100%;
width: 100%;
z-index: 5;
display: block;
background: blue;
}
.homeLink {
float: left;
margin-left: 40px;
margin-top: 50px;
color: #ff6633;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 26px;
}
#menuButton {
float: right;
margin-right: 40px;
margin-top: 50px;
}
#arrowJumper img{
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: -15px;
}
#arrowJumper:hover {
background-color: #ff6633;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
#arrowJumper:hover img {
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: 4px;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#menuOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menuOverlay {
position: absolute;
z-index: 10;
display: none;
background: rgb(200, 102, 51); /* The Fallback */
background: rgba(200, 102, 51, 0.5);
text-align: center;
height: 960px;
}
#menuOverlay ul{
vertical-align: center;
position: absolute;
top: 10%;
transform: translateY(-50%);
width: 100%;
font-size: 56px;
font-weight: normal;
color: #fff;
}
#menuOverlay ul li{
margin: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#menuOverlay ul li:hover{
color: #ff6633;
background: #fff;
}
.displayIt {
display: block;
}
And here's a fiddle for convenience: http://jsfiddle.net/yv9mr/
I'm pretty new at all of this so I really appreciate your assistance. I'm sure it's something simple. Thanks all!
You need to add/remove class on each click like this in your if-else block
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
$("#menuOverlay").removeClass("displayIt"); //remove class
} else {
$("#menuOverlay").fadeIn(400);
$("#menuOverlay").addClass("displayIt"); //add class
}
But the simplest way would be to fadeToggle the required div , in order to hide/show:
$("#menuOverlay").fadeToggle();
I suggest you use jQuerys .fadeToggle() method. In my opinion cleaner to let jQuery manage the toggle effect:
$("#menuButton").click(function(){
$("#menuOverlay").fadeToggle(400);
});
Tested and works with your example: JSFiddle.
Try this:
var clicked = false;
$("#menuButton").click(function(){
if (clicked == true){
$("#menuOverlay").fadeOut(400);
clicked = false;
} else {
$("#menuOverlay").fadeIn(400);
clicked = true;
}
});
The issue is that you are not adding or removing the class. Your event listener is working correctly, but you should add
$("#menuOverlay").toggleClass("displayIt");
to the end of your javascript (after the if/else).
A class such as "expanded" would be more semantic.
Reason Function is called again but your condition if($("#menuOverlay").hasClass("displayIt")) is always true so else never executes.. You can do
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").removeClass("displayIt");
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").addClass("displayIt");
$("#menuOverlay").fadeIn(400);
}
});
Fiddle
Or Simply
var shown=false;
$("#menuButton").click(function(){
if(!shown)
{
$("#menuOverlay").fadeOut(400);
shown =true;
}
else
{
$("#menuOverlay").fadeIn(400);
shown=false;
}
});