315 lines
No EOL
15 KiB
HTML
315 lines
No EOL
15 KiB
HTML
<!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.8.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 <head>
|
|
of your document:
|
|
</p>
|
|
<pre><!-- styles needed by jScrollPane -->
|
|
<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.4.2/jquery.min.js">
|
|
</script>
|
|
|
|
<!-- the mousewheel plugin - optional to provide mousewheel support -->
|
|
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
|
|
|
|
<!-- the jScrollPane script -->
|
|
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script></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>
|
|
</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> |