<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-fixed-top navbar-default custom-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-offcanvas navmenu-fixed-left offcanvas">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navbar-nav">
<li class="active"><a href="./">Off canvas navbar</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Offcanvas Navbar example</h1>
<p>This example demonstrates using the offcanvas plugin with the navbar.</p>
</div>
<p>
By default the navbar is show on the right side of the screen. You can show it on the left side instead by
adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
</p>
<div class="jumbotron">
<h1>Offcanvas Navbar example</h1>
<p>This example demonstrates using the offcanvas plugin with the navbar.</p>
</div>
<p>
By default the navbar is show on the right side of the screen. You can show it on the left side instead by
adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
</p>
<div class="jumbotron">
<h1>Offcanvas Navbar example</h1>
<p>This example demonstrates using the offcanvas plugin with the navbar.</p>
</div>
<p>
By default the navbar is show on the right side of the screen. You can show it on the left side instead by
adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
</p>
<div class="jumbotron">
<h1>Offcanvas Navbar example</h1>
<p>This example demonstrates using the offcanvas plugin with the navbar.</p>
</div>
<p>
By default the navbar is show on the right side of the screen. You can show it on the left side instead by
adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
</p>
<div class="jumbotron">
<h1>Offcanvas Navbar example</h1>
<p>This example demonstrates using the offcanvas plugin with the navbar.</p>
</div>
<p>
By default the navbar is show on the right side of the screen. You can show it on the left side instead by
adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
</p>
<div class="jumbotron">
<h1>Offcanvas Navbar example</h1>
<p>This example demonstrates using the offcanvas plugin with the navbar.</p>
</div>
<p>
By default the navbar is show on the right side of the screen. You can show it on the left side instead by
adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
</p>
</div> <!-- /container -->
/*!
* Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap)
* Copyright 2011-2014 Arnold Daniels.
* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
*/
.custom-navbar .navbar-right {
float: right;
padding-right: 15px;
}
.custom-navbar .nav.navbar-nav.navbar-right li {
float: right;
}
.custom-navbar .nav.navbar-nav.navbar-right li > a {
padding:8px 5px;
}
.custom-navbar .navbar-toggle {
float: left
}
.custom-navbar .navbar-header {
float: left;
width: auto!important;
}
.custom-navbar .navbar-collapse {
clear: both;
float: none;
}
.nav-tabs-bottom {
border-bottom: 0;
border-top: 1px solid #dddddd;
}
.nav-tabs-bottom > li {
margin-bottom: 0;
margin-top: -1px;
}
.nav-tabs-bottom > li > a {
border-radius: 0 0 4px 4px;
}
.nav-tabs-bottom > li > a:hover,
.nav-tabs-bottom > li > a:focus,
.nav-tabs-bottom > li.active > a,
.nav-tabs-bottom > li.active > a:hover,
.nav-tabs-bottom > li.active > a:focus {
border: 1px solid #dddddd;
border-top-color: transparent;
}
.nav-tabs-left {
border-bottom: 0;
border-right: 1px solid #dddddd;
}
.nav-tabs-left > li {
margin-bottom: 0;
margin-right: -1px;
float: none;
}
.nav-tabs-left > li > a {
border-radius: 4px 0 0 4px;
margin-right: 0;
margin-bottom: 2px;
}
.nav-tabs-left > li > a:hover,
.nav-tabs-left > li > a:focus,
.nav-tabs-left > li.active > a,
.nav-tabs-left > li.active > a:hover,
.nav-tabs-left > li.active > a:focus {
border: 1px solid #dddddd;
border-right-color: transparent;
}
.row > .nav-tabs-left {
padding-right: 0;
padding-left: 15px;
margin-right: -1px;
position: relative;
z-index: 1;
}
.row > .nav-tabs-left + .tab-content {
border-left: 1px solid #dddddd;
}
.nav-tabs-right {
border-bottom: 0;
border-left: 1px solid #dddddd;
}
.nav-tabs-right > li {
margin-bottom: 0;
margin-left: -1px;
float: none;
}
.nav-tabs-right > li > a {
border-radius: 0 4px 4px 0;
margin-left: 0;
margin-bottom: 2px;
}
.nav-tabs-right > li > a:hover,
.nav-tabs-right > li > a:focus,
.nav-tabs-right > li.active > a,
.nav-tabs-right > li.active > a:hover,
.nav-tabs-right > li.active > a:focus {
border: 1px solid #dddddd;
border-left-color: transparent;
}
.row > .nav-tabs-right {
padding-left: 0;
padding-right: 15px;
}
.navmenu,
.navbar-offcanvas {
width: 200px;
height: auto;
border-width: 1px;
border-style: solid;
border-radius: 4px;
}
.navmenu-fixed-left,
.navmenu-fixed-right,
.navbar-offcanvas {
position: fixed;
z-index: 1040;
top: 0;
bottom: 0;
overflow-y: auto;
border-radius: 0;
}
.navmenu-fixed-left,
.navbar-offcanvas.navmenu-fixed-left {
left: 0;
right: auto;
border-width: 0 1px 0 0;
}
.navmenu-fixed-right,
.navbar-offcanvas {
left: auto;
right: 0;
border-width: 0 0 0 1px;
}
.navmenu-nav {
margin-bottom: 10px;
}
.navmenu-nav.dropdown-menu {
position: static;
margin: 0;
padding-top: 0;
float: none;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
.navbar-offcanvas .navbar-nav {
margin: 0;
}
@media (min-width: 768px) {
.navbar-offcanvas {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-offcanvas.offcanvas {
position: static;
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-offcanvas .navbar-nav.navbar-left:first-child {
margin-left: -15px;
}
.navbar-offcanvas .navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-offcanvas .navmenu-brand {
display: none;
}
}
.navmenu-brand {
display: block;
font-size: 18px;
line-height: 20px;
padding: 10px 15px;
margin: 10px 0;
}
.navmenu-brand:hover,
.navmenu-brand:focus {
text-decoration: none;
}
.navmenu-default,
.navbar-default .navbar-offcanvas {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navmenu-default .navmenu-brand,
.navbar-default .navbar-offcanvas .navmenu-brand {
color: #777777;
}
.navmenu-default .navmenu-brand:hover,
.navbar-default .navbar-offcanvas .navmenu-brand:hover,
.navmenu-default .navmenu-brand:focus,
.navbar-default .navbar-offcanvas .navmenu-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navmenu-default .navmenu-text,
.navbar-default .navbar-offcanvas .navmenu-text {
color: #777777;
}
.navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navmenu-default .navmenu-nav > .open > a,
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
.navmenu-default .navmenu-nav > .open > a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
.navmenu-default .navmenu-nav > .open > a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
background-color: #e7e7e7;
color: #555555;
}
.navmenu-default .navmenu-nav > .open > a .caret,
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
.navmenu-default .navmenu-nav > .open > a:hover .caret,
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
.navmenu-default .navmenu-nav > .open > a:focus .caret,
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navmenu-default .navmenu-nav > .dropdown > a .caret,
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navmenu-default .navmenu-nav.dropdown-menu,
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
background-color: #e7e7e7;
}
.navmenu-default .navmenu-nav.dropdown-menu > .divider,
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
background-color: #f8f8f8;
}
.navmenu-default .navmenu-nav.dropdown-menu > .active > a,
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
background-color: #d7d7d7;
}
.navmenu-default .navmenu-nav > li > a,
.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
color: #777777;
}
.navmenu-default .navmenu-nav > li > a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
.navmenu-default .navmenu-nav > li > a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navmenu-default .navmenu-nav > .active > a,
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
.navmenu-default .navmenu-nav > .active > a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
.navmenu-default .navmenu-nav > .active > a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navmenu-default .navmenu-nav > .disabled > a,
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
.navmenu-default .navmenu-nav > .disabled > a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
.navmenu-default .navmenu-nav > .disabled > a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navmenu-inverse,
.navbar-inverse .navbar-offcanvas {
background-color: #222222;
border-color: #080808;
}
.navmenu-inverse .navmenu-brand,
.navbar-inverse .navbar-offcanvas .navmenu-brand {
color: #999999;
}
.navmenu-inverse .navmenu-brand:hover,
.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
.navmenu-inverse .navmenu-brand:focus,
.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
color: #ffffff;
background-color: transparent;
}
.navmenu-inverse .navmenu-text,
.navbar-inverse .navbar-offcanvas .navmenu-text {
color: #999999;
}
.navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navmenu-inverse .navmenu-nav > .open > a,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
.navmenu-inverse .navmenu-nav > .open > a:hover,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
.navmenu-inverse .navmenu-nav > .open > a:focus,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
background-color: #080808;
color: #ffffff;
}
.navmenu-inverse .navmenu-nav > .open > a .caret,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
.navmenu-inverse .navmenu-nav > .open > a:hover .caret,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
border-top-color: #999999;
border-bottom-color: #999999;
}
.navmenu-inverse .navmenu-nav.dropdown-menu,
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
background-color: #080808;
}
.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
background-color: #222222;
}
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
background-color: #000000;
}
.navmenu-inverse .navmenu-nav > li > a,
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
color: #999999;
}
.navmenu-inverse .navmenu-nav > li > a:hover,
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
.navmenu-inverse .navmenu-nav > li > a:focus,
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navmenu-inverse .navmenu-nav > .active > a,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
.navmenu-inverse .navmenu-nav > .active > a:hover,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
.navmenu-inverse .navmenu-nav > .active > a:focus,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navmenu-inverse .navmenu-nav > .disabled > a,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
.navmenu-inverse .navmenu-nav > .disabled > a:hover,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
.navmenu-inverse .navmenu-nav > .disabled > a:focus,
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
.offcanvas {
display: none;
}
.offcanvas.in {
display: block;
}
@media (max-width: 767px) {
.offcanvas-xs {
display: none;
}
.offcanvas-xs.in {
display: block;
}
}
@media (max-width: 991px) {
.offcanvas-sm {
display: none;
}
.offcanvas-sm.in {
display: block;
}
}
@media (max-width: 1199px) {
.offcanvas-md {
display: none;
}
.offcanvas-md.in {
display: block;
}
}
.offcanvas-lg {
display: none;
}
.offcanvas-lg.in {
display: block;
}
.canvas-sliding {
-webkit-transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
transition: top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;
}
.offcanvas-clone {
height: 0px !important;
width: 0px !important;
overflow: hidden !important;
border: none !important;
margin: 0px !important;
padding: 0px !important;
position: absolute !important;
top: auto !important;
left: auto !important;
bottom: 0px !important;
right: 0px !important;
opacity: 0 !important;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.navbar-toggle .icon-bar:nth-of-type(2) {
top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
top: 2px;
}
.navbar-toggle .icon-bar {
position: relative;
transition: all 500ms ease-in-out;
}
.navbar-toggle.active .icon-bar:nth-of-type(1) {
top: 6px;
transform: rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-of-type(2) {
background-color: transparent;
}
.navbar-toggle.active .icon-bar:nth-of-type(3) {
top: -6px;
transform: rotate(-45deg);
}
//support for navbar toggle
$(document).ready(function () {
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active");
});
//this is not working as expected in bootsnip. This is to reset the navbar-toggle when window resizes
if (window.matchMedia('(min-width: 768px)').matches) {
$(".navbar-toggle").removeClass("active");
}
$(document).on("click", function () {
$(".navbar-toggle").removeClass("active");
});
});
/* ========================================================================
* Bootstrap: offcanvas.js v3.1.3
* http://jasny.github.io/bootstrap/javascript/#offcanvas
* ========================================================================
* Copyright 2013-2014 Arnold Daniels
*
* Licensed under the Apache License, Version 2.0 (the "License")
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================================== */
+function ($) { "use strict";
// OFFCANVAS PUBLIC CLASS DEFINITION
// =================================
var OffCanvas = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, OffCanvas.DEFAULTS, options)
this.state = null
this.placement = null
if (this.options.recalc) {
this.calcClone()
$(window).on('resize', $.proxy(this.recalc, this))
}
if (this.options.autohide)
$(document).on('click', $.proxy(this.autohide, this))
if (this.options.toggle) this.toggle()
if (this.options.disablescrolling) {
this.options.disableScrolling = this.options.disablescrolling
delete this.options.disablescrolling
}
}
OffCanvas.DEFAULTS = {
toggle: true,
placement: 'auto',
autohide: true,
recalc: true,
disableScrolling: true,
modal: false
}
OffCanvas.prototype.offset = function () {
switch (this.placement) {
case 'left':
case 'right': return this.$element.outerWidth()
case 'top':
case 'bottom': return this.$element.outerHeight()
}
}
OffCanvas.prototype.calcPlacement = function () {
if (this.options.placement !== 'auto') {
this.placement = this.options.placement
return
}
if (!this.$element.hasClass('in')) {
this.$element.css('visiblity', 'hidden !important').addClass('in')
}
var horizontal = $(window).width() / this.$element.width()
var vertical = $(window).height() / this.$element.height()
var element = this.$element
function ab(a, b) {
if (element.css(b) === 'auto') return a
if (element.css(a) === 'auto') return b
var size_a = parseInt(element.css(a), 10)
var size_b = parseInt(element.css(b), 10)
return size_a > size_b ? b : a
}
this.placement = horizontal >= vertical ? ab('left', 'right') : ab('top', 'bottom')
if (this.$element.css('visibility') === 'hidden !important') {
this.$element.removeClass('in').css('visiblity', '')
}
}
OffCanvas.prototype.opposite = function (placement) {
switch (placement) {
case 'top': return 'bottom'
case 'left': return 'right'
case 'bottom': return 'top'
case 'right': return 'left'
}
}
OffCanvas.prototype.getCanvasElements = function() {
// Return a set containing the canvas plus all fixed elements
var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
var fixed_elements = canvas.find('*').filter(function() {
return $(this).css('position') === 'fixed'
}).not(this.options.exclude)
return canvas.add(fixed_elements)
}
OffCanvas.prototype.slide = function (elements, offset, callback) {
// Use jQuery animation if CSS transitions aren't supported
if (!$.support.transition) {
var anim = {}
anim[this.placement] = "+=" + offset
return elements.animate(anim, 350, callback)
}
var placement = this.placement
var opposite = this.opposite(placement)
elements.each(function() {
if ($(this).css(placement) !== 'auto')
$(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
if ($(this).css(opposite) !== 'auto')
$(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
})
this.$element
.one($.support.transition.end, callback)
.emulateTransitionEnd(350)
}
OffCanvas.prototype.disableScrolling = function() {
var bodyWidth = $('body').width()
var prop = 'padding-' + this.opposite(this.placement)
if ($('body').data('offcanvas-style') === undefined) {
$('body').data('offcanvas-style', $('body').attr('style') || '')
}
$('body').css('overflow', 'hidden')
if ($('body').width() > bodyWidth) {
var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
setTimeout(function() {
$('body').css(prop, padding)
}, 1)
}
//disable scrolling on mobiles (they ignore overflow:hidden)
$('body').on('touchmove.bs', function(e) {
e.preventDefault();
});
}
OffCanvas.prototype.enableScrolling = function() {
$('body').off('touchmove.bs');
}
OffCanvas.prototype.show = function () {
if (this.state) return
var startEvent = $.Event('show.bs.offcanvas')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
this.state = 'slide-in'
this.calcPlacement();
var elements = this.getCanvasElements()
var placement = this.placement
var opposite = this.opposite(placement)
var offset = this.offset()
if (elements.index(this.$element) !== -1) {
$(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
this.$element.css(placement, -1 * offset)
this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
}
elements.addClass('canvas-sliding').each(function() {
if ($(this).data('offcanvas-style') === undefined) $(this).data('offcanvas-style', $(this).attr('style') || '')
if ($(this).css('position') === 'static') $(this).css('position', 'relative')
if (($(this).css(placement) === 'auto' || $(this).css(placement) === '0px') &&
($(this).css(opposite) === 'auto' || $(this).css(opposite) === '0px')) {
$(this).css(placement, 0)
}
})
if (this.options.disableScrolling) this.disableScrolling()
if (this.options.modal) this.toggleBackdrop()
var complete = function () {
if (this.state != 'slide-in') return
this.state = 'slid'
elements.removeClass('canvas-sliding').addClass('canvas-slid')
this.$element.trigger('shown.bs.offcanvas')
}
setTimeout($.proxy(function() {
this.$element.addClass('in')
this.slide(elements, offset, $.proxy(complete, this))
}, this), 1)
}
OffCanvas.prototype.hide = function (fast) {
if (this.state !== 'slid') return
var startEvent = $.Event('hide.bs.offcanvas')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
this.state = 'slide-out'
var elements = $('.canvas-slid')
var placement = this.placement
var offset = -1 * this.offset()
var complete = function () {
if (this.state != 'slide-out') return
this.state = null
this.placement = null
this.$element.removeClass('in')
elements.removeClass('canvas-sliding')
elements.add(this.$element).add('body').each(function() {
$(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
})
this.$element.trigger('hidden.bs.offcanvas')
}
if (this.options.disableScrolling) this.enableScrolling()
if (this.options.modal) this.toggleBackdrop()
elements.removeClass('canvas-slid').addClass('canvas-sliding')
setTimeout($.proxy(function() {
this.slide(elements, offset, $.proxy(complete, this))
}, this), 1)
}
OffCanvas.prototype.toggle = function () {
if (this.state === 'slide-in' || this.state === 'slide-out') return
this[this.state === 'slid' ? 'hide' : 'show']()
}
OffCanvas.prototype.toggleBackdrop = function (callback) {
callback = callback || $.noop;
if (this.state == 'slide-in') {
var doAnimate = $.support.transition;
this.$backdrop = $('<div class="modal-backdrop fade" />')
.insertAfter(this.$element);
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop
.one($.support.transition.end, callback)
.emulateTransitionEnd(150) :
callback()
} else if (this.state == 'slide-out' && this.$backdrop) {
this.$backdrop.removeClass('in');
$('body').off('touchmove.bs');
var self = this;
if ($.support.transition) {
this.$backdrop
.one($.support.transition.end, function() {
self.$backdrop.remove();
callback()
self.$backdrop = null;
})
.emulateTransitionEnd(150);
} else {
this.$backdrop.remove();
this.$backdrop = null;
callback();
}
} else if (callback) {
callback()
}
}
OffCanvas.prototype.calcClone = function() {
this.$calcClone = this.$element.clone()
.html('')
.addClass('offcanvas-clone').removeClass('in')
.appendTo($('body'))
}
OffCanvas.prototype.recalc = function () {
if (this.$calcClone.css('display') === 'none' || (this.state !== 'slid' && this.state !== 'slide-in')) return
this.state = null
this.placement = null
var elements = this.getCanvasElements()
this.$element.removeClass('in')
elements.removeClass('canvas-slid')
elements.add(this.$element).add('body').each(function() {
$(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
})
}
OffCanvas.prototype.autohide = function (e) {
if ($(e.target).closest(this.$element).length === 0) this.hide()
}
// OFFCANVAS PLUGIN DEFINITION
// ==========================
var old = $.fn.offcanvas
$.fn.offcanvas = function (option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.offcanvas')
var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
if (typeof option === 'string') data[option]()
})
}
$.fn.offcanvas.Constructor = OffCanvas
// OFFCANVAS NO CONFLICT
// ====================
$.fn.offcanvas.noConflict = function () {
$.fn.offcanvas = old
return this
}
// OFFCANVAS DATA-API
// =================
$(document).on('click.bs.offcanvas.data-api', '[data-toggle=offcanvas]', function (e) {
var $this = $(this), href
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
var $canvas = $(target)
var data = $canvas.data('bs.offcanvas')
var option = data ? 'toggle' : $this.data()
e.stopPropagation()
if (data) data.toggle()
else $canvas.offcanvas(option)
})
}(window.jQuery);
