jsKjs Get jsKjs

Core · jQuery-compatible

Geometry, scroll & visibility

Measure anything, scroll anything, show and hide anything — with the same calls you used in jQuery, built on getBoundingClientRect and the native scroll APIs.

Measurements you can trust

.width() and .height() return the rendered size from getBoundingClientRect(), including transforms; on $(window) they return the viewport. .offset() gives page coordinates (scroll included) — perfect for positioning popovers — while .position() is relative to the nearest positioned ancestor.

Scrolling

.scrollTop() and .scrollLeft() read and write scroll position on elements and on $(window). Pair them with $.throttle() for scroll-driven UI such as progress bars and scroll-spy.

Visibility

.hide() remembers the element's previous display value, so .show() restores flex or grid instead of forcing block.

Live · Scroll spy with progress

Intro

The jsKjs patch cable connects any module to any other. It is the part of your rack you never think about until it is missing.

Specs

30 cm braided sleeve, gold contacts, rated for ten thousand insertions. Weighs less than the jQuery Color plugin.

Reviews

“Finally, a cable that does not need a build step.” — a reviewer who should know better.


  
  
View the source for this demo
HTML
<div class="row" id="geo-nav">
  <button type="button" data-to="0">Intro</button>
  <button type="button" data-to="1">Specs</button>
  <button type="button" data-to="2">Reviews</button>
  <button type="button" id="geo-toggle" aria-expanded="true" aria-controls="geo-panel">Hide panel</button>
</div>
<div class="geo-bar" aria-hidden="true"><div id="geo-progress"></div></div>
<div id="geo-panel" class="geo-panel" tabindex="0" role="region" aria-label="Product details (scrollable)">
  <section><h4>Intro</h4><p>The jsKjs patch cable connects any module to any other. It is the part of your rack you never think about until it is missing.</p></section>
  <section><h4>Specs</h4><p>30 cm braided sleeve, gold contacts, rated for ten thousand insertions. Weighs less than the jQuery Color plugin.</p></section>
  <section><h4>Reviews</h4><p>“Finally, a cable that does not need a build step.” — a reviewer who should know better.</p></section>
</div>
<pre class="out" id="geo-out" aria-live="off"></pre>
JavaScript
const $panel = $('#geo-panel');

function measure() {
  const max = $panel.prop('scrollHeight') - $panel.prop('clientHeight');
  const pct = max ? $panel.scrollTop() / max : 0;
  $('#geo-progress').css('width', (pct * 100).toFixed(1) + '%');
  const off = $panel.offset();
  $('#geo-out').text(
    'scrollTop() → ' + Math.round($panel.scrollTop()) + 'px of ' + max + 'px\n' +
    'width()     → ' + Math.round($panel.width()) + 'px · height() → ' + Math.round($panel.height()) + 'px\n' +
    'offset()    → { top: ' + Math.round(off.top) + ', left: ' + Math.round(off.left) + ' }');
}

$panel.on('scroll', $.throttle(measure, 50));
$(window).on('resize', $.throttle(measure, 100));

$('#geo-nav').on('click', '[data-to]', function () {
  const $section = $panel.children('section').eq(+this.dataset.to);
  $panel.scrollTop($section.position().top - 8);    // position() is relative to the panel
});

$('#geo-toggle').on('click', function () {
  $panel.toggle();
  const open = $panel.css('display') !== 'none';
  $(this).attr('aria-expanded', String(open)).text(open ? 'Hide panel' : 'Show panel');
});

measure();



  
More examples
Position a popover under a button
JavaScript
const { top, left } = $('#help').offset();
$('#popover').css({ top: top + $('#help').height() + 8, left }).show();
Back to top
JavaScript
$('#to-top').on('click', () => $(window).scrollTop(0));
$(window).on('scroll', $.throttle(() => $('#to-top').toggle($(window).scrollTop() > 600), 100));

  
API
.width([value]) · .height([value]) → number | self
Measured size (from getBoundingClientRect) or set the CSS size. On $(window), returns the viewport size.
Reference: .width() / .height() →
.offset() → { top, left }
Position relative to the document, including scroll.
Reference: .offset() →
.position() → { top, left }
Position relative to the offset parent.
Reference: .position() →
.scrollTop([value]) · .scrollLeft([value]) → number | self
Get or set scroll position. Works on elements and on $(window).
Reference: .scrollTop() / .scrollLeft() →
.show() · .hide() · .toggle([state]) → self
Instant visibility via display. .hide() remembers the previous display value so .show() restores it correctly.
Reference: .show() / .hide() / .toggle() →

  
Migrating
Coming from jQuery.innerWidth()/.outerWidth() and the .offset() setter are not included; read getBoundingClientRect() or set top/left with .css().

  
Related features
Core
Classes & CSS
Toggle classes and set styles with addClass(), toggleClass() and css() — including CSS custom properties, which jsKjs reads and writes without adding px..
Open →Utilities
Debounce & throttle
See the difference between debounce and throttle in real time: raw, throttled and debounced event lanes driven by your pointer.
Open →Motion
Classic effects
jQuery's fadeIn, fadeOut, fadeToggle, slideDown, slideUp, slideToggle and animate() — same names, milliseconds and callbacks — rebuilt on the jsKjs Motion engine..
Open →