Related
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>
How to create a CSS based modal popup with optional JavaScript? The solution should be mostly CSS based. I looked at some of the CSS only solutions, and they change the page URL. This question is intended to provide alternatives. For example, it's possible to create a CSS based modal popup with the :active and :focus selectors. It's also necessary to use the object tag for nesting anchors. A solution is posted below.
This solution works by using the :active, :focus css selectors to show the modal. To hide the modal, focus is transferred to a different anchor from the one which triggered it. object tag is used to nest anchors. JavaScript is optional, but preferred, for best operation.
document.addEventListener('DOMContentLoaded', e => Array.prototype.forEach.call(document.getElementsByClassName('no-drag'), l => l.addEventListener('dragstart', e => e.preventDefault())))
body {
background: #dfd;
}
.btn {
display: inline-block;
box-sizing: border-box;
margin: .2em;
border: .2em solid;
border-radius: .6em;
padding: .3em;
text-align: center;
text-decoration: none;
font-family: 'MS Shell Dlg 2', Arial;
cursor: pointer;
}
.btn-green {
border-color: #9b9;
background-color: #686;
color: #bdb;
}
.btn-green:hover {
border-color: #9cb;
background-color: #698;
color: #bed;
}
.modal-container {
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
z-index: 1;
cursor: default;
-webkit-transition: visibility .5s;
transition: visibility .5s;
}
.modal {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
border: .2em solid #9b9;
border-radius: .6em;
background-color: rgba(102, 136, 102, .8);
font-size: 1rem;
line-height: 1em;
overflow: hidden;
-webkit-transition: top .5s, right .5s, bottom .5s, left .5s;
transition: top .5s, right .5s, bottom .5s, left .5s;
}
.modal-header, .modal-footer {
position: absolute;
right: 1em;
left: 1em;
height: 2em;
border-radius: .3em;
background-color: rgba(102, 136, 102, .8);
padding: 0 .2em;
overflow: hidden;
}
.modal-header {
top: 1em;
}
.modal-footer {
bottom: 1em;
}
.modal-text, .modal-btn {
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: .2em;
color: #bdb;
}
.modal-text {
left: 0;
padding: .1em .3em;
line-height: 1.2em;
}
.modal-btn {
right: 0;
border-radius: .6em;
padding: .1em .6em;
background-color: rgba(85, 119, 85, .8);
line-height: 1.3em;
text-decoration: none;
}
.modal-btn:hover, .modal-btn:active, .modal-btn:focus {
background-color: rgba(119, 153, 136, .8);
color: #ced;
}
.modal-body {
position: absolute;
top: 4em;
right: 1em;
bottom: 4em;
left: 1em;
margin-right: .5em;
padding: 0 .5em;
text-align: justify;
overflow: auto;
}
.modal-body:after {
content: "";
display: block;
height: .5em;
}
.modal-show:active > .modal-container, .modal-show:focus > .modal-container {
visibility: visible;
}
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#media (min-width: 320px) {
/* Extra Extra Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#media (min-width: 480px) {
/* Extra Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#media (min-width: 576px) {
/* Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: .5em;
right: .5em;
bottom: .5em;
left: .5em;
}
}
#media (min-width: 768px) {
/* Medium */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 1.5em;
right: 1.5em;
bottom: 1.5em;
left: 1.5em;
}
}
#media (min-width: 992px) {
/* Large */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 3em;
right: 3em;
bottom: 3em;
left: 3em;
}
}
#media (min-width: 1200px) {
/* Extra Large */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 6em;
right: 6em;
bottom: 6em;
left: 6em;
}
}
<a class="btn btn-green modal-show no-drag" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false" draggable="false">
Modal
<div class="modal-container">
<div class="modal">
<object class="modal-header">
<div class="modal-text">Modal Dialog</div>
<a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">x</a>
</object>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ornare nisi, ac aliquam erat. Vestibulum rhoncus, ipsum vitae lobortis pellentesque, odio lorem convallis lorem, nec malesuada dolor magna vitae metus. Duis varius mi vel nunc lobortis blandit. Duis eu posuere tortor. Etiam ac arcu finibus, suscipit sem nec, pulvinar enim. Aliquam pellentesque arcu nec sem iaculis, vitae convallis purus imperdiet. Aenean et dolor a nulla placerat facilisis eget non arcu.
Duis venenatis nulla nec augue vulputate, vel dapibus dui accumsan. Curabitur quis purus vitae lectus cursus fermentum at vehicula turpis. Ut vel facilisis mauris. Duis accumsan, enim sed egestas elementum, orci mi mollis tellus, vel luctus tortor augue gravida est. Nulla at lorem sed elit facilisis interdum. Duis mattis non sapien at laoreet. Sed suscipit elit ut tellus laoreet, sit amet gravida nunc mollis. Nam ullamcorper est quis facilisis scelerisque. Duis nulla diam, blandit sed commodo quis, blandit id felis. Nam eleifend elit et orci aliquet gravida. Donec at commodo diam. Proin vehicula auctor gravida.
Vivamus finibus tempus lobortis. Integer convallis neque non ex placerat porta. Fusce a purus maximus, sollicitudin libero eu, vulputate nibh. Nullam pulvinar enim et purus tincidunt porta. Mauris diam enim, volutpat quis urna sed, rhoncus convallis ante. Vestibulum mollis metus eu dui elementum varius. Vestibulum sodales massa eget viverra malesuada. Vestibulum eget lacinia nunc.
Donec mattis lobortis lorem ac tempor. Donec iaculis, felis eu imperdiet accumsan, ex neque laoreet velit, vitae egestas felis diam vitae massa. Aenean maximus magna velit, vel mattis tortor dapibus sed. Cras vehicula fringilla nulla, eget mattis nibh. Quisque lacinia convallis massa, a consectetur nibh viverra id. Donec quis mauris vitae mi rhoncus lacinia. Ut metus felis, cursus et risus at, fringilla mattis dui. Vestibulum sollicitudin facilisis hendrerit. Morbi a risus nisl. Donec sed gravida turpis. Nulla hendrerit dui mollis dui accumsan, eget facilisis metus vestibulum. Sed vel molestie eros. Quisque ut felis purus. Donec nec bibendum quam, ac accumsan risus. Donec blandit eu ante sollicitudin rutrum. In vitae iaculis est, ac molestie nunc.
Nunc eu justo id dui ultricies facilisis quis eu tortor. Phasellus eget nulla quis elit fringilla maximus. Suspendisse tortor justo, tempor vel accumsan in, suscipit non leo. Pellentesque non gravida sapien. Sed vel ex vel dui tempor pellentesque a eget elit. Pellentesque gravida ligula quis mollis vestibulum. Quisque a nibh id nibh mollis tincidunt. Proin ex eros, sagittis a tellus vel, auctor rutrum arcu. Integer quam erat, congue non tellus vitae, fermentum suscipit metus. Cras quis mi id ante maximus cursus sit amet ac libero.
</div>
<object class="modal-footer">
<a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">Close</a>
</object>
</div>
</div>
</a>
There is a new HTML element called <dialog>. Its support is quite recent but there is a polyfill.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/dialog
Here is an example for you:
<dialog id="my-dialog">
<p>Hello from my dialog</p>
<button id="hide-button">Hide dialog</button>
</dialog>
<button id="show-button">Show dialog</button>
<script>
const showButton = document.querySelector('#show-button');
const hideButton = document.querySelector('#hide-button');
const dialog = document.querySelector('#my-dialog');
showButton.addEventListener('click', () => {
dialog.showModal();
});
hideButton.addEventListener('click', () => {
dialog.close();
});
</script>
//obiekt TopBottomBar
function TopBottomBar(obj) {
//properties
this.position = obj.position;
this.message = obj.message;
this.link = obj.link;
this.baseDiv = this.createNewBar();
}
//methods
TopBottomBar.prototype.show = function(){
var allNodes = document.body.childNodes;
console.log(!document.getElementById('topBottomBar'));
if(this.position === 'top' && !document.getElementById('topBottomBar'))
{
document.body.insertBefore(this.baseDiv, allNodes[0]);
this.baseDiv.className = ' top-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
}else if(this.position === 'bottom' && !document.getElementById('topBottomBar'))
{
document.body.insertBefore(this.baseDiv, allNodes[allNodes.length - 1].nextSibling);
this.baseDiv.className = 'bottom-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
}else{
console.log('Ziomus bar istnieje, tymczasowa wiadomość');
return;
}
}
TopBottomBar.prototype.createNewBar = function(){
var baseDiv = document.createElement("div");
var button = document.createElement("a");
button.href = this.link;
var icon = document.createElement("i");
icon.className += 'fa fa-btc';
button.id += 'buttonlink';
var textButton = document.createTextNode(this.message);
var span = document.createElement("span");
var closeButton = document.createTextNode("X");
span.id += 'closelink';
//dodanie w kolejnosci, ikona, przycisk, X zamkniecia
span.appendChild(closeButton);
button.appendChild(textButton);
baseDiv.appendChild(icon);
baseDiv.appendChild(button);
baseDiv.appendChild(span);
baseDiv.id += 'topBottomBar';
if(this.position === 'top'){
baseDiv.className += 'top-fixed';
}
if(this.position === 'bottom'){
baseDiv.className += 'bottom-fixed';
}
return baseDiv;
}
TopBottomBar.prototype.hide = function(){
var elementToDelete = document.getElementById('topBottomBar');
document.body.removeChild(elementToDelete);
}
var topBarparameters = {
message: "Get Widget",
position: "top",
link: '#'
}
var bottomBarparameters = {
message: "Get Widget",
position: "bottom",
link: '#'
}
var upBar = new TopBottomBar(topBarparameters);
var bottomBar = new TopBottomBar(bottomBarparameters);
document.getElementById('up').addEventListener('click', upBar.show.bind(upBar));
document.getElementById('down').addEventListener('click', bottomBar.show.bind(bottomBar));
body
{
background-image: url('background.png');
font-size: 20px;
font-family: Open Sans,sans-serif;
position: relative;
}
#nav
{
position: relative;
font-size: 25px;
width: 100%;
height: 1.5em;
background-color: #C21B1B;
padding-top: 10px;
text-align: center;
}
#nav a
{
text-decoration: none;
font-family: sans-serif;
color: black;
border: 2px solid black;
border-radius: 20px;
display: block;
background-color: #4123C0;
width: 8em;
margin: 0 auto 0 auto;
}
#nav a:hover
{
background-color: #2001A0;
color: white;
}
#container
{
width: 75%;
margin: 0 auto 0 auto;
padding: 10px 0 0 0;
}
#footer
{
width: 100%;
height: 3em;
background-color: #372323;
text-align: center;
color: white;
padding-top: 10px;
}
#topBottomBar
{
color: #f4f4f4!important;
background: #363d4d!important;
display: block;
white-space: nowrap!important;
overflow: hidden;
padding: 5px 42px!important;
text-align: center!important;
left: 0;
right: 0;
position: fixed;
font-size: 0;
z-index: 30000;
}
#topBottomBar.top-animation{
-webkit-transition: top 2s ease;
transition: top 2s ease;
top: 0px;
}
#topBottomBar.bottom-animation{
-webkit-transition: bottom 2s ease;
transition: bottom 2s ease;
bottom: 0px;
}
#topBottomBar {
margin: 0;
padding: 0;
border: 0;
box-sizing: content-box!important;
box-shadow: none;
background-clip: padding-box!important;
line-height: 1.2;
vertical-align: middle;
text-align: left;
font-weight: 400;
font-family: inherit;
font-style: normal;
letter-spacing: normal;
text-shadow: none;
text-transform: none;
float: none;
z-index: 2147483635;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
filter: none;
}
#topBottomBar #buttonlink
{
display: inline-block;
text-decoration: none;
cursor: pointer;
line-height: 32px;
font-size: 14px;
font-weight: 700;
max-width: 317px;
text-align: center;
border-radius: 2px;
vertical-align: middle;
padding: 0 20px;
color: #ffffff!important;
background: #ffcd53!important;
font-family: inherit;
}
#topBottomBar .fa{
line-height: 1;
vertical-align: middle;
display: inline-block;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 22px;
height: 22px;
width: 22px;
color: #d3d3d3!important;
text-indent: 0!important;
top: 0!important;
left: 0!important;
padding: 10px;
background: 0 0!important;
z-index: -1;
position: absolute;
display: block!important;
text-decoration: none!important;
opacity: .5!important;
}
#topBottomBar .fa:hover
{
animation: colorChange 2s;
}
#keyframes colorChange{
from {color: #c2c2c2;}
to {color: #FFFFFF;}
}
#topBottomBar #closelink
{
display: inline-block;
vertical-align: middle;
font-size: 22px;
height: 22px;
width: 22px;
cursor: pointer;
position: absolute;
padding: 10px;
right: 0;
top: 0;
transition: transform 200ms,opacity 200ms!important;
transition-property: transform, opacity;
transition-duration: 200ms, 200ms;
transition-timing-function: initial, initial;
transition-delay: initial, initial;
}
#topBottomBar #closelink:hover{
animation: colorChange 1s;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
}
#topBottomBar .top-fixed
{
top:-42px !important;
}
.bottom-fixed
{
bottom: -42px!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Bar effectschange</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/font-awesome-4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="nav">
Get new version
</div>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac blandit lectus. In hac habitasse platea dictumst. Aenean metus lorem, tincidunt eu enim et, rutrum vehicula sem. Vivamus scelerisque viverra nisl vitae condimentum. Proin ultricies aliquet molestie. Proin faucibus quam in felis egestas malesuada. Fusce convallis leo sem, sed laoreet est eleifend at. Nullam rutrum massa lacus, vel viverra odio consequat eu. Curabitur pharetra ligula auctor pretium placerat. Nulla non arcu porta, placerat lacus vel, pretium tellus. Phasellus tempor, massa quis condimentum bibendum, erat mi rhoncus mauris, sit amet fringilla elit leo id erat. Sed vehicula tellus quis turpis mollis auctor. Praesent quis tempor lectus. Nullam ut tincidunt odio, vitae varius magna.</p>
<p>Duis vel placerat magna. Morbi ac cursus tortor. Pellentesque consequat, turpis ut mollis dictum, arcu diam sodales nisi, at hendrerit nunc velit vel metus. Mauris luctus sed dolor ac feugiat. In luctus erat vel fringilla rhoncus. Nulla id orci maximus, hendrerit nisl varius, hendrerit massa. Maecenas velit mauris, dictum malesuada massa id, varius lobortis orci. Vivamus quis placerat lorem. Suspendisse pellentesque mattis nunc sed semper. Proin et magna suscipit, aliquam ligula et, placerat est. Etiam tempor augue orci, et aliquet erat ultricies efficitur. Vivamus vitae fermentum tortor, nec porttitor ligula. Integer vel dapibus nunc. Vestibulum quis eros pretium, euismod velit id, dapibus sem.</p>
<button id="up">Up</button>
<i class="fa fa-btc" aria-hidden="true"></i>
<button id="down">Down</button>
<p>Aenean lorem enim, condimentum quis augue ultrices, molestie volutpat nibh. Praesent metus mi, dapibus in commodo non, mattis nec dolor. Phasellus a urna sem. Pellentesque sem justo, semper sed iaculis sed, mollis ac risus. Fusce et consectetur nisl, nec fringilla sem. Sed egestas lorem eros, a accumsan sem commodo vitae. Nulla porta, turpis id eleifend facilisis, nibh tellus feugiat diam, sit amet convallis leo diam in sem. Praesent venenatis vitae ante at bibendum. Morbi in mauris quam. Nam quis eros ullamcorper, porttitor elit vitae, hendrerit neque.</p>
<p>Vivamus a bibendum neque. Pellentesque vestibulum id magna at ornare. Sed volutpat molestie dolor, vitae congue ipsum pellentesque at. Duis ornare nunc in lorem ullamcorper rhoncus. Maecenas dictum purus massa, et pulvinar erat maximus ac. Pellentesque in diam consequat, vehicula orci porta, condimentum leo. Morbi ut dui sed massa accumsan commodo. Sed nibh eros, iaculis quis tellus ut, ultricies placerat nisi. Curabitur eu rhoncus ex. Sed interdum tristique purus nec commodo.</p>
<p><p>
</p>Suspendisse vulputate mauris et turpis venenatis congue. Nullam eu rutrum odio, sed aliquet nibh. Aliquam porttitor ultrices laoreet. Pellentesque pulvinar molestie malesuada. Sed pretium vestibulum dolor, scelerisque posuere velit tincidunt non. Sed blandit eleifend dapibus. Ut erat tortor, cursus non consequat pharetra, suscipit eu felis. Proin sit amet massa massa. Sed urna erat, molestie a ante ac, imperdiet cursus nunc. Proin iaculis eros quis diam tincidunt, porttitor convallis nunc luctus. Phasellus vestibulum, sem sit amet sodales ultricies, lorem tortor tempor nisl, non lacinia eros augue sed ex.</p>
</div>
<div id="footer">
<p>Join us in development! </p>
</div>
<script src="scripts/script.js"></script>
</body>
</html>
I am trying to animate a bar made dynamically in javascript, by using a CSS transition. The animation doesn't work. First I create my bar with javascript, and show it based on a click event.
I read that transition with jaascript is added as extra class to existing element. Is it possible that when I make element with javascript and also add the id and class with javascript, the transition happens faster than the original style and it doesn't appear to run at all?
TopBottomBar.prototype.show = function(){
var allNodes = document.body.childNodes;
console.log(!document.getElementById('topBottomBar'));
if(this.position === 'top' && !document.getElementById('topBottomBar')) {
document.body.insertBefore(this.baseDiv, allNodes[0]);
this.baseDiv.className = ' top-animation';
document.getElementById('closelink').addEventListener('click',this.hide.bind(this));
} else if(this.position === 'bottom' && !document.getElementById('topBottomBar')) {
document.body.insertBefore(this.baseDiv, allNodes[allNodes.length - 1].nextSibling);
this.baseDiv.className = 'bottom-animation';
document.getElementById('closelink').addEventListener('click', this.hide.bind(this));
} else {
console.log('Ziomus bar istnieje, tymczasowa wiadomość');
return;
}
}
TopBottomBar.prototype.createNewBar = function(){
var baseDiv = document.createElement("div");
var button = document.createElement("a");
button.href = this.link;
var icon = document.createElement("i");
icon.className += 'fa fa-btc';
button.id += 'buttonlink';
var textButton = document.createTextNode(this.message);
var span = document.createElement("span");
var closeButton = document.createTextNode("X");
span.id += 'closelink';
span.appendChild(closeButton);
button.appendChild(textButton);
baseDiv.appendChild(icon);
baseDiv.appendChild(button);
baseDiv.appendChild(span);
baseDiv.id += 'topBottomBar';
if (this.position === 'top') {
baseDiv.className += 'top-fixed';
}
if(this.position === 'bottom') {
baseDiv.className += 'bottom-fixed';
}
return baseDiv;
}
top-animation and bottom-animation are my css transitions
#topBottomBar.top-animation {
-webkit-transition: top 2s ease;
transition: top 2s ease;
top: 0px;
}
The starting point for the top property is -42px, which is the height of my bar. I tested it on an easy example with one div hardcoded in HTML and everything was fine. The div went from -42px top to 0.
EDITED, added whole code, what i want to achieve is to make this bar animated with transition. There are 2 buttons which show bar.
I am having problem wrapping all contents inside a parent.My jQuery is working fine. What I intent to do is to make slideshow. Slideshow is working perfect but my problem is to wrap all content inside the "The red box".Rightnow section with id "allprojects" doesn't expand to fill all the contents of sections inside it. Ideally "#allprojects" should contract or expand according to content. This is how it appears
As I missing something obvious? please help me.
Bellow is my HTML.
<div id="projects">
<section id="allprojects" >
<section id="projectone" class="show">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo semper nulla, id ultricies erat tincidunt at. Vivamus malesuada justo eu massa fringilla, a lacinia justo hendrerit. Integer ornare ipsum non dictum suscipit. Quisque feugiat eleifend posuere. Maecenas porttitor non neque in tempus. Aliquam
</section>
<section id="projecttwo">
Nam quis ante tellus. Nullam iaculis elementum odio at convallis. Duis sodales porttitor dolor sed lacinia. Mauris sodales, ipsum eu tristique varius, erat mauris luctus tellus, ultrices viverra leo dui at nunc. Sed ac malesuada tellus. Nam quis lacus sit amet nibh egestas adipiscing. Interdum et malesuada fames ac ante
</section>
<section id="projectthree">
Nulla vitae volutpat nunc. Integer ornare enim vitae euismod viverra. Pellentesque ac hendrerit orci. Praesent eleifend augue luctus magna fringilla posuere. Nulla tincidunt volutpat semper. Morbi malesuada tempus vehicula. Proin non posuere metus. Aenean condimentum velit lorem. Donec at suscipit leo. Morbi
</section>
<section id="projectfour">
Vestibulum mattis metus rhoncus enim sollicitudin vehicula. Duis id nisl eget neque laoreet sagittis vitae eu justo. Sed et elit sit amet augue dictum dignissim. Cras neque ligula, dictum sed nibh ut, sodales malesuada mi. Duis feugiat semper nibh eget feugiat. In vestibulum augue nec felis tincidunt pulvinar
</section>
<span class="prev">«</span>
<span class="next">»</span>
</section>
</div>
CSS:
html{
background-size: cover;
background-color: #F2F2F2 ;
max-height: 100%;
margin: 0 auto;
}
body{
max-height: 100%;
background-color: #F2F2F2 ;
margin: 0 auto;
}
#allprojects section{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
.show{
opacity: 1 !important;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 26%;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 26%;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#allprojects{
font-family: 'Gabriela', serif;
text-align: justify;
width: 40%;
font-size: 1.7vw;
color: #000;
line-height: 150%;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: auto;
padding: 4%;
background-color: #F2F2F2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 5px solid #D8262E;
display: block;
}
#allprojects section{
font-family: 'Gabriela', serif;
text-align: justify;
width: 40%;
font-size: 1.7vw;
color: #000;
line-height: 150%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
You have positioned your sections with absolute. This takes them out of the natural flow and therefore, the wrapper has no idea of their volume and collapses.
You'll either need to specify the size of the slider, or do some trick like,
height: 0px; padding-bottom: 50%;
And hack it to get the ratio you want.
Elements that are absolute positioned are taken out of the DOM flow.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/?redirect_from_locale=hr#Absolute_and_fixed
Your parent container does not know the height of the child elements, which is why the red box does not clear them.
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