Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="module">
  <section class="panel">
    <div class="axial spill">
      <div class="bulk">
        <p>Dragging the handles below will resize the panels.</p>
        <p>Scrollbara are fully functional.</p>
      </div>
    </div>
    <figure class="route">
      <div></div>
    </figure>
  </section>
  <div class="handle"></div>
  <section class="panel">
    <div class="axial spill">
      <div class="bulk">
        <p>Here's a couple of kittens and some Goethe.</p>
        <img src="http://ataredo.com/external/image/meow.jpg" alt=""/>
        <img src="http://ataredo.com/external/image/cute.jpg" alt=""/>
        <img src="http://ataredo.com/external/image/kitten.jpg" alt=""/>
      </div>
    </div>
    <figure class="route">
      <div></div>
    </figure>
  </section>
  <div class="handle"></div>
  <section class="panel">
    <div class="axial spill">
      <div class="bulk">
        <p>
          I've studied now Philosophy
          And Jurisprudence, Medicine,—
          And even, alas! Theology,—
          From end to end, with labor keen;
          And here, poor fool! with all my lore
          I stand, no wiser than before:
          I'm Magister—yea, Doctor—hight,
          And straight or cross-wise, wrong or right,
          These ten years long, with many woes,
          I've led my scholars by the nose,—
          And see, that nothing can be known!
          That knowledge cuts me to the bone.
          I'm cleverer, true, than those fops of teachers,
          Doctors and Magisters, Scribes and Preachers;
          Neither scruples nor doubts come now to smite me,
          Nor Hell nor Devil can longer affright me.

          For this, all pleasure am I foregoing;
          I do not pretend to aught worth knowing,
          I do not pretend I could be a teacher
          To help or convert a fellow-creature.
          Then, too, I've neither lands nor gold,
          Nor the world's least pomp or honor hold—
          No dog would endure such a curst existence!
          Wherefore, from Magic I seek assistance,
          That many a secret perchance I reach
          Through spirit-power and spirit-speech,
          And thus the bitter task forego
          Of saying the things I do not know,—
          That I may detect the inmost force
          Which binds the world, and guides its course;
          Its germs, productive powers explore,
          And rummage in empty words no more!

          O full and splendid Moon, whom I
          Have, from this desk, seen climb the sky
          So many a midnight,—would thy glow
          For the last time beheld my woe!
          Ever thine eye, most mournful friend,
          O'er books and papers saw me bend;
          But would that I, on mountains grand,
          Amid thy blessed light could stand,
          With spirits through mountain-caverns hover,
          Float in thy twilight the meadows over,
          And, freed from the fumes of lore that swathe me,
          To health in thy dewy fountains bathe me!

          Ah, me! this dungeon still I see.
          This drear, accursed masonry,
          Where even the welcome daylight strains
          But duskly through the painted panes.
          Hemmed in by many a toppling heap
          Of books worm-eaten, gray with dust,
          Which to the vaulted ceiling creep,
          Against the smoky paper thrust,—
          With glasses, boxes, round me stacked,
          And instruments together hurled,
          Ancestral lumber, stuffed and packed—
          Such is my world: and what a world!

          And do I ask, wherefore my heart
          Falters, oppressed with unknown needs?
          Why some inexplicable smart
          All movement of my life impedes?
          Alas! in living Nature's stead,
          Where God His human creature set,
          In smoke and mould the fleshless dead
          And bones of beasts surround me yet!

          Fly! Up, and seek the broad, free land!
          And this one Book of Mystery
          From Nostradamus' very hand,
          Is't not sufficient company?
          When I the starry courses know,
          And Nature's wise instruction seek,
          With light of power my soul shall glow,
          As when to spirits spirits speak.
          Tis vain, this empty brooding here,
          Though guessed the holy symbols be:
          Ye, Spirits, come—ye hover near—
          Oh, if you hear me, answer me!
        </p>
      </div>
    </div>
    <figure class="route">
      <div></div>
    </figure>
  </section>
</div>
              
            
!

CSS

              
                * {
  padding: 0;
  margin: 0;  
}

body {
  background: grey;
}

/* Main parent can be given different dimensions */

#module {
  height: 100vh;
  background: #5e5e5e;
  box-shadow: 2px 0 5px #343436;
  overflow: hidden;
}

.panel {
  height: calc((100% - 40px) / 3);
  position: relative;
}

.axial {
  height: 100%;
  overflow-y: scroll;
}

.spill {
  min-height: 50px;
}

/* Place your content inside element below */
/* Adapt padding equally */
/* Second item requires 12px on the right */
/* Best to leave style unaltered otherwise */

.bulk {
  position: relative;
  padding: 8px;
  box-sizing: border-box;
}

.bulk.way {
  padding: 8px 20px 8px 8px;
}

/* Scrollbars */

.route {
  width: 12px;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,0.2);
}

.route div {
  position: relative;
  background: rgba(0,0,0,0.4);
  border: 3px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
  box-sizing: border-box;
}

.latent {
  visibility: hidden;
}

/* Draggable separators */

.handle {
  height: 20px;
  background: #343436;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  box-sizing: border-box;
}

/* Cosmetic style beyond this point */

.drag {
  text-align: center;
  cursor: row-resize;
}

.drag:after {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.drag:nth-child(2):after {
  border-top: 3px solid #5e5e5e;
  border-right: 3px solid #5e5e5e;
}

.drag:nth-child(4):after {
  position: relative;
  top: -3px;
  border-bottom: 3px solid #5e5e5e;
  border-left: 3px solid #5e5e5e;
}

/* Circumstantial content */
/* Preferably style these instead of parent */

p {
  text-align: center;
  font-family: times;
  color: #f0ead6;
  padding: 10px 0 0;
}

img {
  width: 300px;
  max-width: 90%;
  display: block;
  padding-top: 20px;
  margin: auto;
}

img:last-child {
  padding-bottom: 20px;
}

p:last-child {
  width: 300px;
  margin: auto;
  padding-bottom: 10px;
}
              
            
!

JS

              
                (function() {

var gate = $(window),
item = $('#module'),
bay = $('.panel'),
snap = $('.handle'),
inner = $('.axial'),
lane = $('.route'),
jot = lane.find('div'),
mark = snap.outerHeight(),
press = 'mousedown touchstart',
yaw = 'mousemove.area touchmove.area',
free = 'mouseup touchend',
hike = 'mouseleave touchcancel',
ken = [{},{},{}], urge = [{},{},{}],
craft, room, ambit, duct, ere,
influx, ward, put, zap;

pulseMuzzle();
assayField();

gate.on('load', scopeData).resize($.restrain(100, checkPlot)).on(hike, function(e) {

	!(e.type == 'mouseleave' && e.relatedTarget) && lotRelease();
});

snap.addClass('drag').on(press, function(e) {

	var above = !$(this).index('.handle'), dab = urge[0];
	tagPoints(this, e, dab);
	var unit = above ? 0 : mark, space = room+unit, last = dab.start;

	gate.one(free, lotRelease).on(yaw, function(e) {

		hubTrace(e, dab);
	})
	.on(yaw, $.restrain(30, function() {

		var target = Math.max(unit, Math.min(dab.aim, space)),
		up = dab.now < last, extent = space-target;
		last = dab.now;

		if (above) {
		bay.eq(0).height(target);
		if (ken[1].range || up) bay.eq(1).height(extent-ken[2].range);
		else bay.eq(2).height(extent);
		}
		else {
		bay.eq(2).height(extent);
		if (ken[1].range || !up) bay.eq(1).height(target-mark-ken[0].range);
		else bay.eq(0).height(target-mark);
		}

		if (ere) driftStrip();
		scopeData();
	}));

	e.preventDefault();
});

function checkPlot() {

	if (!craft[0]) item.height(gate.height());

	room = item.height()-2*mark;
	ambit = bay.width();

	bay.each(function(i) {
		$(this).height(room*ken[i].quota);
	});

	if (ere) driftStrip();
	scopeData();
}

function tagPoints(mean, act, key) {

	var tap = act.originalEvent.touches;
	key.start = tap ? tap[0].pageY : act.pageY;
	key.onset = $(mean).position().top;
}

function hubTrace(task, gob) {

	var rub = task.originalEvent.touches;
	gob.now = rub ? rub[0].pageY : task.pageY;
	gob.aim = gob.onset+gob.now-gob.start;
}

function lotRelease() {

	gate.off(yaw);
	lane.off(hike);
	influx = ward = false;
	clearTimeout(put);
	clearInterval(zap);
}

function driftStrip() {

	inner.each(function(i) {

		duct = this.getBoundingClientRect().width-$('.hint').eq(i).width();

		if (duct || ere) $(this).width(ambit+duct);
	});
}

function scopeData() {

	bay.each(function(i) {

		var own = ken[i],
		summit = $(this).height();
		own.range = summit;
		own.quota = summit/room;
		if (!duct && !ere) return;
		var core = inner.eq(i),
		zest = jot.eq(i);
		own.peak = core[0].scrollHeight;
		own.edge = own.peak-summit;
		own.tier = summit/own.peak;
		own.lug = Math.max(22, summit*own.tier);
		own.stub = summit-own.lug;

		if (this.clientHeight == own.peak || summit < 35) zest.addClass('latent');
		else {
		zest.removeClass('latent').outerHeight(own.lug);
		core.scroll();
		}
	});
}

function glideRail() {

	lane.on(press, function(e) {

		if (e.target != e.currentTarget) return;

		var entry = $(this), base = entry.index('.route'),
		nook = ken[base], crux = urge[2], orbit = nook.range;
		tagPoints(jot.eq(base), e, crux);

		entry.one(hike, lotRelease);

		gate.one(free, lotRelease).on(yaw, function(e) {

			hubTrace(e, crux);
			if (Math.abs(crux.now-crux.start) > 5) lotRelease();
		});

		var spot = crux.start-entry.offset().top,
		alter = Math.min(35, 0.7*nook.lug),
		zone = orbit < 35 ? orbit/2 : alter,
		rise = spot < crux.onset || spot <= zone,
		mesh = Math.min(nook.stub, spot),
		goal = mesh/nook.stub*nook.edge,
		fit = inner.eq(base).scrollTop();
		put = setTimeout(cycleJump, 350);
		fastSkip();

		function cycleJump() {

			zap = setInterval(fastSkip, 100);
			influx = true;
		}

		function fastSkip() {

			var venue = jot.eq(base).position().top,
			tie = Math.round(mesh) == Math.round(venue);

			if (rise) {
			fit -= 0.9*orbit;
			if (influx && spot > alter) {
			fit = Math.max(goal, fit);
			if (spot > venue) {
			lotRelease();
			return;
			}
			}
			}
			else {
			fit += 0.9*orbit;
			if (influx) fit = Math.min(goal, fit);
			}

			fit = Math.ceil(Math.max(0, Math.min(fit, nook.edge)));
			if (influx && !fit || tie && spot > alter) lotRelease();
			inner.eq(base).scrollTop(fit);
		}

		e.preventDefault();
	});

	jot.on(press, function(e) {

		var apt = $(this), peg = apt.index('.route div'),
		cue = ken[peg], note = urge[1];
		tagPoints(this, e, note);
		ward = true;

		gate.one(free, lotRelease).on(yaw, function(e) {

			hubTrace(e, note);
		})
		.on(yaw, $.restrain(30, function() {

			var intent = Math.max(0, Math.min(note.aim, cue.stub));
			apt.css('top', intent);
			inner.eq(peg).scrollTop(intent*cue.edge/cue.stub);
		}));

		e.preventDefault();
	});

	inner.each(function(nod) {

		$(this).scroll($.restrain(30, function() {

			if (ward || ken[nod].range < 35) return;

			var move = inner.eq(nod).scrollTop(), bit = ken[nod];

			if (bit.lug != 22) var place = move*bit.tier;
			else place = move/bit.edge*bit.stub;

			jot.eq(nod).css('top', place);
		}));
	});
}

function assayField() {

	if (!craft[0]) item.height(gate.height());

	room = item.height()-2*mark;
	ambit = bay.width();

	if (!craft[1]) bay.height(room/3);

	inner.append('<div class="hint"></div>');
	driftStrip();
	scopeData();
	inner.removeClass('spill');

	if (duct) {
	ere = true;
	lane.show();
	$('.bulk').addClass('way');
	glideRail();
	}
}

function pulseMuzzle() {

	$.restrain = function(delay, callback) {

		var executed = 0, debounce,
		throttle = function() {

		var elapsed = Math.min(delay, Date.now()-executed),
		remain = delay-elapsed;
		debounce && clearTimeout(debounce);
		elapsed == delay && runIt();
		if (remain) debounce = setTimeout(runIt, remain);

		function runIt() {
		executed = Date.now();
		callback.apply(this, arguments);
		}
		}
		return throttle;
	}

	craft = (function() {

		var tip = $(document.head);
		tip.css({width: 'calc(2 * 1px)', height: '1vh'});
		var mass = [!!tip.height(), tip.width()];
		tip.removeAttr('style');
		return mass;
	})();
}
})();
              
            
!
999px

Console