My page has toggled content that is preventing the other page content from being selectable or clickable. Is there a way to keep my general page layout the same, but still give users the ability to select the text and links within the "page-content" div?
I can add a positive z-index value to that "page-content" div, which would appear to solve the problem, but of course that covers up the toggled content, defeating the purpose.
function myFunction() {
var x = document.getElementById("toggleDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
width: 600px;
height: 350px;
border: 2px solid gray;
padding: 10px;
}
.page-content {
position: absolute;
width: inherit;
}
.toggle-wrapper {
width: 100%;
height: 100%;
border: 1px solid red;
position: relative;
}
.button-1 {
background-color: beige;
position: absolute;
right: 0;
bottom: 0;
}
#toggleDiv {
width: 95%;
height: 95%;
width: 600px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
.link-box {
border: 1px solid blue;
width: 75%;
height: 225px;
margin-top: 100px;
margin-left: 12.5%;
box-sizing: border-box;
text-align: center;
background-color: beige;
}
.link-box a {
width: 40%;
margin-left: 7%;
border: 1px solid black;
text-align: center;
float: left;
height: 100px;
margin-bottom: 25px;
}
<div class="container">
<div class="page-content">
<p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>
<p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
LINK
</div>
<!--page-content-->
<div class="toggle-wrapper">
<button class="button-1" onclick="myFunction()">toggle</button>
<div id="toggleDIV" style="display: none;">
<div class="link-box">
<p>Toggle Content </p>
<a href="#">
<p>Link 1</p>
</a>
<a href="#">
<p>Link 2</p>
</a>
<button onclick="myFunction()">Cancel</button>
</div>
<!--link-box-->
</div>
<!--#toggleDiv-->
</div>
<!--toggle-wrapper-->
</div>
<!--container-->
I'd change the display of your popup a bit by removing the parent's block display, and setting the position of the inner link div to an absolute position so that it's removed from the flow of the document and doesn't block the elements behind it. Like this:
function myFunction() {
var x = document.getElementById("toggleDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
width: 600px;
height: 350px;
border: 2px solid gray;
padding: 10px;
position: relative;
}
.page-content {
position: absolute;
width: inherit;
}
.button-1 {
background-color: beige;
position: absolute;
right: 0;
bottom: 0;
}
#toggleDiv {
width: 600px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
.link-box {
border: 1px solid blue;
width: 75%;
height: 225px;
box-sizing: border-box;
text-align: center;
background-color: beige;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.link-box a {
width: 40%;
margin-left: 7%;
border: 1px solid black;
text-align: center;
float: left;
height: 100px;
margin-bottom: 25px;
}
<div class="container">
<button class="button-1" onclick="myFunction()">toggle</button>
<div class="page-content">
<p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>
<p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
LINK
</div>
<!--page-content-->
<div class="toggle-wrapper">
<div id="toggleDIV" style="display: none;">
<div class="link-box">
<p>Toggle Content </p>
<a href="#">
<p>Link 1</p>
</a>
<a href="#">
<p>Link 2</p>
</a>
<button onclick="myFunction()">Cancel</button>
</div>
<!--link-box-->
</div>
<!--#toggleDiv-->
</div>
<!--toggle-wrapper-->
</div>
<!--container-->
Related
Initially, my id="Gabel" display was shown on my page with the correct format but when input display: none; my formatting was distorted. Is there anything wrong with my code? I want to show display id="Gabel" when I click the image on the main page. Here are some of the codes. My problem lies in the formatting of my card with an id of Gabel. Thank you
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
/* display: none; */
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<!DOCTYPE html>
<html>
<head>
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.display === "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</head>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')">
<img src="assets\image_1.jpg" alt="">
</button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Possibly try toggling opacity instead of display
#Gabel {
background-color: #fff;
position: relative;
display: flex;
border-radius: 20px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
padding: 0;
top: 300px;
opacity: 0;
width: 80%;
}
.container_Gabel img {
width: auto;
height: 100%;
border-radius: 5px 0 0 5px;
}
.container_Gabel .btn {
position: absolute;
bottom: -20px;
right: -20px;
border: none;
outline: none;
display: flex;
align-items: center;
background-color: #fc9400;
color: #fff;
padding: 22px 45px;
font-size: 1rem;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container__text {
padding: 40px 40px 0;
}
.container__text h1 {
color: #351897;
font-weight: 400;
}
.container__text p {
font-size: 0.9rem;
}
.container__text .container__text__timing {
display: flex;
margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
margin-right: 40px;
}
.container__text .container__text__timing h2 {
font-size: 1rem;
font-weight: 400;
margin-top: 20px;
margin-right: 30px;
}
.second_half {
margin-left: 20px;
}
.container__text .container__text__timing p {
color: #351897;
font-weight: bold;
font-size: 1.2rem;
}
.title-container {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb-rl;
margin-left: 5px;
margin-right: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title-container span {
transform: rotate(180deg);
display: flex;
text-align: center;
min-height: 10em;
vertical-align: middle;
line-height: 2em;
justify-content: center;
width: 2em;
}
.vl {
border-left: 4px solid black;
height: 100px;
}
hr {
border: 0;
height: 1px;
width: 100%;
position: relative;
margin-top: 0;
}
<script>
function clearBox(elementID) {
document.getElementById(elementID).innerHTML = "";
var x = document.getElementById("Gabel");
if (x.style.opacity === "0") {
x.style.opacity = "0";
} else {
x.style.opacity = "1";
}
}
</script>
<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
<div class="row" id="container-item">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<button class="button2" onclick="clearBox('container-item')"><img src="assets\image_1.jpg"
alt=""></button>
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container_Gabel" id="Gabel">
<div class="title-container"><span>
<h2>GABEL LOFFEL</h2>
</span></div>
<div>
<img src="assets\swiss.jpg" alt="Pancake" />
</div>
<div class="container__text">
<h1>Gabel Loffell</h1>
<div class="container__text__timing">
<div class="container__text__timing_time">
<h2>
235 GLENDALE AVE.<br>
MERIDIAN CITY<br>
T: 490 49 4000<br>
W: GANDG.RES
</h2>
</div>
<div class="container__text__timing_time vl"></div>
<div class="container__text__timing_time">
<h2 class="second_half">
CATEGORY: SWISS<br>
OPEN: 10AM TO 10PM<br>
PRICE: $$$
</h2>
</div>
</div>
<hr>
<div class="body_container">
<div class="body_card">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
velit ac, elementum scelerisque tortor. Cras eget maximus diam.
<br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
imperdiet congue ut id metus. Sed sit amet condimentum eros.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
Try using visibility property, which leaves an element in normal document flow, display: none essentially removes the element completely from the document.
Here, if you need more detail.
Try using
visibility:hidden;
and
visibility: visible;
to hide and show the element
When the right panel is expanded, I want to fade out the content of the page and add css position to the background to make it slide to the left, is it possible? I can't modify the content when the panel is expanded because it doesn't receive an active class. Tried an "add class" in the JS for the content but didn't work.
https://codepen.io/darcyvoutt/pen/rhtfk
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84D5C5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1, h2, h3 { margin-bottom: 0.5em; }
ul { margin: 30px 40px; }
li { margin: 5px 0; }
////////////////////////
// Mixins
////////////////////////
.transition(#property) {
-webkit-transition: #property;
transition: #property;
}
.boxStyle() {
background: #ffffff;
padding: 50px;
}
.panels() {
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
}
.panelClose() {
#size: 15px;
#margin: 5px;
line-height: #size;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: #margin;
top: #margin;
height: #size;
width: #size;
content: "✖";
}
////////////////////////
// Panels & Reveal
////////////////////////
.panel {
#transition: all 1.5s ease-in-out;
padding: 20px;
&-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
.close {
.panelClose();
&:before { .panelClose(); }
}
}
&-left {
.panels();
.transition(#transition);
left: -100%;
width: 45%;
&.expanded { left: 50px; }
}
&-right {
.panels();
.transition(#transition);
right: -100%;
width: 50%;
&.expanded { right: 0; }
}
}
.reveal {
&-left {
float: left;
}
&-right {
float: right;
}
}
////////////////////////
// Layout
////////////////////////
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
button {
padding: 4px 6px;
}
a {
font-weight: bold;
color: #222;
}
}
.content {
.boxStyle();
margin: 50px auto;
position: relative;
width: 90%;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
JS
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) { $(panel).removeClass('expanded'); }
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) { $('.panel-left').addClass('expanded'); }
if (e.keyCode == 82) { $('.panel-right').addClass('expanded'); }
});
});
You can add a class on the expand/close of the right panel that will:
fade the main content by changing the opacity CSS from 1 to 0.3 (for example)
move it to the right using the right from 0 to 50% (to match your right panel)
The transition rule in the .content CSS will animate the change.
(You only mention the right panel in your question, but it can be adapted for the left panel also).
See the working snippet:
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
$(".content").addClass('hidefor-'+panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
}
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-right').addClass('expanded');
$(".content").addClass('hidefor-panel-right');
}
});
});
.content {
background: #ffffff;
padding: 50px;
margin: 50px auto;
position: relative;
width: 90%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity:1;
right:0;
}
.content.hidefor-panel-right {
opacity:0.3;
right: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84d5c5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-right {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
right: -100%;
width: 50%;
}
.panel-right.expanded {
right: 0;
}
.reveal-left {
float: left;
}
.reveal-right {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
I have 3 column on my web page like facebook as well as in this example.
https://benfrain.com/playground/scroll-test.html
What i want is when i start scrolling down all columns should scroll down and if anyone of these columns reach at end of its data that column should stop scrolling there while other columns are still scrolling. Now Suppose if first and third column reached to its end and stopped scrolling but second column still have some data down and still scrolling , When i start scrolling up, first and third column also need to start scrolling up immediately and will stop again whenever first and second column again reached to its full top.
How can i achieve this.
I build this page with reactjs and bootstrap .
$(function() {
for (var i = 0; i < 20; i++) {
$('.content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae pretium ante. Pellentesque eu quam non eros fermentum euismod. Sed turpis ligula, hendrerit at erat at, mattis commodo tortor. Sed eleifend velit interdum augue faucibus luctus. Nulla facilisi. Fusce facilisis at enim ac euismod. Vestibulum a lobortis velit. Sed ac erat ac sapien rhoncus tristique. Aliquam eget diam non justo sollicitudin egestas. Cras aliquam egestas nunc sed fermentum. Donec nec consectetur neque. Proin arcu ligula, tincidunt a augue in, dictum pharetra nisi.</p>');
}
});
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner>div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
On my website I've got a sticky, dropdown menu. When page is already loaded (without scrolling) or after user page scrolling there's everything ok - menu is dropping down.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'static',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
The problem is when user comes back to the top of the page. Then menu is not dropping down. I have got two JS scripts. One allows to drop down the menu, the other one causes that the menu is sticked to the top of the page after user scrolling.
I found out that when I remove #content and #contentwrap from CSS, then menu is dropping down, but it appears behind the text. However, I wouldn't like to remove it.
Also, when I hover over ul > li > a called 'test' it moves to right a little. I would like to get rid of it.
What should I add or delete so as menu would work properly no matter where menu is displayed. Thanks!
You need to change the position to relative instead of static when you are scrolling up.
$(document).ready(function(){
$('li').hover(function(){
$(this).find('ul>li').stop().slideToggle(250);
});
});
$(function () {
var stickyHeaderTop = $('#navigationwrap').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#navigationwrap').css({
position: 'fixed',
top: '0px'
});
$('#contentwrap').css('margin-top', $('#navigationwrap').outerHeight(true) + parseInt($('#headerwrap').css('marginBottom')));
} else {
$('#navigationwrap').css({
position: 'relative',
top: '0px'
});
$('#contentwrap').css('margin-top', '0px');
}
});
});
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
color: #333;
}
p {
padding: 10px;
}
#navigation ul {
margin: 0;
padding: 0;
width: auto;
list-style-type: none;
text-align: center;
display: inline-block;
}
#navigation {
text-align: center;
}
#navigation ul li {
float: left;
font-weight: bold;
font-size: 20px;
line-height: 40px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 140px;
}
#navigation ul li:hover {
background: #9D9FA4;
border-radius: 10px;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li li {
background: #3F61A9;
color: #fff;
display: none;
}
ul li li:hover {
background: #9D9FA4;
}
ul li li a{
text-decoration: none;
color: #fff;
}
#wrapper {
margin: 0 auto;
width: 1000px;
}
#headerwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#header {
height: 125px;
background: #000000;
border-radius: 10px;
border: 1px solid #000000;
margin: 5px;
position: relative;
}
#navigationwrap {
width: 1000px;
float: left;
margin: 0 auto;
position: relative;
}
#navigation {
height: 40px;
background: #52bf6e;
border-radius: 10px;
border: 1px solid #3ea858;
margin: 5px;
}
#contentwrap {
width: 700px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#leftcolumn {
border-radius: 10px;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
float: left;
margin: 0 auto;
}
#rightcolumn {
border-radius: 10px;
margin: 5px;
}
#footerwrap {
width: 1000px;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #9D9FA4;
border-radius: 10px;
border: 1px solid #888a91;
margin: 5px;
background-color: #9D9FA4;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
#navigationwrap_placeholder {
display:none;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<ul>
<li>main menu</li>
<li><a>test</a>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="navigationwrap_placeholder"></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p></p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<br><br>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
<br><br>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p></p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
I am trying to use Bootstrap 3 vertical scrollspy, however I cannot find any examples included in the source.
I went ahead and stripped out the documentation pages from here http://getbootstrap.com/javascript/ but I am getting some very strange resize bugs with the sidebar - specifically:
On page refresh the nav bar is positioned and works OK, but on page resize it can drop off past the footer, or disapear before the end of the content.
When refreshed and the browser view port shows the footer (and not the content), the side nav bar shows in the footer whereas is should stop and be aligned with the end of the content.
If the browser window is maximized, clicking on the navigation items does not scroll to the corresponding header element.
Video demo of my issues are here http://youtu.be/Px5I-wKZ0sA
Pastebin post here and code below:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<style type="text/css">
body {
position: relative; /* For scrollyspy */
padding-top: 50px; /* Account for fixed navbar */
}
/* Keep code small in tables on account of limited space */
.table code {
font-size: 13px;
font-weight: normal;
}
/* Outline button for use within the docs */
.btn-outline {
color: #563d7c;
background-color: #fff;
border-color: #e5e5e5;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
color: #fff;
background-color: #563d7c;
border-color: #563d7c;
}
/* Inverted outline button (white on dark) */
.btn-outline-inverse {
color: #fff;
background-color: transparent;
border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
color: #563d7c;
text-shadow: none;
background-color: #fff;
border-color: #fff;
}
.bs-docs-nav {
text-shadow: 0 -1px 0 rgba(0,0,0,.15);
background-color: #563d7c;
border-color: #463265;
box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.bs-docs-nav .navbar-collapse {
border-color: #463265;
}
.bs-docs-nav .navbar-brand {
color: #fff;
}
.bs-docs-nav .navbar-nav > li > a {
color: #cdbfe3;
}
.bs-docs-nav .navbar-nav > li > a:hover {
color: #fff;
}
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
color: #fff;
background-color: #463265;
}
.bs-docs-nav .navbar-toggle {
border-color: #563d7c;
}
.bs-docs-nav .navbar-toggle:hover {
background-color: #463265;
border-color: #463265;
}
.bs-footer {
padding-top: 40px;
padding-bottom: 30px;
margin-top: 100px;
color: #777;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.footer-links {
margin: 10px 0;
padding-left: 0;
}
.footer-links li {
display: inline;
padding: 0 2px;
}
.footer-links li:first-child {
padding-left: 0;
}
#media (min-width: 768px) {
.bs-footer {
text-align: left;
}
.bs-footer p {
margin-bottom: 0;
}
}
.bs-docs-home,
.bs-header {
color: #cdbfe3;
background-color: #563d7c;
}
/* Masthead (headings and download button) */
.bs-masthead {
position: relative;
padding: 30px 15px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.bs-masthead h1 {
font-size: 50px;
line-height: 1;
color: #fff;
}
.bs-masthead .btn-outline {
margin-top: 20px;
margin-bottom: 20px;
padding: 18px 24px;
font-size: 21px;
}
/* Links to project-level content like the repo, Expo, etc */
.bs-masthead-links {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 15px;
list-style: none;
text-align: center;
}
.bs-masthead-links li {
display: inline;
}
.bs-masthead-links li + li {
margin-left: 20px;
}
.bs-masthead-links a {
color: #fff;
}
#media screen and (min-width: 768px) {
.bs-masthead {
text-align: left;
padding-top: 140px;
padding-bottom: 140px;
}
.bs-masthead h1 {
font-size: 100px;
}
.bs-masthead .lead {
margin-right: 25%;
font-size: 30px;
}
.bs-masthead-links {
padding: 0;
text-align: left;
}
}
/* Page headers */
.bs-header {
padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
font-size: 16px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.bs-header h1 {
color: #fff;
}
.bs-header p {
font-weight: 300;
line-height: 1.5;
}
.bs-header .container {
position: relative;
}
#media screen and (min-width: 768px) {
.bs-header {
font-size: 21px;
text-align: left;
}
.bs-header h1 {
font-size: 60px;
line-height: 1;
}
}
#media screen and (min-width: 992px) {
.bs-header h1,
.bs-header p {
margin-right: 380px;
}
}
.bs-sidebar.affix {
position: static;
}
/* First level of nav */
.bs-sidenav {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 0 #fff;
background-color: #f7f5fa;
border-radius: 5px;
}
/* All levels of nav */
.bs-sidebar .nav > li > a {
display: block;
color: #716b7a;
padding: 5px 20px;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
background-color: #e5e3e9;
border-right: 1px solid #dbd8e0;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
font-weight: bold;
color: #563d7c;
background-color: transparent;
border-right: 1px solid #563d7c;
}
/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
margin-bottom: 8px;
}
.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}
/* Show and affix the side nav when space allows it */
#media screen and (min-width: 992px) {
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
width: 213px;
}
.bs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 80px;
}
.bs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
}
.bs-sidebar.affix-bottom .bs-sidenav,
.bs-sidebar.affix .bs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
#media screen and (min-width: 1200px) {
/* Widen the fixed sidebar again */
.bs-sidebar.affix-bottom,
.bs-sidebar.affix {
width: 263px;
}
}
/* Space things out */
.bs-docs-section + .bs-docs-section {
padding-top: 40px;
}
/* Janky fix for preventing navbar from overlapping */
h1[id] {
padding-top: 80px;
margin-top: -45px;
}
/* Common styles for all types */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}
/* Variations */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #dFb5b4;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #d0e3f0;
}
/* Navbars */
.bs-example .navbar:last-child {
margin-bottom: 0;
}
.bs-navbar-top-example,
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-header,
.bs-navbar-bottom-example .navbar-header {
margin-left: 0;
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: relative;
margin-left: 0;
margin-right: 0;
}
.bs-navbar-top-example {
padding-bottom: 45px;
}
.bs-navbar-top-example:after {
top: auto;
bottom: 15px;
}
.bs-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bs-navbar-bottom-example {
padding-top: 45px;
}
.bs-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bs-navbar-bottom-example .navbar {
margin-bottom: 0;
}
#media (min-width: 768px) {
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
}
.bs-navbar-top-example {
border-radius: 0 0 4px 4px;
}
.bs-navbar-bottom-example {
border-radius: 4px 4px 0 0;
}
}
/* Pagination */
.bs-example .pagination {
margin-top: 10px;
margin-bottom: 10px;
}
/* Pager */
.bs-example > .pager {
margin-top: 0;
}
/* Example modals */
.bs-example-modal {
background-color: #f5f5f5;
}
.bs-example-modal .modal {
position: relative;
top: auto;
right: auto;
left: auto;
bottom: auto;
z-index: 1;
display: block;
}
.bs-example-modal .modal-dialog {
left: auto;
margin-left: auto;
margin-right: auto;
}
/* Example dropdowns */
.bs-example > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: 5px;
}
/* Example tabbable tabs */
.bs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
/* Tooltips */
.bs-example-tooltips {
text-align: center;
}
.bs-example-tooltips > .btn {
margin-top: 5px;
margin-bottom: 5px;
}
/* Popovers */
.bs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
.bs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 20px;
}
/* Scrollspy demo on fixed height div */
.scrollspy-example {
position: relative;
height: 200px;
margin-top: 10px;
overflow: auto;
}
/*
* Code snippets
*
* Generated via Pygments and Jekyll, these are snippets of HTML, CSS, and JS.
*/
.highlight {
display: none; /* hidden by default, until >480px */
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;
}
.highlight pre {
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: 0;
white-space: nowrap;
}
.highlight pre code {
font-size: inherit;
color: #333; /* Effectively the base text color */
}
.highlight pre .lineno {
display: inline-block;
width: 22px;
padding-right: 5px;
margin-right: 10px;
text-align: right;
color: #bebec5;
}
/* Show code snippets when we have the space */
#media screen and (min-width: 481px) {
.highlight {
display: block;
}
}
/* Responsive (scrollable) doc tables */
.table-responsive .highlight pre {
white-space: normal;
}
/* Utility classes table */
.bs-table th small,
.responsive-utilities th small {
display: block;
font-weight: normal;
color: #999;
}
.responsive-utilities tbody th {
font-weight: normal;
}
.responsive-utilities td {
text-align: center;
}
.responsive-utilities td.is-visible {
color: #468847;
background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
color: #ccc;
background-color: #f9f9f9 !important;
}
/* Responsive tests */
.responsive-utilities-test {
margin-top: 5px;
}
.responsive-utilities-test .col-xs-6 {
margin-bottom: 10px;
}
.responsive-utilities-test span {
padding: 15px 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.1;
text-align: center;
border-radius: 4px;
}
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
color: #999;
border: 1px solid #ddd;
}
.visible-on .col-xs-6 .visible-xs,
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
}
/* For the variables, use regular weight */
#less-section label {
font-weight: normal;
}
/* Downloads */
.bs-customize-download .btn-outline {
padding: 20px;
}
/* Error handling */
.bs-customizer-alert {
position: fixed;
top: 51px;
left: 0;
right: 0;
z-index: 1030;
padding: 15px 0;
color: #fff;
background-color: #d9534f;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
border-bottom: 1px solid #b94441;
}
.bs-customizer-alert .close {
margin-top: -4px;
font-size: 24px;
}
.bs-customizer-alert p {
margin-bottom: 0;
}
.bs-customizer-alert .glyphicon {
margin-right: 5px;
}
.bs-customizer-alert pre {
margin: 10px 0 0;
color: #fff;
background-color: #a83c3a;
border-color: #973634;
box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
}
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Home
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</nav>
</div>
</header>
<div class="bs-header" id="content">
<div class="container">
<h1>Titleblock Header</h1>
<p>Some interesting catchy phrase better than Lorem ipsum.</p>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div> <!-- end bs-sidebar -->
</div> <!-- end col-md-3 -->
<div class="col-md-9">
<div>
<h1 id="one">ONE</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
<div>
<h1 id="two">TWO</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
<div>
<h1 id="three">THREE</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
</div> <!-- end col-md-9 -->
</div> <!-- end row -->
</div> <!-- end container -->
<footer class="bs-footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>FOOTER GOES HERE</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
Mauris quis congue eros. Donec a nibh feugiat, elementum nisi in, bibendum velit. Morbi non est at urna convallis interdum ac ac mi.
Donec pretium nulla sit amet dapibus dapibus. Mauris interdum sed mauris eu congue. Nunc id adipiscing elit.
Aenean risus mi, tempus vel lectus sed, egestas pulvinar mi. Vestibulum dolor erat, tempor at erat sit amet,
consectetur scelerisque felis.
Aenean sit amet congue velit. Sed tincidunt facilisis fringilla. Ut feugiat dolor sed risus vehicula facilisis.
Integer dolor ligula, porttitor a mi eu, hendrerit fermentum tortor. Sed et dui arcu. Donec dui sem, tincidunt quis lorem fringilla,
rutrum hendrerit arcu. Suspendisse quis arcu tincidunt, tincidunt risus condimentum, sodales massa.
Maecenas aliquet elit in tortor placerat, nec sagittis augue condimentum. Integer laoreet vitae erat semper pharetra.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas nisi nec mi facilisis,
eget ultricies est posuere. Integer tempor bibendum pellentesque.
Nulla pretium sollicitudin mi id rhoncus. Aliquam eget congue nunc. Maecenas tincidunt nulla quis metus pellentesque pulvinar.
Maecenas tincidunt sapien ac odio aliquam, id malesuada sem condimentum. Nam neque eros, aliquet non sem ut, ornare rutrum libero.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et leo metus. Fusce elit nunc, elementum vitae egestas sit amet,
consectetur nec ipsum.
Aenean nisl libero, rutrum eget lacinia vel, faucibus ultrices turpis. Nullam nunc metus, auctor sed mi in, convallis euismod mi.
Nulla pulvinar scelerisque mauris vel varius. Nunc eu condimentum odio, eget placerat sem. Integer suscipit,
sapien vitae laoreet convallis, velit nibh pellentesque felis, quis tristique nulla orci eu felis.
Duis eu turpis rutrum, malesuada augue vitae, posuere nisi. Etiam vitae dolor eget dui eleifend fermentum. Mauris convallis,
risus vitae congue ultricies, nibh velit vehicula arcu, at tempor risus metus vitae diam. Donec pretium euismod mi id porta.
Integer dictum diam at erat feugiat, eu fringilla mi molestie. Phasellus interdum ultricies aliquet. Donec a elementum risus.
Phasellus non fringilla tellus, eu convallis augue. Aliquam enim lectus, vulputate ut sem et, fringilla commodo erat.
Aliquam urna magna, auctor scelerisque nisi a, egestas tempor nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
</div>
</div>
</footer>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
!function ($) {
$(function(){
var $window = $(window)
var $body = $(document.body)
var navHeight = $('.navbar').outerHeight(true) + 10
$body.scrollspy({
target: '.bs-sidebar',
offset: navHeight
})
$window.on('load', function () {
$body.scrollspy('refresh')
})
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
// back to top
setTimeout(function () {
var $sideBar = $('.bs-sidebar')
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
var navOuterHeight = $('.bs-docs-nav').height()
return (this.top = offsetTop - navOuterHeight - sideBarMargin)
}
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})
}, 100)
setTimeout(function () {
$('.bs-top').affix()
}, 100)
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: "a[data-toggle=tooltip]",
container: ".bs-docs-navbar .nav"
})
})
}(window.jQuery)
</script>
</body>
</html>
I messed with the JavaScript for a while and here's what I came up with:
! function ($) {
$(function () {
var $window = $(window)
var $body = $(document.body)
var $sideBar = $('.bs-sidebar')
var navHeight = $('.navbar').outerHeight(true) + 10
$body.scrollspy({
target: '.bs-sidebar',
offset: navHeight
})
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
$window.on('resize', function () {
$body.scrollspy('refresh')
// We were resized. Check the position of the nav box
$sideBar.affix('checkPosition')
})
$window.on('load', function () {
$body.scrollspy('refresh')
$('.bs-top').affix();
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
var navOuterHeight = $('.bs-docs-nav').height()
// We can cache the height of the header (hence the this.top=)
// This function will never be called again.
return (this.top = offsetTop - navOuterHeight - sideBarMargin);
},
bottom: function () {
// We can't cache the height of the footer, since it could change
// when the window is resized. This function will be called every
// time the window is scrolled or resized
return $('.bs-footer').outerHeight(true)
}
}
})
setTimeout(function () {
// Check the position of the nav box ASAP
$sideBar.affix('checkPosition')
}, 10);
setTimeout(function () {
// Check it again after a while (required for IE)
$sideBar.affix('checkPosition')
}, 100);
});
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: "a[data-toggle=tooltip]",
container: ".bs-docs-navbar .nav"
})
})
}(window.jQuery)
I think this behaves like what you want.
The key was getting all of the recalculations to happen at the right time. Nothing seemed to be checking the position of the nav box when the page was reloaded. The height of the footer also needed to be recalculated every time because the footer changes height when the page is resized.
I also had to play with the timing of things. Notice that there are two setTimeouts with different delays but the same code. This is to attempt to get the position check done soon but also wait long enough for IE.
See the comments in the code for more details.
JSFiddle: http://jsfiddle.net/jdwire/2XXRF/25/
Full Screen Result: http://fiddle.jshell.net/jdwire/2XXRF/25/show/light/
You are using javascript from Twitter's Docs. The first comments of these scripts are:
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT // IT'S ALL JUST JUNK
FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++
These script handle problem / fixes for this pages only. Try to fix your problems with the original Bootstrap plugins or extend them for you specific situation.
Also read this questions which handle similar problems:
Bootstrap affix navbar for single page with scrollspy and page anchors
Bootstrap 3 - Scrollspy with sidebar
Bootstrap 3RC1 + Side Panel + Affix
I think you could simplify this a lot by using and understanding the relevant portions of the CSS and JavaScript from the docs.
The most complex part is the #sidebar CSS. Using .affix will remove the sidebar from the typical flow of the page, so you need to set a specific width for the #sidebar. The CSS handles the 3 cases for the sidebar position (affix, affix-top and affix-bottom). 2 different media queries are used so that the sidebar affix is only applied on larger screens >992px, and slightly wider on >1200px..
CSS
.affix-top,.affix{
position: static;
}
#media screen and (min-width: 992px) {
#sidebar .nav > .active > ul {
display: block;
}
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix,
#sidebar.affix-bottom {
width: 228px;
}
#sidebar.affix {
position: fixed;
top: 220px;
}
#sidebar.affix-bottom {
position: absolute;
}
}
#media screen and (min-width: 1200px) {
#sidebar.affix-bottom,
#sidebar.affix {
width: 235px;
}
}
The other important part is the javascript that calculates the height of the header (#masthead) above the sidebar, and footer below the sidebar. These heights are used to determine where affix will become sticky at the top, and return to absolute position at the bottom when the footer is visible in the viewport.
JavaScript
$('#sidebar').affix({
offset: {
top: function () {
var navOuterHeight = $('#masthead').height();
return this.top = navOuterHeight;
},
bottom: function () {
return (this.bottom = $('footer').outerHeight(true))
}
}
});
Here is a working example / template: http://bootply.com/84981