Smart floating horizontal scrollbar for inline code examples

http://benalman.com/

by secretgspot

HTML

<h1>jQuery Floating Scrollbar</h1>
<p>Just a quick demo. <a href="https://gist.github.com/846423" target="_top">Get the source</a> and try for yourself!</p>

<p>scroll the browse and resize the window, and look at the code sample's scrollbar!</p>
<p>scroll the browse and resize the window, and look at the code sample's scrollbar!</p>
<p>scroll the browse and resize the window, and look at the code sample's scrollbar!</p>
<p>scroll the browse and resize the window, and look at the code sample's scrollbar!</p>

<h2>Content in a PRE, in a DIV</h2>

<h3>Using ::webkit-scrollbar CSS</h3>

<div class="sample webkit-scrollbar" style="width:30em;">
    <pre>This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much wider than its parent container, it's so wide that i'm gonna scream!!!!!
This content is much...

CSS

#floating-scrollbar { border-bottom: 2px solid #000 !important; }

body { width: 40em; color: #333; font-family: Georgia; }
h1, h2, h3, h4 { font-family: "Gill Sans"; font-weight: 400; margin: 0.6em 0; }
h1 { font-size: 250%; margin-top: 0; }
h2 { font-size: 180%; }
h3 { font-size: 150%; }
h4 { font-size: 110%; }
p { margin: 0.6em 0; }
a { color: #ff7700; }
a:hover { color: #aa3300; }
code, pre, .sh-link { font-family: "Consolas", "Courier New", Courier, monospace; font-size: 0.9em; }
code { color: #555; background: #eee; border: 1px solid #aaa; padding: 4px 0.2em 1px; -webkit-border-radius: 4px; }

.sample { overflow: auto; border: 2px solid #000; background: #181818; color: #F8F8F8; }
.sample + #floating-scrollbar { margin-left: 2px; }

/* adapted from https://gist.github.com/803005 */
.highlighttable { background: #181818; padding: 16px; color: #F8F8F8; font-family: Consolas, Monaco,"Lucida Console"; }
.highlighttable * { font-family: Consolas, Monaco,"Lucida Console"; }
.highlighttable .hll { background-color: #ffffcc }
.highlighttable .c { color: #5F5A60; font-style: italic } /* Comment */
.highlighttable .err { border:#B22518; } /* Error */
.highlighttable .k { color: #CDA869 } /* Keyword */
.highlighttable .cm { color: #5F5A60; font-style: italic } /* Comment.Multiline */
.highlighttable .cp { color: #5F5A60 } /* Comment.Preproc */
.highlighttable .c1 { color: #5F5A60; font-style: italic } /* Comment.Single */
.highlighttable .cs { color: #5F5A60; font-style: italic } /* Comment.Special */
.highlighttable .gd { background: #420E09 } /* Generic.Deleted */
.highlighttable .ge { font-style: italic } /* Generic.Emph */
.highlighttable .gr { background: #B22518 } /* Generic.Error */
.highlighttable .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlighttable .gi { background: #253B22 } /* Generic.Inserted */
.highlighttable .go {  } /* Generic.Output */
.highlighttable .gp { font-weight: bold } /* Generic.Prompt */
.highlighttable .gs {...

JavaScript

/*!
 * jQuery Floating Scrollbar - v0.4 - 02/28/2011
 * http://benalman.com/
 * 
 * Copyright (c) 2011 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

(function($){
  var // A few reused jQuery objects.
      win = $(this),
      html = $('html'),

      // All the elements being monitored.
      elems = $([]),

      // The current element.
      current,

      // The previous current element.
      previous,

      // Create the floating scrollbar.
      scroller = $('<div id="floating-scrollbar"><div/></div>'),
      scrollerInner = scroller.children();

  // Initialize the floating scrollbar.
  scroller
    .hide()
    .css({
      position: 'fixed',
      bottom: 0,
      height: '30px',
      overflowX: 'auto',
      overflowY: 'hidden'
    })
    .scroll(function() {
      // If there's a current element, set its scroll appropriately.
      current && current.scrollLeft(scroller.scrollLeft())
    });

  scrollerInner.css({
    border: '1px solid #fff',
    opacity: 0.01
  });

  // Call on elements to monitor their position and scrollness. Pass `false` to
  // stop monitoring those elements.
  $.fn.floatingScrollbar = function( state ) {
    if ( state === false ) {
      // Remove these elements from the list.
      elems = elems.not(this);
      // Stop monitoring elements for scroll.
      this.unbind('scroll', scrollCurrent);
      if ( !elems.length ) {
        // No elements remain, so detach scroller and unbind events.
        scroller.detach();
        win.unbind('resize scroll', update);
      }
    } else if ( this.length ) {
      // Don't assume the set is non-empty!
      if ( !elems.length ) {
        // Adding elements for the first time, so bind events.
        win.resize(update).scroll(update);
      }
      // Add these elements to the list.
      elems = elems.add(this);
    }
    // Update.
    update();
    // Make chainable.
    return this;
  };

  // Call this to force...