Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added navigation and logo to top of all pages...

  • Loading branch information...
commit c339c56e92c0a837845e1ea0edfcc883a5232a17 1 parent f7ca5cb
@vitch authored
View
13 anchors.html
@@ -40,6 +40,19 @@
</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 - anchors demo page</h1>
<p>
View
13 api.html
@@ -14,6 +14,19 @@
<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="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 - API documentation</h1>
<p>
View
13 arrows.html
@@ -36,6 +36,19 @@
</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 - vertical scrollpane with arrow buttons</h1>
<p>
View
13 auto_reinitialise.html
@@ -53,6 +53,19 @@
</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 - automatic reinitialisation demo page</h1>
<p>
View
13 basic.html
@@ -36,6 +36,19 @@
</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 - simple demo page</h1>
<p>
View
13 both.html
@@ -36,6 +36,19 @@
</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 - vertical and horizontal scrolling demo page</h1>
<p>
View
13 both_arrows.html
@@ -36,6 +36,19 @@
</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 - vertical and horizontal scrolling with arrows demo page</h1>
<p>
View
13 caps.html
@@ -58,6 +58,19 @@
</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 "caps" functionality</h1>
<p>
View
13 drag_size.html
@@ -43,6 +43,19 @@
</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 - drag size demo</h1>
<p>
View
13 dynamic_content.html
@@ -57,6 +57,19 @@
</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 - dynamic content demo page</h1>
<p>
View
13 faqs.html
@@ -14,6 +14,19 @@
<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="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 - frequently asked questions</h1>
<p>
View
13 focus.html
@@ -36,6 +36,19 @@
</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 page showing how focus is automatically tracked</h1>
<p>
View
13 horizontal.html
@@ -36,6 +36,19 @@
</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 - basic horizontal demo page</h1>
<p>
View
13 horizontal_arrows.html
@@ -36,6 +36,19 @@
</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 - horizontal with arrows demo page</h1>
<p>
View
13 image.html
@@ -45,6 +45,19 @@
</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</h1>
<p>
View
BIN  image/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
13 image2.html
@@ -53,6 +53,19 @@
</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>
View
37 index.html
@@ -21,16 +21,16 @@
</head>
<body>
<div id="top-nav">
- [LOGO]
+ <img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
- <li><a href="/">Home</a></li>
- <li><a href="/">Examples</a></li>
- <li><a href="/">Themes</a></li>
- <li><a href="/">How to use</a></li>
- <li><a href="/">FAQs</a></li>
- <li><a href="/">Known issues</a></li>
- <li><a href="/">Support</a></li>
- <li><a href="/">Download</a></li>
+ <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">
@@ -41,15 +41,15 @@
elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.
</p>
<p>
-
- </p>
- <p>
- Below you will find <a href="#examples">examples</a>, <a href="#themes">themes</a>, <a href="#download">
- download information</a> and <a href="#usage">usage instructions</a> as well as information on
- <a href="#donate">donating to the project</a> and <a href="#support">getting support</a>.
+ 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">Usage</h2>
+ <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;
@@ -229,6 +229,11 @@ <h2 id="support">Support</h2>
site.
</p>
+ <h2 id="credits">Credits</h2>
+ <p>
+ Thanks to <a href="http://www.hoppermagic.com">Hoppermagic</a> for creating the jScrollPane logo!
+ </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
View
13 known_issues.html
@@ -14,6 +14,19 @@
<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="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 - cross browser styleable scrollbars with jQuery and CSS</h1>
<p>
View
13 less_basic.html
@@ -39,6 +39,19 @@
</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 - less basic demo page</h1>
<p>
View
13 scroll_on_left.html
@@ -43,6 +43,19 @@
</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 - scroll on left demo</h1>
<p>
View
13 scroll_to.html
@@ -77,6 +77,19 @@
</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 - scrollTo/ scrollBy page</h1>
<p>
View
13 scroll_to_animate.html
@@ -78,6 +78,19 @@
</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 - scrollTo/ scrollBy with animation page</h1>
<p>
View
13 short.html
@@ -36,6 +36,19 @@
</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 page showing "no scroll necessary"</h1>
<p>
View
29 style/demo.css
@@ -22,26 +22,25 @@ body
#top-nav
{
- width: 760px;
- background: #eeeef4;
- padding: 15px 20px 20px;
- margin: 0 auto 2px;
+ width: 780px;
+ background: #50506d;
+ padding: 0 20px 12px 0;
+ margin: 0 auto 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-
-moz-border-radius-topleft: 0;
- -moz-border-radius-topright: 0;
-webkit-border-radius-topleft: 0;
- -webkit-border-radius-topright: 0;
border-radius-topleft: 0;
+ -moz-border-radius-topright: 0;
+ -webkit-border-radius-topright: 0;
border-radius-topright: 0;
}
#top-nav ul
{
- margin: 0;
+ margin: 28px 0 0;
overflow: hidden;
float: right;
}
@@ -49,26 +48,18 @@ body
#top-nav ul li
{
float: left;
- padding: 0 .5em;
+ padding: 0 0 0 1em;
list-style: none;
}
#top-nav ul li a
{
- background: #50506D;
color: #fff;
- display: block;
- padding: 3px 7px;
-
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
}
#top-nav ul li a:hover
{
- background: #8b8b9f;
- color: #fff;
+ color: #ffa;
}
#top-nav ul li:last-child
@@ -221,4 +212,4 @@ pre
-webkit-border-radius: 3px;
border-radius: 3px;
overflow: auto;
-}
+}
View
13 themes/lozenge/index.html
@@ -50,6 +50,19 @@
</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 - lozenge theme</h1>
<p>
Please sign in to comment.
Something went wrong with that request. Please try again.