Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/vertically-responsive.html

Last active September 19, 2022 01:49
Show Gist options
  • Save tomhodgins/5851904 to your computer and use it in GitHub Desktop.
Save tomhodgins/5851904 to your computer and use it in GitHub Desktop.
Download ZIP
Vertically Responsive sidebar playlist widget using jQuery and CSS to check the browser height and automatically shorten the list according to how much screen space is available
Raw
vertically-responsive.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap: with responsive, no icons -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Boostrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<!-- Source Sans via Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- HTML Section -->
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="sidebar">
<!--<div class="lesson-controls">
<?php if($_is_previous) : ?> <a class="button prev lightgray" href="<?php echo site_url("learn/$_previous->learn_url");?>">&laquo; Previous</a> <?php endif; ?>
<?php if($_is_next) : ?> <a class="button next lightgray" href="<?php echo site_url("learn/$_next->learn_url");?>">Next &raquo;</a> <?php endif; ?>
</div>-->
<div style="height: 14px"></div>
<div class="playlearn"><!-- Lesson Playlist Widget -->
<div class="learnheader"><!-- Header floats above list wth Playlist Name and Lesson Navigation -->
<div class="listname">
<h1>In This Module</h1>
</div>
<div class="learnnav">
<a href="#" title="Load Previous Lesson" class="previous"><i class="icon-chevron-left"></i></a>
<div class="fraction"><!-- with a solidus as the background -->
<span class="numerator">9</span><!-- Right-aligned from the solidus and nicely positioned -->
<span class="denominator">10</span><!-- Left-aligned from th solidus and nicely positioned -->
</div>
<a href="#" title="Load Next Lesson" class="next"><i class="icon-chevron-right"></i></a>
</div>
</div>
<ul class="learnlist"><!-- list that contains all of the lessons -->
<li class="listitem">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>1</span>
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Sample Headline</h1>
</div>
<div class="learncheck checked">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
4
</div>
</div>
</div>
</li>
<li class="listitem">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>2</span>
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Second Sample Headline</h1>
</div>
<div class="learncheck checked">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
20
</div>
</div>
</div>
</div>
</li>
<li class="listitem active">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span><i class="icon-play"></i></span><!-- play icon replaces number when it's the active page -->
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Third Headline Would Go Here</h1>
</div>
<div class="learncheck">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
12
</div>
</div>
</div>
</div>
</li>
<li class="listitem">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>4</span>
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Fourth Headline</h1>
</div>
<div class="learncheck">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
10
</div>
</div>
</div>
</div>
</li>
<li class="listitem"><!-- five -->
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>5</span>
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Fifth Headline</h1>
</div>
<div class="learncheck checked">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
30
</div>
</div>
</div>
</div>
</li>
<li class="listitem">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>6</span>
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Sixth Headline Goes Here</h1>
</div>
<div class="learncheck">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
24
</div>
</div>
</div>
</div>
</li>
<li class="listitem">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>7</span><!-- play icon replaces number when it's the active page -->
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Seventh Headline Would Certainly Go Here</h1>
</div>
<div class="learncheck">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
12
</div>
</div>
</div>
</div>
</li>
<li class="listitem">
<a href="<!-- link to lesson goes here-->" class="learnclick"></a>
<div class="learncontain">
<div class="learnnumbers">
<span>8</span>
</div>
<div class="learnthumb">
<img src="http://placehold.it/50x50" width="50" height="50" alt="thumbnail">
</div>
<div class="learntext">
<div class="learntitle">
<h1>Fourth Headline</h1>
</div>
<div class="learncheck checked">
✓ Learned
</div>
<div class="learncomment">
<i class="icon-comment"></i>
<div class="count">
10
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Section -->
<script type="text/javascript">
$(document).ready(function(){
jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame() {
// Related Article veritcal-responsive CSS styles
if ($(window).height() < 660 && $(window).width() > 960) {
$('.learnlist').css('height','200');
}
if ($(window).height() > 660 && $(window).width() > 960) {
$('.learnlist').css('height','280');
}
if ($(window).height() > 740 && $(window).width() > 960) {
$('.learnlist').css('height','360');
}
if ($(window).height() > 820 && $(window).width() > 960) {
$('.learnlist').css('height','440');
}
if ($(window).height() > 900 && $(window).width() > 960) {
$('.learnlist').css('height','520');
}
if ($(window).height() > 980 && $(window).width() > 960) {
$('.learnlist').css('height','600');
}
if ($(window).height() > 1060 && $(window).width() > 960) {
$('.learnlist').css('height','680');
}
};
});
</script>
<!-- CSS Section -->
<style>
* {
font-family: 'Source Sans Pro', sans-serif;
}
#sidebar {
display: block;
height: auto;
margin: 0 auto;
width: 265px;
}
/* Learn Playlist Sidebar Widget Styles */
.playlearn {
display:block;
border: 1px solid #eee;
width:100%;
box-sizing:border-box;
position:relative;
padding-top:50px;
margin-bottom:15px;
overflow:hidden;
}
.learnheader {
display:block;
width:100%;
position:absolute;
top:0;
left:0;
height:50px;
float:left;
background: #f6f6f6;
box-shadow: rgba(0,0,0,0.1) 0px 2px 2px;
z-index:99;
overflow:hidden;
}
.listname {
display:block;
width:62%;
height:50px;
overflow:hidden;
float:left;
}
.listname h1 {
font-size:16px;
margin:0;
font-weight:bolder;
padding:15px 0 0 13px;
}
.learnnav {
display:block;
width:34%;
padding-right:4%;
height:50px;
overflow:hidden;
float:left;
}
.learnnav a {
display:block;
margin:0;
padding:15px 0 0 0;
width:12%;
height:35px;
float:left;
color:#999;
outline:none;
text-decoration:none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow:hidden;
}
.learnnav a:hover {
color:#000;
}
.learnnav .fraction {
display:block;
width:76%;
height:50px;
float:left;
position:relative;
color: #999;
}
.learnnav .fraction:before {
content: "/";
color:#999999;
font-weight:normal;
position:absolute;
font-size:28px;
top:5px;
margin-left:43%;
}
.learnnav .numerator {
text-align:right;
font-size:14px;
position:absolute;
font-weight:bolder;
float:left;
top:20%;
right:57%;
}
.learnnav .denominator {
text-align:left;
font-size:14px;
position:absolute;
font-weight:bolder;
float:left;
left:55%;
bottom:25%;
}
ul.learnlist {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
height:280px;
overflow:hidden;
overflow-y:scroll;
-webkit-transition: height 0.1s ease-in-out;
-moz-transition: height 0.1s ease-in-out;
-o-transition: height 0.1s ease-in-out;
transition: height 0.1s ease-in-out;
}
ul.learnlist li.listitem {
display:block;
height:80px;
overflow:hidden;
width:100%;
box-sizing:border-box;
border-collapse:collapse;
position:relative;
z-index:10;
border-bottom: 1px solid #eee;
}
ul.learnlist li.listitem:hover {
z-index:50 !important;
background: #f4f4f4;
}
ul.learnlist li.listitem.active {
z-index:50 !important;
background: #eee;
}
ul.learnlist li.listitem.active h1 {
color: #222;
}
ul.learnlist li a.learnclick {
display:block;
width:100%;
height:80px;
position:absolute;
}
ul.learnlist .learnnumbers {
display:block;
width:10%;
font-size:80%;
height:60px;
text-align:center;
font-weight:bolder;
padding-top:32px;
float:left;
color:#999999;
}
ul.learnlist .learnnumbers i {
font-size:60%;
color:#666666;
}
ul.learnlist .learnthumb {
display:block;
width:25%;
height:80px;
float:left;
}
ul.learnlist .learnthumb img{
display:inline-block;
width:65px;
height:65px;
margin-top:8px;
vertical-align:middle;
background-clip:padding-box;
}
ul.learnlist .learntext {
display:block;
width:65%;
height:80px;
float:left;
}
ul.learnlist .learntitle {
display:block;
width:100%;
height:50px;
overflow:hidden;
float:left;
}
ul.learnlist .learntitle h1 {
margin:0;
width:93%;
padding-top:5%;
padding-left:5%;
font-size:12px;
line-height:20px;
color:#666666;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.learnlist li.listitem:hover .learntitle h1 {
color:#000000;
}
ul.learnlist .learncheck {
display:block;
width:70%;
height:25px;
color:#999999;
font-size:12px;
padding-top:5px;
padding-left:5%;
float:left;
opacity:0;
}
ul.learnlist .learncheck.checked {
opacity:1;
}
ul.learnlist .learncomment {
display:block;
font-size:12px;
width:25%;
height:25px;
padding-top:5px;
color:#999999;
float:left;
}
ul.learnlist .learncomment i {
display:block;
width:20px;
height:23px;
padding-top:2px;
float:left;
}
.facebook-icon {
font-size:20px;
color:#3C5A98;
margin:3px 0 0 5px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-shadow: rgba(0,0,0,0.1) 0px 2px 2px;
}
.facebook-icon:hover {
color:#9eadcc;
text-decoration:none;
}
.twitter-icon {
font-size:20px;
color:#2CAAE1;
margin:3px 0 0 5px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-shadow: rgba(0,0,0,0.1) 0px 2px 2px;
}
.twitter-icon:hover {
color:#96d5f0;
text-decoration:none;
}
.globe-icon {
font-size:20px;
color:#666666;
margin:3px 0 0 3px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-shadow: rgba(0,0,0,0.1) 0px 2px 2px;
}
.globe-icon:hover {
color:#b3b3b3;
text-decoration:none;
}
.learnbuttontop {
width:170px;
float:left;
z-index:100;
position:absolute;
right:295px;
top:20px;
}
.learnbuttontop a.button {
padding:7px 20px 7px 20px;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment