RubyGems - roda-component - Versions diffs - 0.0.10 → 0.1.0 - Mend

roda-component 0.0.10 → 0.1.0

Files changed (692) hide show

data/test/dummy/public/chat/bower/jScrollPane/image/logo.png ADDED

Binary file

data/test/dummy/public/chat/bower/jScrollPane/image2.html ADDED

@@ -0,0 +1,98 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane image demo 2</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			.scroll-pane
+			{
+				width: 100%;
+				height: 400px;
+				overflow: auto;
+			}
+			img
+			{
+				margin: 1em 0;
+			}
+			img.portrait
+			{
+				width: 480px;
+				height: 640px;
+			}
+			img.landscape
+			{
+				width: 640px;
+				height: 480px;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				$('.scroll-pane').jScrollPane();
+			});
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - image demo page part 2</h1>
+			<p>
+				This demonstration shows how you can avoid the autoReinitialise overhead (as seen in the
+				<a href="image.html">first image demo</a>) by fixing the width and height of the images inside your
+				scroll pane.
+			</p>
+			<p>
+				As you can see from the sourcecode for this page, you can set the width and height either through CSS or
+				using width and height attributes on the image itself.
+			</p>
+			<div class="scroll-pane">
+				<img src="http://farm5.static.flickr.com/4068/4502147230_61d4f18460_z.jpg" class="portrait" alt="Touring" />
+				<img src="http://farm5.static.flickr.com/4065/4501530717_8a7f9c8ce8_z.jpg" class="landscape" alt="Avalauncher" />
+				<img src="http://farm5.static.flickr.com/4034/4502145190_d7ae16127b_z.jpg" class="landscape" alt="Rockies" />
+				<img src="http://farm5.static.flickr.com/4003/4409969018_16cc9d8bf1_z.jpg" width="640" height="480" alt="Paper cranes" />
+				<img src="http://farm5.static.flickr.com/4064/4407630907_1430d32efa_z.jpg" width="480" height="640" alt="Icecream">
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/index.html ADDED

@@ -0,0 +1,319 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane - cross browser styleable scrollbars with jQuery and CSS</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="#">Home</a></li>
+				<li><a href="#examples">Examples</a></li>
+				<li><a href="#themes">Themes</a></li>
+				<li><a href="#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="#support">Support</a></li>
+				<li><a href="#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - cross browser styleable scrollbars with jQuery and CSS</h1>
+			<p class="intro">
+				jScrollPane is a cross-browser <a href="http://jquery.com">jQuery</a> plugin by
+				<a href="http://www.kelvinluck.com">Kelvin Luck</a> which converts a browser's default scrollbars (on
+				elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.
+			</p>
+			<p>
+				jScrollPane is designed to be flexible but very easy to use. After you have <a href="#download">
+				downloaded</a> and <a href="#usage">included</a> the relevant files
+				in the head of your document all you need to to is call one javascript function to initialise the
+				scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing
+				<a href="#themes">themes</a>. There are a number of different <a href="#examples">examples</a> showcasing
+				different features of jScrollPane and a number of ways for you to get <a href="#support">support</a>.
+			</p>
+			<h2 id="usage">How to use</h2>
+			<p>
+				It is very simple to use jScrollPane. You will need to <a href="#download">download</a> the necessary
+				files and place them on your server. Then you just need to include the relevant files in the &lt;head&gt;
+				of your document:
+			</p>
+			<pre>&lt;!-- styles needed by jScrollPane --&gt;
+&lt;link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" /&gt;
+&lt;!-- latest jQuery direct from google's CDN --&gt;
+&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
+&lt;/script&gt;
+&lt;!-- the mousewheel plugin - optional to provide mousewheel support --&gt;
+&lt;script type="text/javascript" src="script/jquery.mousewheel.js"&gt;&lt;/script&gt;
+&lt;!-- the jScrollPane script --&gt;
+&lt;script type="text/javascript" src="script/jquery.jscrollpane.min.js"&gt;&lt;/script&gt;</pre>
+			<p>
+				Then you just need to initialise jScrollPane on document.ready (using a selector which will find the
+				content you want to apply jScrollPane to):
+			</p>
+			<pre>$(function()
+{
+	$('.scroll-pane').jScrollPane();
+});</pre>
+			<p>
+				There are plenty of different ways to use jScrollPane - either passing in different <a href="settings.html">
+				settings</a> when you initialise it or by using the <a href="api.html">API</a>. Each of these different
+				use cases is covered by an <a href="#examples">example</a> linked to from below.
+			</p>
+			<h2 id="download">Download</h2>
+			<p>
+				You can always find the latest code for jScrollPane on its <a href="http://github.com/vitch/jScrollPane">
+				github</a> page. You can either check out this entire website (including all examples) via git, or you
+				can use the handy github functionality to <a href="http://github.com/vitch/jScrollPane/archives/master">
+				download a zip</a> of the repository.
+			</p>
+			<p>
+				The particular files that you need are:
+			</p>
+			<ul class="link-list">
+				<li>
+					<a href="style/jquery.jscrollpane.css">jquery.jscrollpane.css</a> - the basic CSS styles that are
+					needed for jScrollPane to work.
+				</li>
+				<li>
+					<a href="http://www.jquery.com">The jQuery library</a> - although I recommend including this
+					directly from a CDN like I do above and in all of the examples.
+				</li>
+				<li>
+					<a href="script/jquery.mousewheel.js">jquery.mousewheel.js</a> - The
+					<a href="http://github.com/brandonaaron/jquery-mousewheel/">jQuery mouseweel</a> plugin. This is
+					optional but recommended, include it to allow people to scroll your content using their mouse wheel.
+				</li>
+				<li>
+					<a href="script/mwheelIntent.js">mwheelIntent.js</a> - The
+					<a href="http://www.protofunc.com/scripts/jquery/mwheelIntent/">mwheelIntent</a> plugin. This is
+					totally optional but can increase the usability of the mousewheel in nested scroll areas.
+					<a href="mwheel_intent.html">See demo</a>.
+				</li>
+				<li>
+					<a href="script/jquery.jscrollpane.min.js">jquery.jscrollpane.min.js</a> - the actual javascript file
+					for jScrollPane (you can also get the <a href="script/jquery.jscrollpane.js">unminified</a> version
+					if yu want to see the sourcecode and read the comments).
+				</li>
+			</ul>
+			<h2 id="examples">Simple examples/ tests</h2>
+			<p>
+				These examples show very basic functionality and exist so that I can test that any changes to
+				jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant
+				to look pretty, they merely highlight different bits of functionaity which are available. If you want
+				examples of jScrollPane looking good then check out the <a href="#themes">themes</a>.
+			</p>
+			<ul class="link-list">
+				<li>
+					<a href="basic.html">Demo</a> showing basic scrolling (horizontal, vertical and combined)
+				</li>
+				<li>
+					<a href="arrows.html">Demo</a> showing basic scrolling (horizontal, vertical and combined) with
+					arrow buttons
+				</li>
+				<li>
+					<a href="focus.html">Demo</a> showing how the contents of the scrollpane is focused as you tab to it
+				</li>
+				<li>
+					<a href="caps.html">Demo</a> showing how you can set "caps" and "gutters" to change the size and
+					positioning of the scrollbar relative to the content it is scrolling
+				</li>
+				<li>
+					<a href="drag_size.html">Demo</a> showing how you can restrict the minimum and maxium size of the
+					drag part of the scrollbar
+				</li>
+				<li>
+					<a href="arrow_hover.html">Demo</a> showing how the <a href="settings.html#arrowScrollOnHover">
+					arrowScrollOnHover</a> option makes the arrow buttons automatically scroll the content when you
+					hover over them
+				</li>
+				<li>
+					<a href="arrow_positions.html">Demo</a> showing how the <a href="settings.html#verticalArrowPositions">
+					verticalArrowPositions</a> and <a href="settings.html#horizontalArrowPositions">
+					horizontalArrowPositions</a> options can change the position of the arrow buttons
+				</li>
+				<li>
+					<a href="scroll_to.html">Demo</a> showing how you can use the <a href="api.html#scrollTo">scrollTo
+					</a> and <a href="api.html#scrollBy">scrollBy</a> methods of the API
+				</li>
+				<li>
+					<a href="scroll_to_animate.html">Demo</a> showing how you can use the <a href="api.html#scrollTo">
+					scrollTo</a> and <a href="api.html#scrollBy">scrollBy</a> methods of the API along with the
+					<a href="settings.html#animateScroll">animateScroll</a> which enables animation when scrolling
+				</li>
+				<li>
+					<a href="anchors.html">Demo</a> showing how you can make internal links automatically scroll the
+					scrollpane (and how <a href="anchors.html#para4">external links</a> can link directly into content
+					within a jScrollPane)
+				</li>
+				<li>
+					<a href="invisibles.html">Demo</a> showing that jScrollPane can work correctly on elements which are
+					initially set to be invisible via CSS
+				</li>
+				<li>
+					<a href="less_basic.html">Demo</a> showing vertical scrolling with multiple panes on the same page
+					and adding dynamic content and then reinitialising one of the panes
+				</li>
+				<li>
+					<a href="dynamic_content.html">Demo</a> showing how you can manually <a href="api.html#reinitialise">
+					reinitialise</a> the scrollpane if you add dynamic content to it
+				</li>
+				<li>
+					<a href="ajax.html">Demo</a> showing how you can change the content of your jScrollPane via an ajax
+					call and can reinitialise the scrollpane once the new content has loaded
+				</li>
+				<li>
+					<a href="auto_reinitialise.html">Demo</a> showing how jScrollPane can be set to automatically
+					reinitialise itself on a timer via the <a href="settings.html#autoReinitialise">autoReinitialise</a>
+					parameter
+				</li>
+				<li>
+					<a href="image.html">Demo</a> showing how <a href="settings.html#autoReinitialise">autoReinitialise
+					</a> can also be used so that content with images in it displays correctly in jScrollPane
+				</li>
+				<li>
+					<a href="dynamic_width.html">Demo</a> showing how jScrollPane can be reinitialised when the width of
+					it's container changes and will update to fill the available space
+				</li>
+				<li>
+					<a href="dynamic_height.html">Demo</a> showing how jScrollPane can be reinitialised when the height
+					of it's container changes and will update to fill the available space
+				</li>
+				<li>
+					<a href="fullpage_scroll.html">Demo</a> showing how jScrollPane can be applied to an entire page
+					so that the browser's default scrollbars for the page are replaced. This demo also shows that you
+					can nest jScrollPanes and everything will still work correctly.
+				</li>
+				<li>
+					<a href="iframe.html">Demo</a> showing how jScrollPane can be used to style the scrollbars in an
+					iframe.
+				</li>
+				<li>
+					<a href="scroll_on_left.html">Demo</a> showing how vertical scrollbars can also appear on the left
+					hand side of content
+				</li>
+				<li>
+					<a href="short.html">Demo</a> showing that no scrollbars are created when the content is too short
+					to scroll
+				</li>
+				<li>
+					<a href="events.html">Demo</a> showing the events that are dispatched by an element you apply
+					jScrollPane to.
+				</li>
+				<li>
+					<a href="https://github.com/bodrovis/jscrollpane-rails/">jscrollpane-rails</a> makes integrating jScrollPane
+					with Rails apps easier.
+				</li>
+			</ul>
+			<h2 id="themes">Themes</h2>
+			<p>
+				You can style jScrollPane however you like using simple CSS. To give you some ideas, here are a variety
+				of different themes which you are free to <a href="#download">download</a> and use or modify:
+			</p>
+			<ul>
+				<li><a href="themes/lozenge/">Lozenge</a> - lozenge shaped sliders and small arrow buttons</li>
+			</ul>
+			<h2 id="support">Support</h2>
+			<p>
+				Before trying to get support please check if your problem is a <a href="known_issues.html">known
+				issue</a> or if it is mentioned in the <a href="faqs.html">FAQs</a>. If your issue is a new one and
+				you can't find any information about it then you can try one of the following two options:
+			</p>
+			<ul>
+				<li>
+					<p>
+						Using the <a href="http://stackoverflow.com">StackOverflow</a> site. This is probably the
+						place you are most likely to get a quick answer as many Javascript experts spend time on
+						the site. It also provides niceties like pretty formatting of posted sourcecode.
+					</p>
+					<p>
+						If you ask a question on the site make sure you add the tags "jquery" and "jscrollpane" as
+						I will be monitoring these tags to try to provide support.
+					</p>
+				</li>
+				<li>
+					<p>
+						Through the <a href="http://groups.google.com/group/jscrollpane/">jScrollPane google group
+						</a> - sign up and then you can start a discussion (either by email or through the web
+						interface).
+					</p>
+					<p>
+						Please remember to use the search field at the top of the group's homepage to search the
+						archive to find out if your question has been answered before.
+					</p>
+				</li>
+			</ul>
+			<p>
+				If you have contacted support and established that your problem is definitely a bug then you can
+				<a href="http://github.com/vitch/jScrollPane/issues">raise an issue</a> on the project's github
+				site.
+			</p>
+			<h2 id="history">History</h2>
+			<p>
+				jScrollPane was originally developed in December 2006. Since then it has been constantly updated to
+				fix bugs and add new features. The change history since November 2008 is available in the jScrollPane
+				<a href="http://github.com/vitch/jScrollPane">git repository</a>. In August 2010 a major rewrite was
+				undertaken, starting from a blank canvas and adding long awaited features like horizontal scrolling
+				and automatic reinitialisation. If you want to find old versions of jScrollPane then you can check out
+				the <a href="changelog.html">changelog</a>.
+			</p>
+			<h2 id="credits">Credits</h2>
+			<p>
+				Thanks to <a href="http://www.hoppermagic.com">Hoppermagic</a> for creating the jScrollPane logo! And
+				thanks to Mark Reed, Philip Leff and <a href="http://www.erwinodendaal.com">Erwin Odendaal</a> for
+				sponsoring the development of v2 of this plugin (particularly to enable horizontal scrolling).
+			</p>
+			<h2 id="donate">Donate</h2>
+			<p>
+				jScrollPane is a personal project that is open source for anybody to use as they want to. If you (and
+				your clients!) like jScrollPane then please consider donating to it's ongoing development. You can do
+				so via Pledgie or Paypal using the images below:
+			</p>
+			<p style="margin-top: 0; float: left;">
+				<a href='http://www.pledgie.com/campaigns/12524'>
+					<img alt='Click here to lend your support to: jScrollPane and make a donation at www.pledgie.com !'
+						 src='http://www.pledgie.com/campaigns/12524.png?skin_name=chrome' border='0'
+						/>
+				</a>
+			</p>
+			<form method="post" action="https://www.paypal.com/cgi-bin/webscr" style="margin: 15px 0 0 20px;">
+				<input type="hidden" value="_donations" name="cmd">
+				<input type="hidden" value="V2UG6D75CZ4SS" name="business">
+				<input type="hidden" value="GB" name="lc">
+				<input type="hidden" value="jScrollPane" name="item_name">
+				<input type="hidden" value="GBP" name="currency_code">
+				<input type="hidden" value="PP-DonationsBF:btn_donate_SM.gif:NonHosted" name="bn">
+				<input type="image" alt="" name="submit" style="border: 0pt none;" src="https://www.paypal.com/en_GB/i/btn/btn_donate_SM.gif">
+				<img height="1" border="0" width="1" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" style="padding: 0pt;" alt="">
+			</form>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/invisibles.html ADDED

@@ -0,0 +1,523 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+		<title>jScrollPane demo showing jScrollPane working on elements which are initially display:none</title>
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			ul.tabs
+			{
+				margin: 0 0 .5em;
+				padding: 0;
+				overflow: hidden;
+			}
+			ul.tabs li
+			{
+				list-style: none;
+				float: left;
+				margin: 0 1em 0 0;
+			}
+			ul.tabs li a
+			{
+				color: #fff;
+				padding: 3px 5px;
+				display: block;
+				float: left;
+				background: #8B8B9F;
+				-moz-border-radius: 3px;
+				-webkit-border-radius: 3px;
+				border-radius: 3px;
+			}
+			ul.tabs li a.active
+			{
+				background: #50506D;
+			}
+			.scroll-pane
+			{
+				width: 100%;
+				height: 200px;
+				overflow: auto;
+			}
+			.horizontal-only
+			{
+				height: auto;
+				max-height: 200px;
+			}
+		</style>
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				// Create the "tabs"
+				$('.tabs').each(
+					function()
+					{
+						var currentTab, ul = $(this);
+						$(this).find('a').each(
+							function(i)
+							{
+								var a = $(this).bind(
+									'click',
+									function()
+									{
+										if (currentTab) {
+											ul.find('a.active').removeClass('active');
+											$(currentTab).hide();
+										}
+										currentTab = $(this).addClass('active')
+														.attr('href');
+										$(currentTab).show().jScrollPane();
+										return false;
+									}
+								);
+								$(a.attr('href')).hide();
+							}
+						);
+					}
+				);
+			});
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - demo showing jScrollPane working on elements which are initially display: none</h1>
+			<p>
+				This demo shows that jScrollPane works correctly on elements who are initially set to <strong>display:
+				none</strong>. When the element is first shown you simply have to (re)initialise the scrollpane (or you
+				could even use <a href="settings.html#autoReinitialise">autoReinitialise</a> if you like) and its width
+				and height will be calculated correctly.
+			</p>
+			<p>
+				Note that the majority of the custom javascript and CSS on this page is just to create basic "tabs"
+				functionality where you can switch between different content on the page by clicking links. You don't
+				need to do anything special for jScrollPane to work in this situation.
+			</p>
+			<h2>Vertical only</h2>
+			<ul class="tabs">
+				<li><a href="#pane1">Pane 1</a></li>
+				<li><a href="#pane2">Pane 2</a></li>
+				<li><a href="#pane3">Pane 3</a></li>
+			</ul>
+			<div class="scroll-pane" id="pane1">
+				<p>
+					<strong>ONE</strong> amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<div class="scroll-pane" id="pane2">
+				<p>
+					<strong>TWO</strong> amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<div class="scroll-pane" id="pane3">
+				<p>
+					<strong>THREE</strong> amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<h2>Horizontal only</h2>
+			<ul class="tabs">
+				<li><a href="#pane4">Pane 4</a></li>
+				<li><a href="#pane5">Pane 5</a></li>
+				<li><a href="#pane6">Pane 6</a></li>
+			</ul>
+			<div class="scroll-pane horizontal-only" id="pane4">
+				<p style="width: 1000px;">
+					<strong>FOUR</strong>, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+			</div>
+			<div class="scroll-pane horizontal-only" id="pane5">
+				<p style="width: 1000px;">
+					<strong>FIVE</strong>, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+			</div>
+			<div class="scroll-pane horizontal-only" id="pane6">
+				<p style="width: 1000px;">
+					<strong>SIX</strong>, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+			</div>
+			<h2>Both</h2>
+			<ul class="tabs">
+				<li><a href="#pane7">Pane 7</a></li>
+				<li><a href="#pane8">Pane 8</a></li>
+				<li><a href="#pane9">Pane 9</a></li>
+			</ul>
+			<div class="scroll-pane" id="pane7">
+				<p style="width: 1000px">
+					<strong>SEVEN</strong>, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<div class="scroll-pane" id="pane8">
+				<p style="width: 1000px">
+					<strong>EIGHT</strong>, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<div class="scroll-pane" id="pane9">
+				<p style="width: 1000px">
+					<strong>NINE</strong>, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>