<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 ---------->
<title>Text go up</title>
<link href="http://fonts.googleapis.com/css?family=Gochi+Hand|Source+Sans+Pro:400,300" rel="stylesheet" type="text/css">
<!-- BEGIN CALL GoogleFont -->
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300" rel="stylesheet" type="text/css">
<!-- END CALL GoogleFont -->
</head>
<body>
<!-- BEGIN CANVAS + ACTIVATION BUTTON -->
<!-- BEGIN SLIDEOUT BUTTON -->
<a href="#" class="bonfire-slideout-button">
<!-- BEGIN ICON --><i class="fa fa-cogs"></i><!-- END ICON -->
</a>
<div class="bonfire-slideout-button-triangle-background"></div>
<!-- END SLIDEOUT BUTTON -->
<!-- BEGIN THE SLIDEOUT -->
<div class="bonfire-slideout">
<div class="bonfire-slideout-inner">
<div class="bonfire-slideout-inner-inner">
<!-- BEGIN CLOSE BUTTON -->
<div class="bonfire-slideout-close"></div>
<!-- END CLOSE BUTTON -->
<!-- BEGIN CONTENT -->
<div class="bonfire-slideout-content">
<p style="font-size:32px;font-weight:300;">This is Text 2</p>
<p style="font-weight:300;color:#6D6A6A;">Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.
</p>
</div>
<!-- END CONTENT -->
</div>
</div>
</div>
<!-- END THE SLIDEOUT -->
<!-- END CANVAS + ACTIVATION BUTTON -->
<!-- BEGIN TITLE + CONTENT -->
<div class="entry-content">
<!-- BEGIN CONTENT -->
<p style="font-size:32px;font-weight:300;">This is Text 1</p>
<p style="font-weight:300;color:#6D6A6A;">Proin suscipit luctus orci placerat fringilla. Donec hendrerit laoreet risus eget adipiscing. Suspendisse in urna ligula, a volutpat mauris. Sed enim mi, bibendum eu pulvinar vel, sodales vitae dui. Pellentesque sed sapien lorem, at lacinia urna. In hac habitasse platea dictumst. Vivamus vel justo in leo laoreet ullamcorper non vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum ullamcorper rutrum.
</p>
<!-- BEGIN CONTENT -->
</div>
<!-- END TITLE + CONTENT -->
<div style="position:fixed;right:0;bottom:0;font-family:'Gochi Hand', cursive;color:#666;margin:0 100px 30px 0;">Show text 2 ></div>
<script>
/* show/hide slideout (triangle button) */
jQuery('.bonfire-slideout-button, .canvas-text-trigger').click(function(){
if(jQuery('.bonfire-slideout').hasClass('bonfire-slideout-active'))
{
/* enable browser scroll */
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1]);
/* hide canvas */
setTimeout(function(){
jQuery('.bonfire-slideout').removeClass('bonfire-slideout-active');
},650);
jQuery('.bonfire-slideout').removeClass('bonfire-slideout-active-translate');
return false;
}
else
{
/* disable browser scroll */
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
/* show canvas */
jQuery('.bonfire-slideout').addClass('bonfire-slideout-active');
jQuery('.bonfire-slideout').addClass('bonfire-slideout-active-translate');
return false;
}
});
/* hide slideout (X button) */
jQuery('.bonfire-slideout-close').click(
function() {
/* enable browser scroll */
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1]);
/* hide canvas */
setTimeout(function(){
jQuery('.bonfire-slideout').removeClass('bonfire-slideout-active');
},650);
jQuery('.bonfire-slideout').removeClass('bonfire-slideout-active-translate');
return false;
});
/* hide slideout (ESC button) */
jQuery(document).keyup(function(e) {
if (e.keyCode == 27) {
/* enable browser scroll */
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1]);
/* hide canvas */
setTimeout(function(){
jQuery('.bonfire-slideout').removeClass('bonfire-slideout-active');
},650);
jQuery('.bonfire-slideout').removeClass('bonfire-slideout-active-translate');
return false;
}
});
</script>
</body></html>
/* FOR YOUR CONVENIENCE AND QUICK EDITING, BELOW ARE ALL THE COLOR CUSTOMIZATION OPTIONS
**************************************************/
/* icon color */
.bonfire-slideout-button {
color:rgba(255,255,255,0.85);
}
/* icon hover color */
.bonfire-slideout-button:hover {
color:rgba(0,0,0,0.3);
}
/* triangle button background color */
.bonfire-slideout-button-triangle-background {
border-bottom-color:#13C9E7 !important;
}
/* canvas background color */
.bonfire-slideout {
background-color:#161616;
}
/* THE SLIDEOUT BUTTON
**************************************************/
/* show hand icon if text trigger */
.canvas-text-trigger {
cursor:pointer;
}
/* the button */
.bonfire-slideout-button {
font-size:28px;
text-decoration:none !important;
padding:15px 15px 15px 15px;
position:fixed;
right:0;
bottom:0;
z-index:99999999;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
-ms-transition: all .35s ease;
transition: all .35s ease;
}
/* the button background (triangle) */
.bonfire-slideout-button-triangle-background {
opacity:0.95;
border-left:100px solid transparent;
border-bottom:100px solid #fff;
width:0;
height:0;
position:fixed;
right:0;
bottom:0;
z-index:99999998;
pointer-events:none;
}
/* THE SLIDEOUT
**************************************************/
.bonfire-slideout img {
max-width:100%;
}
.bonfire-slideout {
position:fixed;
overflow:auto;
bottom:0;
left:-100%;
width:100% !important;
height:100% !important;
z-index:999;
opacity:.85;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform .8s ease, left 0s ease;
-moz-transition: -moz-transform .8s ease, left 0s ease;
-o-transition: -o-transform .8s ease, left 0s ease;
-ms-transition: -ms-transform .8s ease, left 0s ease;
transition: transform .8s ease, left 0s ease;
-webkit-overflow-scrolling: touch;
font-family:'Source Sans Pro', arial, tahoma, verdana;
font-size:;
}
.bonfire-slideout-inner {
max-width:100%;
max-height:100%;
overflow:auto;
}
.bonfire-slideout-inner-inner {
padding:40px;
}
.bonfire-slideout-active {
opacity:0.99 !important;
left:0 !important;
}
.bonfire-slideout-active-translate {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.bonfire-slideout-content {
max-width:920px;
margin:0 auto;
font-size:22px;
line-height:30px;
color:#ccc;
}
.bonfire-slideout-content p {
margin:15px;
}
/* THE CLOSE BUTTON
**************************************************/
.bonfire-slideout-close {
opacity:.3;
position:absolute;
top:0;
right:0;
cursor:pointer;
margin:20px 40px 0 0;
padding:20px;
width:36px;
height:36px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
background:url(images/close.png) no-repeat center center;
}
/* Retina display .bonfire-slideout-close */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi)
{
.bonfire-slideout-close { background-size:36px 36px !important; background:url(images/close@2x.png) no-repeat center center; }
}
.bonfire-slideout-close:hover {
opacity:.5;
}
/* MAX-WIDTH 900px
**************************************************/
@media screen and (max-width: 900px) {
.bonfire-slideout-close {
position:relative;
margin:0 auto 10px auto;
}
.bonfire-slideout-content, .bonfire-slideout-content p {
margin:10px auto;
font-size:18px;
line-height:25px;
}
.bonfire-slideout-inner-inner {
padding:10px 20px 20px 20px;
}
}
/**************************************************/
/**************************************************/
