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
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>
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 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?
I want to use https://startbootstrap.com/template-overviews/simple-sidebar/ to add side menu to my website, but I want to add function to when clicked out the menu will be closed. Here is my code
<script>
jQuery(document).ready(function($) {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
$("#page-content-wrapper").click(function(ev){
ev.preventDefault();
$("#menu-toggle").click();
$(this).off(ev);
});
});
});
</script>
and try to do this way
<script>
jQuery(document).ready(function($) {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
$("#page-content-wrapper").click(function(ev){
ev.preventDefault();
$(this).off(ev);
console.log($("#wrapper"));
if( $( "#wrapper" ).hasClass('.toggled') ) {
$("#menu-toggle").click();
}
});
});
});
</script>
But neither way show the result I want
You can achieve using below chunk of code make sure your Body or Wrapper's height is 100% to make this work otherwise it'll not fire any click event.
You just bind a click event on Body or parent Div and in that check clicked element is not id of menu sidebar-wrapper and Toogle button menu-toggle.
$('#wrapper').click(function(evt){
if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle" )
return false;
$("#menu-toggle").click();
});
UPDATE
Find Updated snippet
/* Latest compiled and minified JavaScript included as External Resource */ jQuery(document).ready(function($) {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$('#wrapper').click(function(evt){
if(evt.target.id == "sidebar-wrapper" || evt.target.id == "menu-toggle" )
return false;
$("#wrapper").removeClass("toggled");
});
});
/*!
* Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
overflow-x: hidden;
}
/* 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;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -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;
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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 -->
<!-- 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 -->
</div>
It is your code , now check , its has working fine
<script>
jQuery(document).ready(function($) {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
$("#page-content-wrapper").click(function(ev){
ev.preventDefault();
$(this).off(ev);
console.log($("#wrapper"));
if( $( "#wrapper" ).hasClass('toggled') ) {// change the line [$( "#wrapper" ).hasClass('.toggled') ]
$("#menu-toggle").click();
}
});
});
});
</script>
Try this one out.. Anywhere you click on the document it checks whether or not you are clicking within the sidebar menu..
jQuery(document).ready(function($) {
$("#menu-toggle").click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#wrapper").toggleClass("toggled");
});
$(document).click(function(e) {
if ($(e.target).closest('#sidebar-wrapper').length === 0) {
$("#wrapper").removeClass("toggled");
}
});
});
https://jsfiddle.net/nLar6v3f/3/
$(document).on('click', '#menu-toggle', function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
(<any>$('#wrapper.toggled').find("#sidebar-wrapper").find(".collapse")).collapse('hide');
});
So I suspect CSS3 transitions aren't the answer to this, but here's what I'm trying to accomplish:
In a wrapper/child div scenario, the child div is swapped out for a div of a different, unknown, height. This causes an abrupt height change. I want that height change to transition smoothly, a la CSS3 property transitions.
Here's the bin:
http://jsbin.com/hakanulodo/9/edit
And to address link rot, here's the bin's initial code:
# HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="child">
Original
</div>
</div>
<div class="new">
New
</div>
</body>
</html>
# css
.wrapper {
transition: height 0.25s ease 0.2s;
}
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: purple;
color: white;
}
.new {
display: none;
height: 200px;
width: 100px;
line-height: 100px;
text-align: center;
background: blue;
color: white;
}
# javascript
$('.wrapper').click( function() {
var item = $('.new').css("display", "block");
$('.wrapper').html(item);
});
I'm open to JS solutions as well as CSS. Thanks in advance!
you can't transition attribute ('display' none to 'block').
why do you want to use a div outside the 'wrapper' class? is it ok to just add a class and change the div's name?
HTML:
<div class="wrapper">
<div class="child">
Original
</div>
</div>
CSS:
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: purple;
color: white;
-webkit-transition: height 0.50s ease 0.2s;
-moz-transition: height 0.50s ease 0.2s;
transition: height 0.50s ease 0.2s;
}
.new {
height: 200px;
background: blue;
}
Jquery:
$('.child').click( function() {
$(this).addClass('new').html('New');
});
example: http://jsbin.com/jivevasawi/1/edit?html,css,js,output