Skip to content
This repository

Adding optional Even sizing flag #25

Closed
wants to merge 2 commits into from

2 participants

Nick Busey Christopher Cliff
Nick Busey

Added optional 'even' flag. When passed as true, all sausages will be equally sized and spaced, regardless of height in the page.

Updated index.html, added a minified version.

Christopher Cliff

Not sure I see the value in this. Sausage exists to provide information about the size of sections relative to the document. If you omit the "smart" sizing of links, you're left with a conventional pagination scheme rotated 90 degrees.

Maybe I'm missing something...

Nick Busey

You're not missing anything, if you don't think it's useful that's fine.

I added this because I was building a vertical portfolio page, with multiple sections which are all very tall. Only one section is open at a time, so Sausage would render 1px high links for the closed sections, while the current section took up the whole height of the page.

"You're left with a conventional pagination scheme rotated 90 degrees." This is exactly what was needed for this project, plus the benefit of highlighting the currently selected section.

On very, very long pages, I think this can still be very valuable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.

Showing 2 changed files with 30 additions and 16 deletions. Show diff stats Hide diff stats

  1. +7 7 index.html
  2. +23 9 jquery.sausage.js
14 index.html
@@ -125,13 +125,13 @@
125 125
126 126 <table>
127 127 <tr>
128   - <td><a href="jquery.sausage.js">Development Version (1.0.0)</a></td>
  128 + <td><a href="jquery.sausage.js">Development Version (1.0.1)</a></td>
129 129 <td><i>11 kb, Uncompressed with Comments</i></td>
130 130 </tr>
131   - <!--<tr>
132   - <td><a href="jquery.sausage-min.js">Production Version (0.1.0)</a></td>
  131 + <tr>
  132 + <td><a href="jquery.sausage.min.js">Production Version (1.0.1)</a></td>
133 133 <td><i>3kb, Minified and Gzipped</i></td>
134   - </tr>-->
  134 + </tr>
135 135 </table>
136 136
137 137 <p>Sausage depends on both <a href="http://jquery.com">jQuery</a> and the <a href="http://jqueryui.com">jQuery UI</a> widget factory.</p>
@@ -152,11 +152,11 @@
152 152 <p>For more advanced usage, refer to the <a href="https://github.com/christophercliff/sausage/tree/master/examples">examples</a> or view the <a href="docs/jquery.sausage.html">annotated source</a>.</p>
153 153
154 154 </li>
155   - <!--<li class="section" data-name="Change Log">
  155 + <li class="section" data-name="Change Log">
156 156
157 157 <h2>Change Log</h2>
158   -
159   - </li>-->
  158 + <p><strong>1.0.1</strong> - Added optional 'even' flag. When passed as true, all sausages will be equally sized and spaced, regardless of height in the page.</p>
  159 + </li>
160 160 </ol>
161 161
162 162 <h2 class="footer">Created by <a href="http://christophercliff.com">Christopher Cliff</a></h2>
32 jquery.sausage.js
... ... @@ -1,4 +1,4 @@
1   -// jquery.sausage.js 1.0.0
  1 +// jquery.sausage.js 1.0.1
2 2 // (c) 2011 Christopher Cliff
3 3 // Freely distributed under the MIT license.
4 4 // For all details and documentation:
@@ -44,8 +44,13 @@
44 44 //
45 45 content: function (i, $page) {
46 46 return '<span class="sausage-span">' + (i + 1) + '</span>';
47   - }
48   -
  47 + },
  48 +
  49 + // ### even 'boolen'
  50 + //
  51 + // When passed as true, all sausages will be equally sized and spaced, regardless of height in the page.
  52 + even: false
  53 +
49 54 },
50 55
51 56 // # Private Methods
@@ -335,7 +340,9 @@
335 340 $page,
336 341 s = [],
337 342 offset_p,
338   - offset_s;
  343 + offset_s,
  344 + even_height,
  345 + even_top;
339 346
340 347 self.offsets = [];
341 348 self.count = $items.length;
@@ -350,11 +357,18 @@
350 357 for (var i = 0; i < self.count; i++)
351 358 {
352 359 $page = $items.eq(i);
353   - offset_p = $page.offset();
354   - offset_s = offset_p.top/h_doc*h_win;
355   -
356   - s.push('<div class="sausage' + ((i === self.current) ? ' sausage-current' : '') + '" style="height:' + ($page.outerHeight()/h_doc*h_win) + 'px;top:' + offset_s + 'px;">' + self.options.content(i, $page) + '</div>');
357   -
  360 + if (!self.options.even) {
  361 + offset_p = $page.offset();
  362 + offset_s = offset_p.top/h_doc*h_win;
  363 +
  364 + s.push('<div class="sausage' + ((i === self.current) ? ' sausage-current' : '') + '" style="height:' + ($page.outerHeight()/h_doc*h_win) + 'px;top:' + offset_s + 'px;">' + self.options.content(i, $page) + '</div>');
  365 + } else {
  366 + even_height = h_win/self.count;
  367 + even_top = even_height*i;
  368 + offset_p = $page.offset();
  369 + s.push('<div class="sausage' + ((i === self.current) ? ' sausage-current' : '') + '" style="height:' + even_height + 'px;top:' + even_top + 'px;">' + self.options.content(i, $page) + '</div>');
  370 + }
  371 +
358 372 // Create `self.offsets` for calculating current sausage.
359 373 self.offsets.push(offset_p.top);
360 374 }

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.