Quinn elements now fill the entire wrapper.

In the past, when you provided a wrapper element to Quinn, it would
reduce the size of the slider "bar" so that both the bar and the handle
fit within the wrapper. As such, you had to set dimensions on the
wrapper sufficiently large to fit both.

Now, the wrapper element should be sized to fit the bar *only*. For
example, the default Quinn theme wrapper element is now expected to be
only 5px high, instead of the previous 22. This means that the vertical
alignment of Quinn will likely look a little out of place on your site.
To adjust for this, add a suitable amount of "margin-top" to the
element.

Author: antw

docs/jquery.quinn.html

@@ -1137,7 +1137,7 @@ <h3>render</h3>
       <td class=code>
         <div class='highlight'><pre>    <span class="nx">Quinn</span><span class="p">.</span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">render</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
         <span class="kd">var</span> <span class="nx">barWidth</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">width</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">width</span><span class="p">(),</span>
-            <span class="nx">movableRange</span><span class="p">,</span> <span class="nx">handleWidth</span><span class="p">,</span> <span class="nx">handleDangle</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">length</span><span class="p">;</span>
+            <span class="nx">movableRange</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">length</span><span class="p">;</span>
 
         <span class="kd">function</span> <span class="nx">addRoundingElements</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
             <span class="nx">element</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;div class=&quot;left&quot; /&gt;&#39;</span><span class="p">));</span>
@@ -1195,30 +1195,23 @@ <h3>render</h3>
 elements widths and positions as necessary &hellip;</p>
       </td>
       <td class=code>
-        <div class='highlight'><pre>        <span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">barWidth</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span> <span class="p">});</span>
-
-        <span class="nx">handleWidth</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">handleWidth</span> <span class="o">||</span>
-                      <span class="k">this</span><span class="p">.</span><span class="nx">quinn</span><span class="p">.</span><span class="nx">handles</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">element</span><span class="p">.</span><span class="nx">width</span><span class="p">();</span></pre></div>
+        <div class='highlight'><pre>        <span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">barWidth</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span> <span class="p">});</span></pre></div>
       </td>
     </tr>
     <tr id='section-62'>
       <td class=docs>
         <div class="pilwrap">
           <a class="pilcrow" href="#section-62">&#182;</a>
         </div>
-        <p>The &ldquo;dangle&rdquo; allows the handle to appear slightly to the left of
-the slider bar.</p>
+        <p>TODO 5px is hard-coded for the standard Quinn theme. Following the</p>
+
+<pre><code> removal of the handleWidth option, perhaps it might be
+ prudent to add a "movementAdjust" option...
+</code></pre>
       </td>
       <td class=code>
-        <div class='highlight'><pre>        <span class="nx">handleDangle</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">handleWidth</span> <span class="o">*</span> <span class="mf">0.25</span><span class="p">);</span>
-
-        <span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
-            <span class="nx">marginLeft</span><span class="o">:</span> <span class="nx">handleDangle</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">,</span>
-            <span class="nx">width</span><span class="o">:</span>      <span class="p">(</span><span class="nx">barWidth</span> <span class="o">-</span> <span class="p">(</span><span class="nx">handleDangle</span> <span class="o">*</span> <span class="mi">2</span><span class="p">)).</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span>
-        <span class="p">});</span>
-
-        <span class="k">this</span><span class="p">.</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.movable-range&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span>
-            <span class="nx">width</span><span class="o">:</span> <span class="p">(</span><span class="nx">barWidth</span> <span class="o">-</span> <span class="nx">handleWidth</span><span class="p">).</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span>
+        <div class='highlight'><pre>        <span class="k">this</span><span class="p">.</span><span class="nx">wrapper</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.movable-range&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span>
+            <span class="nx">width</span><span class="o">:</span> <span class="p">(</span><span class="nx">barWidth</span> <span class="o">-</span> <span class="mi">5</span><span class="p">).</span><span class="nx">toString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span>
         <span class="p">});</span></pre></div>
       </td>
     </tr>

jquery.quinn.js

@@ -683,7 +683,7 @@
      */
     Quinn.Renderer.prototype.render = function () {
         var barWidth = this.options.width || this.wrapper.width(),
-            movableRange, handleWidth, handleDangle, i, length;
+            movableRange, i, length;
 
         function addRoundingElements(element) {
             element.append($('<div class="left" />'));
@@ -728,21 +728,11 @@
 
         this.bar.css({ width: barWidth.toString() + 'px' });
 
-        handleWidth = this.options.handleWidth ||
-                      this.quinn.handles[0].element.width();
-
-        // The "dangle" allows the handle to appear slightly to the left of
-        // the slider bar.
-
-        handleDangle = Math.round(handleWidth * 0.25);
-
-        this.bar.css({
-            marginLeft: handleDangle.toString() + 'px',
-            width:      (barWidth - (handleDangle * 2)).toString() + 'px'
-        });
-
+        // TODO 5px is hard-coded for the standard Quinn theme. Following the
+        //      removal of the handleWidth option, perhaps it might be
+        //      prudent to add a "movementAdjust" option...
         this.wrapper.find('.movable-range').css({
-            width: (barWidth - handleWidth).toString() + 'px'
+            width: (barWidth - 5).toString() + 'px'
         });
 
         // Finally, these events are triggered when the user seeks to

jquery.quinn.min.js

@@ -17,13 +17,20 @@
 
 /* Slider height */
 .quinn, .quinn .bar, .quinn .active-bar, .quinn .movable-range {
-  height: 18px;
+  height: 5px;
 }
 
 /* Float clearing */
 
 .quinn {
-  overflow: hidden;
+  padding-right: 5px;
+  zoom: 1;
+}
+
+.quinn:after {
+  content: ""
+  display: table;
+  clear: both;
 }
 
 /**
@@ -48,31 +55,31 @@
 .quinn .bar .left, .quinn .bar .main, .quinn .bar .right,
 .quinn .active-bar .left, .quinn .active-bar .main,
 .quinn .active-bar .right {
-  height: 18px;
+  height: 5px;
   position: absolute;
   z-index: 1;
 }
 
 .quinn .bar .left, .quinn .bar .right,
 .quinn .active-bar .left, .quinn .active-bar .right {
-  height: 18px;
+  height: 5px;
   width: 4px
 }
 
 .quinn .bar .left, .quinn .active-bar .left {
-  background-position: -50px -17px;
+  background-position: -50px -25px;
   left: 0;
 }
 
 .quinn .bar .main, .quinn .active-bar .main {
-  background-position: 0 -142px;
+  background-position: 0 -150px;
   background-repeat: repeat-x;
   left: 4px;
   right: 4px;
 }
 
 .quinn .bar .right, .quinn .active-bar .right {
-  background-position: -56px -17px;
+  background-position: -56px -25px;
   right: 0px;
 }
 
@@ -97,16 +104,16 @@
 }
 
 .quinn .active-bar .left {
-  background-position: -70px -17px;
+  background-position: -70px -25px;
 }
 
 .quinn .active-bar .main {
-  background-position: 0 -192px;
+  background-position: 0 -200px;
   right: 4px;
 }
 
 .quinn .active-bar .right {
-  background-position: -76px -17px;
+  background-position: -76px -25px;
   right: 0px;
 }
 
@@ -126,11 +133,12 @@
 .quinn .handle {
   background-position: 0 0;
   cursor: default;
-  height: 22px;
+  height: 21px;
   left: 0%;
+  margin: -8px 0 0 -8px;
   outline: none;
   position: absolute;
-  width: 22px;
+  width: 21px;
   z-index: 5;
 }
 
@@ -157,7 +165,7 @@
 .quinn.range .handle {
   background-position: -100px 0;
   height: 26px;
-  margin-top: -1px;
+  margin-top: -9px;
   width: 19px;
 }
 

quinn.css

@@ -345,12 +345,17 @@ p code {
   /* width is 487px */
 }
 
-.example .slider {
+.example .widget {
   border-right: 1px solid #d9e0e4;
   float: left;
   margin: -24px 0;
-  padding: 24px 24px 24px 0;
-  width: 375px;
+  padding: 32px 24px 29px 5px;
+  width: 370px;
+}
+
+.example .widget .slider {
+  height: 5px;
+  width: 365px;
 }
 
 .example .value {
@@ -387,7 +392,7 @@ p code {
 
 .example .slider .bar {
     /* reduces page "jumping" while the images load. */
-    min-height: 18px;
+    min-height: 5px;
 }
 
 .example.hide-code pre {
@@ -409,6 +414,15 @@ ul.yes li:before {
 
 /* Rainbow theme adjustment. */
 
+.example.rainbow .widget {
+  padding-bottom: 30px;
+}
+
 .example.rainbow .slider {
-    padding-top: 23px;
+  padding-top: 0px;
+  margin-top: -1px;
+}
+
+.example.rainbow .slider .handle {
+  margin-left: -9px;
 }

vendor/examples.css

@@ -84,7 +84,8 @@
 
         exampleEl = $('<div class="example" id="' + exampleID + '"></div>');
 
-        exampleEl.append($('<div class="slider"></div>'));
+        exampleEl.append($('<div class="widget"></div>').append(
+            $('<div class="slider"></div>')));
         exampleEl.append($('<div class="value"></div>'));
         exampleEl.append($('<pre></pre>').append(
             $('<code class="javascript"></code>').html($this.html())