Use jquery.scrollSync.js jQuery plugin

to synchronize the scroll position between the #wmd-input
and #wmd-preview, and update README.md file and help popup

README.md

@@ -55,6 +55,6 @@ MIT license
 
 Dependencies
 ---
-**Writing** uses [Pagedown](https://code.google.com/archive/p/pagedown/), [Pagedown Extra](https://github.com/jmcmanus/pagedown-extra), [MathJax](https://www.mathjax.org/), StackOverflow's [editor code](https://gist.github.com/gdalgas/a652bce3a173ddc59f66), and the [Computer Modern](http://cm-unicode.sourceforge.net/) font.
+**Writing** uses [Pagedown](https://code.google.com/archive/p/pagedown/), [Pagedown Extra](https://github.com/jmcmanus/pagedown-extra), [MathJax](https://www.mathjax.org/), StackOverflow's [editor code](https://gist.github.com/gdalgas/a652bce3a173ddc59f66), [jquery.scrollSync](http://trunk.xtf.dk/Project/ScrollSync/) and the [Computer Modern](http://cm-unicode.sourceforge.net/) font.
 
 *Note: Some of these libraries have been slightly modified (a few lines of code), to make it work all together, that's why they are included in this package.*

index.html

@@ -77,6 +77,7 @@
 <script type="text/javascript" src="mathjax-editing_writing.js"></script>
 <!-- <script type="text/javascript" src="jspdf.min.js"></script> -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<script src="jquery.scrollSync.js"></script>
 <input id="openFileInput" type="file" />
 <div id="wmd-button-bar" class="wmd-button-bar"></div>
 <textarea id="wmd-input" class="column wmd-input" spellcheck="false"></textarea>
@@ -125,11 +126,17 @@
 -----
 Made by <a href="https://twitter.com/JosephErnest">@JosephErnest</a>
 <a href="https://github.com/josephernest/writing">https://github.com/josephernest/writing</a>
-Uses <a href="https://code.google.com/archive/p/pagedown/">Pagedown</a>, <a href="https://github.com/jmcmanus/pagedown-extra">Pagedown Extra</a>, <a href="https://www.mathjax.org/">MathJax</a>, StackOverflow's <a href="https://gist.github.com/gdalgas/a652bce3a173ddc59f66">editor</a> code and the <a href="http://cm-unicode.sourceforge.net/">Computer Modern</a> font.
+Uses <a href="https://code.google.com/archive/p/pagedown/">Pagedown</a>, <a
+href="https://github.com/jmcmanus/pagedown-extra">Pagedown Extra</a>, <a
+href="https://www.mathjax.org/">MathJax</a>, StackOverflow's <a
+href="https://gist.github.com/gdalgas/a652bce3a173ddc59f66">editor</a> code, <a
+href="http://trunk.xtf.dk/Project/ScrollSync/">jquery.scrollSync</a> and the <a href="http://cm-unicode.sourceforge.net/">Computer Modern</a> font.
 </pre>    
 </div>
 
 <script type="text/javascript">
+$("#wmd-input, #wmd-preview").scrollSync();
+
 togglemathjax = function(enabled) {
     if (enabled) {
         if (!latexenabledonce)

jquery.scrollSync.js

@@ -0,0 +1,29 @@
+/*
+ * jquery.scrollSync
+ * Synchronize scroll between multiple containers with varying size
+ * Date: 20151201
+ * 
+ * Thomas Frost
+ * http://xtf.dk/
+ *
+ * Required:
+ * jQuery
+ *  http://jquery.com/
+ * 
+ * Usage:
+ * $('.scrollable').scrollSync();
+ */
+(function ($) {
+    $.fn.scrollSync = function () {
+        var $this = $(this);
+        $this.on('scroll', function (e) {
+            var $sender = $(e.currentTarget);
+            if ($sender.is(":hover")) {
+                var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
+                $this.not($sender).each(function (i, other) {
+                    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
+                });
+            }
+        });
+    };
+})(jQuery);