Last active
September 19, 2022 01:49
-
-
Save tomhodgins/5851904 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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");?>">« Previous</a> <?php endif; ?> | |
| <?php if($_is_next) : ?> <a class="button next lightgray" href="<?php echo site_url("learn/$_next->learn_url");?>">Next »</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