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.
antw · Feb 14, 2012 · ea29f2f · ea29f2f
1 parent e13d498
commit ea29f2f
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 55 deletions.
diff --git a/docs/jquery.quinn.html b/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>

diff --git a/jquery.quinn.js b/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

diff --git a/jquery.quinn.min.js b/jquery.quinn.min.js
diff --git a/quinn.css b/quinn.css
@@ -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;
 }
 

diff --git a/vendor/examples.css b/vendor/examples.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;
 }
diff --git a/vendor/examples.js b/vendor/examples.js
@@ -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())