cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <link type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<div class="scroll-pane horizontal-only"> 
  
  <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p>

    <p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>

</div>
            
          
!
            
              body {
  font-family: Arial;
  margin: 0;
}

body .scroll-pane {
  height: 150px;
  width: 600px;
  background: white;
}

body .scroll-pane p {
  width: 1000px;
  margin: 0 0 10px 0;
}

body .jspHorizontalBar {
	background: #fff;
}

            
          
!
            
              $(document).ready(function() {
  
  var $bottom_bar,
      $top_bar;
 
  //Listen for the initalization event.
  $('.scroll-pane').bind('jsp-initialised', function(event) {
  
      //Locate the bottom scroller and clone it, with events
      //add ID attibute to both the top and bottom bars.
      $('.jspHorizontalBar')
      .attr('id', 'jspHorizontalBarBottom')
      .clone(true, true)
      .attr('id', 'jspHorizontalBarTop')
      .css({'position':'relative'})
      .insertBefore('.scroll-pane');
    
      $bottom_bar = $('div#jspHorizontalBarBottom').find('.jspDrag');
      $top_bar = $('div#jspHorizontalBarTop').find('.jspDrag');

  })
  //Listen for scroll events on the x axis.
  .bind('jsp-scroll-x', function(event, scrollPositionX, isAtLeft, isAtRight) {
    
      //Get the position of the bottom bar x axis and duplicate to the top bar.
      if (typeof $bottom_bar != 'undefined') {
        $top_bar.css({'left':$bottom_bar.position().left + 'px'});
      }

      //Add and remove classes to the arrow buttons.
      $('.jspArrow').removeClass('jspDisabled');

      if (isAtRight) {
        $('.jspArrowRight').addClass('jspDisabled');
      }

      if (isAtLeft) {
        $('.jspArrowLeft').addClass('jspDisabled');
      }

  })
  //Init the jScrollPane with Arrows
  .jScrollPane({

    showArrows: true

  });

});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console