Skip to content

Instantly share code, notes, and snippets.

@OscarGodson

OscarGodson/gist:4513993

Forked from onzze/gist:4513970
Last active December 11, 2015 00:08
Show Gist options
  • Save OscarGodson/4513993 to your computer and use it in GitHub Desktop.
Save OscarGodson/4513993 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll vertically</title>
<script type="text/javascript" src="http://www.queness.com/resources/html/scroll/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.queness.com/resources/html/scroll/js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_height = height * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_height);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: width, height: mask_height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<style>
body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}
#mask {
width:100%;
height:500%;
overflow:hidden;
background-color:#eee;
}
.item {
width:100%;
height:20%;
display:block;
background-color:#ddd;
}
.content {
width:100%;
height:100%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div class="content">item1 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a>{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class="post photoset">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<div class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
</ol></div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a></div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a></div>
</div>
</div>
</div>
<script>// MAKE SURE TO CHANGE "container" to the name of the ID of the container that's
// 100% width you want the video to fit in
var resizeVideos = function () {
var iframes = document.body.getElementsByTagName('iframe')
, newVimeoWidth = document.getElementByClass('content').offsetWidth
, newVimeoHeight = 'auto';
console.log(newVimeoWidth)
for(x in iframes){
if(iframes[x].src && iframes[x].src.indexOf('player.vimeo.com') > -1 ||
iframes[x].src && iframes[x].src.indexOf('youtube.com') > -1){
if(newVimeoHeight == 'auto'){
newVimeoHeight = ( newVimeoWidth * 9 ) / 16;
}
iframes[x].width = newVimeoWidth;
iframes[x].height = newVimeoHeight
}
}
};
window.onresize = resizeVideos;
resizeVideos();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment