<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="background"></div>
<div id="posts" class="col-xs-11 col-sm-4 col-md-3">
<a href="#post-1001">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1358275334l/2767052.jpg" alt="The Hunger Games">
The Hunger Games
<div class="clearfix"></div>
</a>
<a href="#post-1002">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1387141547l/2.jpg" alt="Harry Potter and the Order of the Phoenix">
Harry Potter and the Order of the Phoenix
<div class="clearfix"></div>
</a>
<a href="#post-1003">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361482611l/6.jpg" alt="Harry Potter and the Order of the Phoenix">
Harry Potter and the Goblet of Fire
<div class="clearfix"></div>
</a>
<a href="#post-1004">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1362278317l/5.jpg" alt="Harry Potter and the Prisoner of Azkaban">
Harry Potter and the Prisoner of Azkaban
<div class="clearfix"></div>
</a>
<a href="#post-1005">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361039443l/41865.jpg" alt="Twilight">
Twilight
<div class="clearfix"></div>
</a>
<a href="#post-1006">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361039191l/1.jpg" alt="Harry Potter and the Half-Blood Prince">
Harry Potter and the Half-Blood Prince
<div class="clearfix"></div>
</a>
<a href="#post-1007">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361975680l/2657.jpg" alt="To Kill a Mockingbird">
To Kill a Mockingbird
<div class="clearfix"></div>
</a>
<a href="#post-1008">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1370023538l/136251.jpg" alt="Harry Potter and the Deathly Hallows">
Harry Potter and the Deathly Hallows
<div class="clearfix"></div>
</a>
<a href="#post-1009">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1320399351l/1885.jpg" alt="Pride and Prejudice">
Pride and Prejudice
<div class="clearfix"></div>
</a>
<a href="#post-1010">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1370043634l/15881.jpg" alt="Harry Potter and the Chamber of Secrets">
Harry Potter and the Chamber of Secrets
<div class="clearfix"></div>
</a>
</div>
<div id="toggle_posts">
<h1>
<span class="glyphicon arrow-left glyphicon-chevron-up"></span>
<span>POSTS</span>
<span class="glyphicon arrow-right glyphicon-chevron-up"></span>
</h1>
</div>
<div id="comments" class="col-xs-offset-1 col-xs-11 col-sm-6 col-md-4">
<h1 class="title">
Comments
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bootsnipp'; // required: replace example with your forum shortname
var disqus_identifier = '4l0k2';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
body {
min-height: 420px;
}
#fullscreen {
position: absolute;
top: 10px;
left: 50%;
margin-left: -248px;
color: rgb(255, 255, 255);
text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8);
font-size: 1.7em;
font-weight: bold;
}
.background {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url(https://s3.amazonaws.com/ooomf-com-files/ikZyw45kT4m16vHkHe7u_9647713235_29ce0305d2_o.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#posts {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
overflow: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 100;
padding: 0px;
}
#posts a {
display: block;
padding: 20px 30px;
color: rgb(51, 51, 51);
text-decoration: none;
}
#posts a:hover {
background-color: rgba(255, 255, 255, 0.8);
}
#toggle_posts {
position: fixed;
top: 0px;
left: 0px;
width: 30px;
height: 100%;
background-color: rgb(51, 51, 51);
color: rgb(255, 255, 255);
text-align: center;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 100;
}
#toggle_posts h1 {
position: absolute;
top: 50%;
left: -63px;
font-size: 1.2em;
margin: 0px;
line-height: 1.1px;
letter-spacing: 20px;
font-weight: 700;
margin-top: -68px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#toggle_posts h1 .glyphicon.arrow-left {
position: absolute;
top: 0;
left: -40px;
margin-top: -8px;
}
#toggle_posts h1 .glyphicon.arrow-right {
position: absolute;
top: 0;
left: 156px;
margin-top: -8px;
}
#post article {
position: absolute;
top: 0px;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(51, 51, 51, 0.3);
padding: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
}
#post article.active {
margin-top: 60px;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
#post article .title,
#comments .title {
font-family: "Oswald", Arial, sans-serif;
text-transform: uppercase;
margin: 0;
padding: 25px 30px;
display: block;
border-bottom: 1px solid rgb(160, 160, 160);
}
#post article .title .close,
#comments .title .close {
position: absolute;
top: 0px;
right: 0px;
font-size: inherit;
font-weight: normal;
padding: 0px 13px 5px;
opacity: 1;
}
#post article .title .close:hover,
#comments .title .close:hover {
background-color: rgba(51, 51, 51, 0.1);
}
#post article .post {
padding: 20px 30px;
margin: 0;
margin-top: 0;
height: 250px;
position: relative;
overflow: auto;
}
#post article .post .post-img {
width: 100%;
}
#post article .post img {
max-width: 100%;
}
#post article .post p {
margin: 20px 0px;
}
#post .info {
display: block;
background-color: rgb(51, 51, 51);
}
#post .info a {
float: left;
display: inline-block;
padding: 20px 30px;
color: rgb(255, 255, 255);
text-decoration: none;
border-right: 1px solid rgb(81, 81, 81);
}
#post .info a:hover {
background-color: rgb(81, 81, 81);
}
#comments {
position: fixed;
top: 60px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(51, 51, 51, 0.3);
max-height: 75%;
overflow: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(1000px,0px) scale(0,0);
-moz-transform: translate(1000px,0px) scale(0,0);
-o-transform: translate(1000px,0px) scale(0,0);
-ms-transform: translate(1000px,0px) scale(0,0);
transform: translate(1000px,0px) scale(0,0);
}
#comments.active {
-webkit-transform: translate(-0px,0px) scale(1,1);
-moz-transform: translate(-0px,0px) scale(1,1);
-o-transform: translate(-0px,0px) scale(1,1);
-ms-transform: translate(-0px,0px) scale(1,1);
transform: translate(-0px,0px) scale(1,1);
}
#posts.col-xs-11 { left: -91.66666667%; }
#posts.col-xs-11.open ~ #toggle_posts { left: 91.66666667%; }
@media (min-width: 768px) {
#posts.col-sm-4 { left: -33.33333333%; }
#posts.col-sm-4.open ~ #toggle_posts { left: 33.33333333%; }
#comments { right: 8.33333333%; }
}
@media (min-width: 992px) {
#posts.col-md-3 { left: -25%; }
#posts.col-md-3.open ~ #toggle_posts { left: 25%; }
#comments { background-color: rgba(255, 255, 255, 0.8); right: 0px; }
}
#posts.open { left: 0px; }
$(function () {
if (window.location == window.parent.location) {
$('#fullscreen').text('Go back to Blog Layout Snippet on Bootsnipp (Click Here)');
$('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/846vX');
$('#fullscreen').css('margin-left','-391.5px')
}
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = $('#fullscreen').attr('href');
});
$('#toggle_posts').on('click', function(event) {
event.preventDefault();
$('#posts').toggleClass('open');
});
$('a[href^="#post-"]').on('click', function(event) {
event.preventDefault();
$('article.active').removeClass('active');
$('#comments').removeClass('active');
var percentage = parseInt($(window).width()) - parseInt($(this).css('width'));
percentage = percentage / parseInt($(window).width());
percentage = percentage * 100;
if (percentage <= 20) {
$('#posts').removeClass('open');
}
// THIS IS WHERE AJAX CODE WOULD GO TO LOAD ARTICLES DYNAMICALLY
$($(this).attr('href')).addClass('active');
});
$('a[href^="#comments-"]').on('click', function(event) {
event.preventDefault();
// THIS IS WHERE AJAX CODE WOULD GO TO LOAD ARTICLES DYNAMICALLY
$('#comments').toggleClass('active');
});
$('article > .title > .close').on('click', function(event) {
event.preventDefault();
$('#comments').removeClass('active');
$(this).closest('article').removeClass('active');
});
$('#comments > .title > .close').on('click', function(event) {
event.preventDefault();
$(this).closest('#comments').removeClass('active');
});
});
