Synchronize scrolling between the input textarea and the preview zone

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

@@ -10,6 +10,7 @@
 #           Pagedown Extra (https://github.com/jmcmanus/pagedown-extra)
 #           MathJax (https://www.mathjax.org/)
 #           StackOverflow's editor (https://gist.github.com/gdalgas/a652bce3a173ddc59f66)
+#           jquery.scrollSync (http://trunk.xtf.dk/Project/ScrollSync/)
 #
 -->
 
@@ -88,6 +89,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>
@@ -137,11 +139,29 @@
 -----
 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();
+
+function scrollBothToTop(cb) {
+    // It only functions if async on page load
+    setTimeout(function () {
+        $("#wmd-input")[0].scrollTop = 0;
+        $("#wmd-preview")[0].scrollTop = 0;
+
+        if (cb) {
+            cb();
+        }
+    }, 0);
+}
+
 togglemathjax = function(enabled) {
     if (enabled) {
         if (!latexenabledonce)
@@ -177,6 +197,7 @@
 
 if (localStorage.getItem("writing") !== null) {
     $('#wmd-input').val(localStorage.getItem("writing"));
+    scrollBothToTop();
 }
 
 openFile = function(e) {         
@@ -192,6 +213,7 @@
     var contents = e.target.result;
     $('#wmd-input').val(contents);        // display file content
     editor.refreshPreview();
+    scrollBothToTop();
   };
   reader.readAsText(file);
 }

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);