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

roda-component 0.0.10 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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>