Skip to content

Commit

Permalink
Updated README.
Browse files Browse the repository at this point in the history 
I removed my original 'From the Author' paragraph to give credits to the other
contributors.

Added example sites so people can see it live in action.
  • Loading branch information
@jamesflorentino
jamesflorentino committed May 26, 2012
1 parent 28aa1c9 commit 1013fda
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 36 deletions.
40 changes: 22 additions & 18 deletions README.md
View file
Expand Up @@ -14,7 +14,7 @@ The following type of markup structure is needed to make the plugin work:
<div class="content"> ... content here ... </div>
</div>

Copy the HTML markup. Change `#about` into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. `#parent > .nano`. `nano` and `content` classnames can be customized via plugin options (_in that case you must rename them inside the plugin's CSS file as well_).
Copy the HTML markup. Change `.nano` into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. `#parent > .nano`. `nano` and `content` classnames can be customized via plugin options (_in that case you must rename them inside the plugin's CSS file as well_).

### 2. CSS

Expand All @@ -31,11 +31,13 @@ You should specify a width and a height to your container, and apply some custom

### 3. JavaScript

$("#about").nanoScroller();
Running this script will apply the nanoScroller plugin to all DOM elements with a `.nano` className.

$(".nano").nanoScroller();

### Plugin Options

There are a few options that you can change when running nanoScroller, e.g. `$("#about").nanoScroller({ paneClass: 'myclass' });`
There are a few options that you can change when running nanoScroller, e.g. `$(".nano").nanoScroller({ paneClass: 'myclass' });`

#### iOSNativeScrolling

Expand Down Expand Up @@ -86,52 +88,52 @@ __Default:__ false

To scroll at the top:

$("#about").nanoScroller({ scroll: 'top' });
$(".nano").nanoScroller({ scroll: 'top' });

To scroll at the bottom:

$("#about").nanoScroller({ scroll: 'bottom' });
$(".nano").nanoScroller({ scroll: 'bottom' });

To scroll to an element:

$("#about").nanoScroller({ scroll: $('#a_node') });
$(".nano").nanoScroller({ scroll: $('#a_node') });


#### stop:

To stop the operation:

$("#about").nanoScroller({ stop: true });
$(".nano").nanoScroller({ stop: true });


#### nanoScroller();

Refresh the scrollbar:

$("#about").nanoScroller();
$(".nano").nanoScroller();


### Advanced methods

To scroll at the top with an offset value:

$("#about").nanoScroller({ scrollTop: value });
$(".nano").nanoScroller({ scrollTop: value });

To scroll at the bottom with an offset value:

$("#about").nanoScroller({ scrollBottom: value });
$(".nano").nanoScroller({ scrollBottom: value });

To scroll to an element:

$("#about").nanoScroller({ scrollTo: $('#a_node') });
$(".nano").nanoScroller({ scrollTo: $('#a_node') });

### Custom events

#### 'scrollend'

A custom `'scrollend'` event is triggered on the element every time the user has scrolled to the end of the content element. Some browsers trigger this event more than once each time, so to listen to the custom event, instead of using jQuery's normal `.bind` or `.on`, you most likely want to use [this tiny jQuery debounce plugin](https://github.com/diaspora/jquery-debounce) to prevent browsers from firing your function more than once every 100ms.

$("#about").debounce("scrollend", function() {
$(".nano").debounce("scrollend", function() {
alert("The end");
}, 100);

Expand All @@ -156,7 +158,7 @@ To allow the build process to convert the README file to HTML you also need:

1. Make all JS changes in Coffeescript file(s), CSS changes in CSS file(s).
2. In terminal move to nanoscroller folder and run `cake build`
3. Make sure that all changes are valid and open a pull request.
4. Make sure that all changes are valid and open a pull request.

### Browser compatibility

Expand All @@ -181,7 +183,7 @@ If you find a bug, please report here at the [issues section](https://github.com

### Using a polyfill for better mobile browser support

You can use [overthrow.js](https://github.com/filamentgroup/Overthrow/) polyfill (~1.5kb minified and gzipped) to make nanoScoller work on many mobile devices. It emulates CSS overflow (overflow: auto;/overflow: scroll;) in devices that are lacking it.
You can use [overthrow.js](https://github.com/filamentgroup/Overthrow/) polyfill (~1.5kb minified and gzipped) to make nanoScroller work on many mobile devices. It emulates CSS overflow (overflow: auto;/overflow: scroll;) in devices that are lacking it.

To use overthrow, link to the javascript file in your HTML document...

Expand All @@ -194,6 +196,12 @@ To use overthrow, link to the javascript file in your HTML document...
<div class="overthrow content"> ... content here ... </div>
</div>

## Sites that use nanoScroller

If you wish to include your site in this list, you can do so by tweeting the link on Twitter with a `#nanoScroller` hashtag.

- [makechat.com](http://makechat.com)

### Contributors

- [jamesflorentino](https://github.com/jamesflorentino)
Expand All @@ -211,10 +219,6 @@ Other people who have contributed code:
- [lluchs](https://github.com/lluchs) #7, #8
- [Dlom](https://github.com/Dlom)

### From the author
I wrote this plugin out of necessity for a JavaScript project with designers and front-end developers in mind. Please also note that I will not be liable to fix your problem just in case you plan to use this commercially and some unforseen event arises. However, I will do what I can to immediately patch a solution.

### Credits
- Initially written by [James Florentino](http://jamesflorentino.com) in [CoffeeScript](http://coffeescript.org)
- Released under [MIT License](http://www.opensource.org/licenses/mit-license.php)
- If you write CoffeeScript and you wish to improve the code, please feel free to fork the project.
41 changes: 23 additions & 18 deletions bin/readme.html
View file
Expand Up @@ -16,7 +16,7 @@ <h3>1. Markup</h3>
&lt;/div&gt;
</code></pre>

<p>Copy the HTML markup. Change <code>#about</code> into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. <code>#parent &gt; .nano</code>. <code>nano</code> and <code>content</code> classnames can be customized via plugin options (<em>in that case you must rename them inside the plugin&#39;s CSS file as well</em>).</p>
<p>Copy the HTML markup. Change <code>.nano</code> into something related to your content. Though you can also remove that attribute as long as you have a parent div with an ID reference. e.g. <code>#parent &gt; .nano</code>. <code>nano</code> and <code>content</code> classnames can be customized via plugin options (<em>in that case you must rename them inside the plugin&#39;s CSS file as well</em>).</p>

<h3>2. CSS</h3>

Expand All @@ -35,12 +35,14 @@ <h3>2. CSS</h3>

<h3>3. JavaScript</h3>

<pre><code>$(&quot;#about&quot;).nanoScroller();
<p>Running this script will apply the nanoScroller plugin to all DOM elements with a <code>.nano</code> className.</p>

<pre><code>$(&quot;.nano&quot;).nanoScroller();
</code></pre>

<h3>Plugin Options</h3>

<p>There are a few options that you can change when running nanoScroller, e.g. <code>$(&quot;#about&quot;).nanoScroller({ paneClass: &#39;myclass&#39; });</code></p>
<p>There are a few options that you can change when running nanoScroller, e.g. <code>$(&quot;.nano&quot;).nanoScroller({ paneClass: &#39;myclass&#39; });</code></p>

<h4>iOSNativeScrolling</h4>

Expand Down Expand Up @@ -90,48 +92,48 @@ <h4>scroll:</h4>

<p>To scroll at the top:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ scroll: &#39;top&#39; });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ scroll: &#39;top&#39; });
</code></pre>

<p>To scroll at the bottom:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ scroll: &#39;bottom&#39; });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ scroll: &#39;bottom&#39; });
</code></pre>

<p>To scroll to an element:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ scroll: $(&#39;#a_node&#39;) });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ scroll: $(&#39;#a_node&#39;) });
</code></pre>

<h4>stop:</h4>

<p>To stop the operation:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ stop: true });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ stop: true });
</code></pre>

<h4>nanoScroller();</h4>

<p>Refresh the scrollbar:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller();
<pre><code>$(&quot;.nano&quot;).nanoScroller();
</code></pre>

<h3>Advanced methods</h3>

<p>To scroll at the top with an offset value:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ scrollTop: value });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ scrollTop: value });
</code></pre>

<p>To scroll at the bottom with an offset value:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ scrollBottom: value });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ scrollBottom: value });
</code></pre>

<p>To scroll to an element:</p>

<pre><code>$(&quot;#about&quot;).nanoScroller({ scrollTo: $(&#39;#a_node&#39;) });
<pre><code>$(&quot;.nano&quot;).nanoScroller({ scrollTo: $(&#39;#a_node&#39;) });
</code></pre>

<h3>Custom events</h3>
Expand All @@ -140,7 +142,7 @@ <h4>&#39;scrollend&#39;</h4>

<p>A custom <code>&#39;scrollend&#39;</code> event is triggered on the element every time the user has scrolled to the end of the content element. Some browsers trigger this event more than once each time, so to listen to the custom event, instead of using jQuery&#39;s normal <code>.bind</code> or <code>.on</code>, you most likely want to use <a href="https://github.com/diaspora/jquery-debounce">this tiny jQuery debounce plugin</a> to prevent browsers from firing your function more than once every 100ms.</p>

<pre><code>$(&quot;#about&quot;).debounce(&quot;scrollend&quot;, function() {
<pre><code>$(&quot;.nano&quot;).debounce(&quot;scrollend&quot;, function() {
alert(&quot;The end&quot;);
}, 100);
</code></pre>
Expand Down Expand Up @@ -201,7 +203,7 @@ <h3>Browser compatibility</h3>

<h3>Using a polyfill for better mobile browser support</h3>

<p>You can use <a href="https://github.com/filamentgroup/Overthrow/">overthrow.js</a> polyfill (~1.5kb minified and gzipped) to make nanoScoller work on many mobile devices. It emulates CSS overflow (overflow: auto;/overflow: scroll;) in devices that are lacking it.</p>
<p>You can use <a href="https://github.com/filamentgroup/Overthrow/">overthrow.js</a> polyfill (~1.5kb minified and gzipped) to make nanoScroller work on many mobile devices. It emulates CSS overflow (overflow: auto;/overflow: scroll;) in devices that are lacking it.</p>

<p>To use overthrow, link to the javascript file in your HTML document...</p>

Expand All @@ -215,6 +217,14 @@ <h3>Using a polyfill for better mobile browser support</h3>
&lt;/div&gt;
</code></pre>

<h2>Sites that use nanoScroller</h2>

<p>If you wish to include your site in this list, you can do so by tweeting the link on Twitter with a <code>#nanoScroller</code> hashtag.</p>

<ul>
<li><a href="http://makechat.com">makechat.com</a></li>
</ul>

<h3>Contributors</h3>

<ul>
Expand All @@ -236,14 +246,9 @@ <h3>Contributors</h3>
<li><a href="https://github.com/Dlom">Dlom</a></li>
</ul>

<h3>From the author</h3>

<p>I wrote this plugin out of necessity for a JavaScript project with designers and front-end developers in mind. Please also note that I will not be liable to fix your problem just in case you plan to use this commercially and some unforseen event arises. However, I will do what I can to immediately patch a solution.</p>

<h3>Credits</h3>

<ul>
<li>Initially written by <a href="http://jamesflorentino.com">James Florentino</a> in <a href="http://coffeescript.org">CoffeeScript</a></li>
<li>Released under <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a></li>
<li>If you write CoffeeScript and you wish to improve the code, please feel free to fork the project.</li>
</ul>

0 comments on commit 1013fda

Please sign in to comment.