onzze · January 11, 2013 21:08
diff --git a/gistfile1.html b/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}
 <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 () {
  console.log('resized')
  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>
                {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>

 </body>
 </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}
	<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 () {
	console.log('resized')
	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>
	{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>

	</body>
	</html>