From e923ac2cd7cbf67608baeb9bc3b9874fba08c254 Mon Sep 17 00:00:00 2001
From: Hilton Janfield <hilton@janfield.ca>
Date: Sun, 13 Sep 2015 19:45:41 -0700
Subject: [PATCH 1/3] Format LESS file, rename 'default' handle style to
 'stripes', add 'default' as alias.

---
 css/jquery.enhsplitter.css  | 24 +++++++++++++++---------
 css/jquery.enhsplitter.less | 32 ++++++++++++++++++--------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css
index 7932fe7..907a4ec 100644
--- a/css/jquery.enhsplitter.css
+++ b/css/jquery.enhsplitter.css
@@ -76,9 +76,9 @@
   border-color: #000000;
 }
 .splitter_bar.splitter-invisible {
-  background: none!important;
-  border: none!important;
-  box-shadow: none!important;
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 .splitter_bar.splitter-invisible .splitter_handle,
 .splitter_bar.splitter-handle-none .splitter_handle {
@@ -97,16 +97,19 @@
   margin-top: -25px;
   height: 50px;
 }
-.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle {
+.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle,
+.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle {
   width: 3px;
   border-left: 1px solid #999999;
   border-right: 1px solid #999999;
   background-color: transparent;
 }
-.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
+.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:hover,
+.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover {
   border-color: #666666;
 }
-.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active {
+.splitter-vertical > .splitter_bar.splitter-handle-default > .splitter_handle:active,
+.splitter-vertical > .splitter_bar.splitter-handle-stripes > .splitter_handle:active {
   border-color: #000000;
 }
 .splitter-vertical > .splitter_bar.splitter-handle-bar > .splitter_handle {
@@ -126,17 +129,20 @@
 .splitter-horizontal > .splitter_bar > .splitter_handle {
   width: 50px;
 }
-.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle {
+.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle,
+.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle {
   height: 3px;
   margin-top: 1px;
   border-top: 1px solid #999999;
   border-bottom: 1px solid #999999;
   background-color: transparent;
 }
-.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover {
+.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:hover,
+.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:hover {
   border-color: #666666;
 }
-.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active {
+.splitter-horizontal > .splitter_bar.splitter-handle-default > .splitter_handle:active,
+.splitter-horizontal > .splitter_bar.splitter-handle-stripes > .splitter_handle:active {
   border-color: #000000;
 }
 .splitter-horizontal > .splitter_bar.splitter-handle-bar > .splitter_handle {
diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less
index 57ef682..08364c2 100644
--- a/css/jquery.enhsplitter.less
+++ b/css/jquery.enhsplitter.less
@@ -106,9 +106,9 @@
   }
 
   &.splitter-invisible {
-    background: none!important;
-    border: none!important;
-    box-shadow: none!important;
+    background: none !important;
+    border: none !important;
+    box-shadow: none !important;
   }
 
   &.splitter-invisible,
@@ -134,7 +134,8 @@
       height: @handle_size;
     }
 
-    &.splitter-handle-default {
+    &.splitter-handle-default,
+    &.splitter-handle-stripes {
       > .splitter_handle {
         width: 3px;
         border-left: 1px solid @handle_color;
@@ -178,7 +179,8 @@
       width: @handle_size;
     }
 
-    &.splitter-handle-default {
+    &.splitter-handle-default,
+    &.splitter-handle-stripes {
       > .splitter_handle {
         height: 3px;
         margin-top: 1px;
@@ -212,17 +214,19 @@
   }
 }
 
-.splitter_container.splitter-active > .splitter_bar {
-  z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */
+.splitter_container.splitter-active {
+  > .splitter_bar {
+    z-index: 1000; /* Important to keep z-index of active splitter above .splitterMask. */
 
-  > .splitter_handle {
-    border-color: @handle_active;
-    cursor: inherit;
-  }
+    > .splitter_handle {
+      border-color: @handle_active;
+      cursor: inherit;
+    }
 
-  &.splitter-handle-bar > .splitter_handle,
-  &.splitter-handle-block > .splitter_handle {
-    background-color: @handle_active;
+    &.splitter-handle-bar > .splitter_handle,
+    &.splitter-handle-block > .splitter_handle {
+      background-color: @handle_active;
+    }
   }
 }
 

From 5067a6e0d4c8791f1e54f8017f87a0f331f0ef34 Mon Sep 17 00:00:00 2001
From: Hilton Janfield <hilton@janfield.ca>
Date: Sun, 13 Sep 2015 19:48:20 -0700
Subject: [PATCH 2/3] Implement and document 'dots' handle style.

---
 css/jquery.enhsplitter.css  | 23 +++++++++++++++
 css/jquery.enhsplitter.less | 59 +++++++++++++++++++++++++++++++++++++
 demo.html                   |  6 ++--
 test.html                   |  3 +-
 4 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css
index 907a4ec..08ce509 100644
--- a/css/jquery.enhsplitter.css
+++ b/css/jquery.enhsplitter.css
@@ -118,6 +118,14 @@
 .splitter-vertical > .splitter_bar.splitter-handle-block > .splitter_handle {
   width: 5px;
 }
+.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  background-color: #c0c0c0;
+  background-image: radial-gradient(circle 3px at 50% 10%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #666666 1.5px, transparent 2px);
+}
+.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
+.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
+  background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
+}
 .splitter-horizontal > .splitter_bar {
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
@@ -153,6 +161,15 @@
   height: 5px;
   margin-top: 1px;
 }
+.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  height: 100%;
+  background-color: #c0c0c0;
+  background-image: radial-gradient(circle 3px at 10% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #666666 1.5px, transparent 2px);
+}
+.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
+.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
+  background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
+}
 .splitter_container.splitter-active > .splitter_bar {
   z-index: 1000;
   /* Important to keep z-index of active splitter above .splitterMask. */
@@ -165,6 +182,12 @@
 .splitter_container.splitter-active > .splitter_bar.splitter-handle-block > .splitter_handle {
   background-color: #000000;
 }
+.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
+}
+.splitter_container.splitter-active.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
+  background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
+}
 .splitter_mask {
   position: fixed;
   left: 0;
diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less
index 08364c2..11d97d5 100644
--- a/css/jquery.enhsplitter.less
+++ b/css/jquery.enhsplitter.less
@@ -163,6 +163,27 @@
         width: @splitter_size - 2;
       }
     }
+
+    &.splitter-handle-dots {
+      > .splitter_handle {
+        background-color: @splitter_color;
+        background-image: radial-gradient(circle 3px at 50% 10%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 50% 30%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 50% 70%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 50% 90%, @splitter_shadow 1.5px, transparent 2px);
+
+        &:hover,
+        &:active {
+          background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
+        }
+      }
+    }
+
   }
 }
 
@@ -211,6 +232,28 @@
         margin-top: 1px;
       }
     }
+
+    &.splitter-handle-dots {
+      > .splitter_handle {
+        height: 100%;
+        background-color: @splitter_color;
+        background-image: radial-gradient(circle 3px at 10% 50%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 30% 50%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 70% 50%, @splitter_shadow 1.5px, transparent 2px),
+        radial-gradient(circle 3px at 90% 50%, @splitter_shadow 1.5px, transparent 2px);
+
+        &:hover,
+        &:active {
+          background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
+          radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px);
+        }
+      }
+    }
+
   }
 }
 
@@ -228,6 +271,22 @@
       background-color: @handle_active;
     }
   }
+
+  &.splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
+    background-image: radial-gradient(circle 3px at 50% 10%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 30%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 70%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 90%, @handle_active 1.5px, transparent 2px);
+  }
+
+  &.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
+    background-image: radial-gradient(circle 3px at 10% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 30% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 50% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
+    radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px),
+  }
 }
 
 .splitter_mask {
diff --git a/demo.html b/demo.html
index d1e4751..6a00d10 100644
--- a/demo.html
+++ b/demo.html
@@ -390,16 +390,18 @@ <h1>Options</h1>
 
         <dt>handle</dt>
         <dd>
-            <code>['default'|'bar'|'block'|'none'|&lt;user-defined&gt;]</code>
+            <code>['default'|'stripes'|'bar'|'block'|'dots'|'none'|&lt;user-defined&gt;]</code>
             <code class="default">Default: 'default'</code>
 
             <p>
                 Defines how the the collapse is drawn.
             </p>
             <ul>
-                <li><code>'default'</code> draws a striped handle, as shown in the first two examples above.</li>
+                <li><code>'default'</code> is currently equivalent to 'stripes' but may change in the future.</li>
+                <li><code>'stripes'</code> draws a striped handle, as shown in the first two examples above.</li>
                 <li><code>'bar'</code> draws a narrow grey bar, as shown in the third example above.</li>
                 <li><code>'block'</code> draws a wide grey block that fills the width of the splitter.</li>
+                <li><code>'dots'</code> draws five small equidistant dots with no border.</li>
                 <li><code>'none'</code> hides the handle completely, disabling it. This effect is also achieved
                     when setting <code>{invisible: true}</code>; it is not necessary to set both.
                 </li>
diff --git a/test.html b/test.html
index 2f3b35e..476002e 100644
--- a/test.html
+++ b/test.html
@@ -159,6 +159,7 @@ <h1>jquery.enhsplitter Features Tests</h1>
 
     addTest(
             {
+                handle: 'dots',
                 onDragStart: function (e, splitter) {
                     handle = splitter.find('.splitter_handle');
                 },
@@ -171,7 +172,7 @@ <h1>jquery.enhsplitter Features Tests</h1>
                 }
             },
             'Demonstration of onDrag event by setting up a crappy handle size animation.<br>' +
-            'Handle should pulsate in size as mouse moves left/right.<br>' +
+            'Handle should be dotted ("dots" style) and pulsate in size as mouse moves left/right.<br>' +
             'This entire page also demonstrates the onDrag event; an onDrag function is used to show the panel pixel' +
             'sizes when dragging splitters around.'
     );

From baecd7d210e88a645c0f9b1cc68fe98b1530abb9 Mon Sep 17 00:00:00 2001
From: Hilton Janfield <hilton@janfield.ca>
Date: Sun, 13 Sep 2015 21:30:28 -0700
Subject: [PATCH 3/3] Add 'lotsofdots' handle type, and minor fix for 'dots'.

---
 css/jquery.enhsplitter.css  | 35 ++++++++++++++++-
 css/jquery.enhsplitter.less | 78 ++++++++++++++++++++++++++++++++++++-
 demo.html                   |  3 +-
 test.html                   |  7 ++--
 4 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/css/jquery.enhsplitter.css b/css/jquery.enhsplitter.css
index 08ce509..da6cf36 100644
--- a/css/jquery.enhsplitter.css
+++ b/css/jquery.enhsplitter.css
@@ -5,6 +5,11 @@
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
+ * All classes to begin with 'splitter'.
+ * Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
+ * Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
+ *
+ * Do not make changes to the CSS file; edit the LESS file and compile.
  */
 .splitter_container {
   position: relative;
@@ -119,13 +124,25 @@
   width: 5px;
 }
 .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle {
-  background-color: #c0c0c0;
+  margin-left: -1px;
+  background-color: transparent;
   background-image: radial-gradient(circle 3px at 50% 10%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #666666 1.5px, transparent 2px);
 }
 .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
 .splitter-vertical > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
   background-image: radial-gradient(circle 3px at 50% 10%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 30%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 70%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 90%, #000000 1.5px, transparent 2px);
 }
+.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+  height: 100px;
+  margin-top: -50px;
+  margin-left: -1px;
+  background-color: transparent;
+  background-image: radial-gradient(circle 1px at 50% 5%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 10%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 15%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 20%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 25%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 30%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 35%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 40%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 45%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 55%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 60%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 65%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 70%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 75%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 80%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 85%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 90%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 95%, #666666 1.5px, transparent 1.5px);
+}
+.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
+.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
+  background-color: #f0f0f0;
+}
 .splitter-horizontal > .splitter_bar {
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
@@ -163,13 +180,24 @@
 }
 .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
   height: 100%;
-  background-color: #c0c0c0;
+  margin-top: -1px;
+  background-color: transparent;
   background-image: radial-gradient(circle 3px at 10% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #666666 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #666666 1.5px, transparent 2px);
 }
 .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:hover,
 .splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle:active {
   background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
 }
+.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+  height: 100%;
+  width: 100px;
+  background-color: transparent;
+  background-image: radial-gradient(circle 1px at 5% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 10% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 15% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 20% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 25% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 30% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 35% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 40% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 45% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 50% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 55% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 60% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 65% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 70% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 75% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 80% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 85% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 90% 50%, #666666 1.5px, transparent 1.5px), radial-gradient(circle 1px at 95% 50%, #666666 1.5px, transparent 1.5px);
+}
+.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:hover,
+.splitter-horizontal > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle:active {
+  background-color: #f0f0f0;
+}
 .splitter_container.splitter-active > .splitter_bar {
   z-index: 1000;
   /* Important to keep z-index of active splitter above .splitterMask. */
@@ -188,6 +216,9 @@
 .splitter_container.splitter-active.splitter-horizontal > .splitter_bar.splitter-handle-dots > .splitter_handle {
   background-image: radial-gradient(circle 3px at 10% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 30% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 50% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 70% 50%, #000000 1.5px, transparent 2px), radial-gradient(circle 3px at 90% 50%, #000000 1.5px, transparent 2px);
 }
+.splitter_container.splitter-active.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+  background-color: #f0f0f0;
+}
 .splitter_mask {
   position: fixed;
   left: 0;
diff --git a/css/jquery.enhsplitter.less b/css/jquery.enhsplitter.less
index 11d97d5..09ec45e 100644
--- a/css/jquery.enhsplitter.less
+++ b/css/jquery.enhsplitter.less
@@ -5,6 +5,11 @@
  *
  * https://github.com/hiltonjanfield/jquery.enhsplitter
  *
+ * All classes to begin with 'splitter'.
+ * Standard container/object classes use _ separator (.splitter_container, .splitter_panel, etc.)
+ * Modifier/option classes use - separator (.splitter-vertical, .splitter-handle-dots, etc.)
+ *
+ * Do not make changes to the CSS file; edit the LESS file and compile.
  */
 
 @splitter_color: silver;
@@ -166,7 +171,8 @@
 
     &.splitter-handle-dots {
       > .splitter_handle {
-        background-color: @splitter_color;
+        margin-left: -1px;
+        background-color: transparent;
         background-image: radial-gradient(circle 3px at 50% 10%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 50% 30%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
@@ -184,6 +190,38 @@
       }
     }
 
+    &.splitter-handle-lotsofdots {
+      > .splitter_handle {
+        height: 100px;
+        margin-top: -50px;
+        margin-left: -1px;
+        background-color: transparent;
+        background-image: radial-gradient(circle 1px at 50% 5%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 10%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 15%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 20%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 25%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 30%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 35%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 40%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 45%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 55%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 60%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 65%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 70%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 75%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 80%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 85%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 90%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 95%, @splitter_shadow 1.5px, transparent 1.5px);
+
+        &:hover,
+        &:active {
+          background-color: #f0f0f0;
+        }
+      }
+    }
   }
 }
 
@@ -236,7 +274,8 @@
     &.splitter-handle-dots {
       > .splitter_handle {
         height: 100%;
-        background-color: @splitter_color;
+        margin-top: -1px;
+        background-color: transparent;
         background-image: radial-gradient(circle 3px at 10% 50%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 30% 50%, @splitter_shadow 1.5px, transparent 2px),
         radial-gradient(circle 3px at 50% 50%, @splitter_shadow 1.5px, transparent 2px),
@@ -254,6 +293,37 @@
       }
     }
 
+    &.splitter-handle-lotsofdots {
+      > .splitter_handle {
+        height: 100%;
+        width: 100px;
+        background-color: transparent;
+        background-image: radial-gradient(circle 1px at 5% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 10% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 15% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 20% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 25% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 30% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 35% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 40% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 45% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 50% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 55% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 60% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 65% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 70% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 75% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 80% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 85% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 90% 50%, @splitter_shadow 1.5px, transparent 1.5px),
+        radial-gradient(circle 1px at 95% 50%, @splitter_shadow 1.5px, transparent 1.5px);
+
+        &:hover,
+        &:active {
+          background-color: #f0f0f0;
+        }
+      }
+    }
   }
 }
 
@@ -287,6 +357,10 @@
     radial-gradient(circle 3px at 70% 50%, @handle_active 1.5px, transparent 2px),
     radial-gradient(circle 3px at 90% 50%, @handle_active 1.5px, transparent 2px),
   }
+
+  &.splitter-vertical > .splitter_bar.splitter-handle-lotsofdots > .splitter_handle {
+    background-color: #f0f0f0;
+  }
 }
 
 .splitter_mask {
diff --git a/demo.html b/demo.html
index 6a00d10..c756558 100644
--- a/demo.html
+++ b/demo.html
@@ -390,7 +390,7 @@ <h1>Options</h1>
 
         <dt>handle</dt>
         <dd>
-            <code>['default'|'stripes'|'bar'|'block'|'dots'|'none'|&lt;user-defined&gt;]</code>
+            <code>['default'|'stripes'|'bar'|'block'|'dots'|'lotsofdots'|'none'|&lt;user-defined&gt;]</code>
             <code class="default">Default: 'default'</code>
 
             <p>
@@ -402,6 +402,7 @@ <h1>Options</h1>
                 <li><code>'bar'</code> draws a narrow grey bar, as shown in the third example above.</li>
                 <li><code>'block'</code> draws a wide grey block that fills the width of the splitter.</li>
                 <li><code>'dots'</code> draws five small equidistant dots with no border.</li>
+                <li><code>'lotsofdots'</code> draws a series of small dots.</li>
                 <li><code>'none'</code> hides the handle completely, disabling it. This effect is also achieved
                     when setting <code>{invisible: true}</code>; it is not necessary to set both.
                 </li>
diff --git a/test.html b/test.html
index 476002e..7303674 100644
--- a/test.html
+++ b/test.html
@@ -128,10 +128,11 @@ <h1>jquery.enhsplitter Features Tests</h1>
     );
 
     addTest(
-            {rightMinSize: -10, position: '120%', splitterSize: 13, handle: 'block'},
-            'Attempt to break limit and position settings.<br>' +
+            {rightMinSize: -10, position: '120%', splitterSize: 13, handle: 'lotsofdots'},
+            'Touch screen example, plus attempt to break limit and position settings (out of range).<br>' +
             'Splitter should start within the container (at the edge, having been restricted to 100%), and remain unable to go beyond the edges.<br>' +
-            'Splitter bar itself should be twice as wide (13 pixels vs. default 7) but still remain fully within the panel.'
+            'Splitter bar itself should be twice as wide (13 pixels vs. default 7) but still remain fully within the panel.<br>' +
+            'Splitter handle should be "lotsofdots" style, twice as tall as normal with a line of dots. Despite its narrow appearance, this handle takes up the full width of the splitter and is easier to hit on touch screens.'
     );
 
     addTest(