Dimensions and Positioning

/**
 * Get element content width (excludes padding, border, margin)
 * @returns Width in pixels
 */
width(): number;

/**
 * Set element width
 * @param value - Width value (number in pixels or string with units)
 * @returns The Cash collection for chaining
 */
width(value: number | string): this;

/**
 * Get element content height (excludes padding, border, margin)
 * @returns Height in pixels
 */
height(): number;

/**
 * Set element height
 * @param value - Height value (number in pixels or string with units)
 * @returns The Cash collection for chaining
 */
height(value: number | string): this;

/**
 * Get element width including padding (excludes border, margin)
 * @returns Inner width in pixels or undefined
 */
innerWidth(): number | undefined;

/**
 * Get element height including padding (excludes border, margin)
 * @returns Inner height in pixels or undefined
 */
innerHeight(): number | undefined;

/**
 * Get element width including padding and border, optionally margin
 * @param includeMargins - Whether to include margins in calculation
 * @returns Outer width in pixels
 */
outerWidth(includeMargins?: boolean): number;

/**
 * Get element height including padding and border, optionally margin
 * @param includeMargins - Whether to include margins in calculation
 * @returns Outer height in pixels
 */
outerHeight(includeMargins?: boolean): number;

// Get dimensions
const contentWidth = $('.box').width();          // Content width
const contentHeight = $('.box').height();        // Content height
const paddingWidth = $('.box').innerWidth();     // Width + padding
const paddingHeight = $('.box').innerHeight();   // Height + padding
const borderWidth = $('.box').outerWidth();      // Width + padding + border
const totalWidth = $('.box').outerWidth(true);   // Width + padding + border + margin

// Set dimensions
$('.element').width(300);           // Set to 300px
$('.element').height('50%');        // Set to 50% of parent
$('.modal').width(400).height(300); // Chain dimension setting

// Responsive sizing
const containerWidth = $('.container').width();
$('.sidebar').width(containerWidth * 0.25);
$('.content').width(containerWidth * 0.75);

// Dynamic resizing
$(window).on('resize', function() {
  const windowHeight = $(window).height();
  $('.full-height').height(windowHeight - $('.header').outerHeight());
});

// Box model calculations
const element = $('.element');
const padding = element.innerWidth() - element.width();
const border = element.outerWidth() - element.innerWidth();
const margin = element.outerWidth(true) - element.outerWidth();

/**
 * Get element offset relative to document
 * @returns Object with top and left properties, or undefined
 */
offset(): undefined | { top: number; left: number };

/**
 * Get element position relative to positioned parent
 * @returns Object with top and left properties, or undefined
 */
position(): undefined | { top: number; left: number };

/**
 * Get the positioned ancestor element
 * @returns New Cash collection containing the offset parent
 */
offsetParent(): Cash;

// Get absolute position in document
const docOffset = $('.element').offset();
if (docOffset) {
  console.log('Element is at:', docOffset.top, docOffset.left);
}

// Get position relative to positioned parent
const relativePos = $('.child').position();

// Get the positioned parent
const parent = $('.element').offsetParent();

// Scroll to element
const elementOffset = $('.target').offset();
if (elementOffset) {
  window.scrollTo({
    top: elementOffset.top - 100, // 100px offset from top
    behavior: 'smooth'
  });
}

// Position tooltip relative to trigger
$('.tooltip-trigger').on('mouseenter', function() {
  const trigger = $(this);
  const offset = trigger.offset();
  const tooltip = $('.tooltip');
  
  if (offset) {
    tooltip.css({
      position: 'absolute',
      top: offset.top + trigger.outerHeight() + 5,
      left: offset.left
    }).show();
  }
});

// Check if element is in viewport
function isInViewport(element) {
  const offset = element.offset();
  if (!offset) return false;
  
  const windowTop = $(window).scrollTop();
  const windowBottom = windowTop + $(window).height();
  
  return offset.top >= windowTop && offset.top <= windowBottom;
}

// Sticky positioning helper
const stickyElement = $('.sticky');
const originalTop = stickyElement.offset()?.top || 0;

$(window).on('scroll', function() {
  const scrollTop = $(window).scrollTop();
  stickyElement.toggleClass('stuck', scrollTop > originalTop);
});

┌─────────────────────────────────────────┐ ← outerWidth(true)
│                 margin                  │
│ ┌─────────────────────────────────────┐ │ ← outerWidth()
│ │              border                 │ │
│ │ ┌─────────────────────────────────┐ │ │ ← innerWidth()
│ │ │            padding              │ │ │
│ │ │ ┌─────────────────────────────┐ │ │ │ ← width()
│ │ │ │           content           │ │ │ │
│ │ │ │                             │ │ │ │
│ │ │ └─────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

// Equal height columns
const maxHeight = Math.max(...$('.column').map(function() {
  return $(this).height();
}).get());
$('.column').height(maxHeight);

// Responsive modal centering
function centerModal(modal) {
  const modalWidth = modal.outerWidth();
  const modalHeight = modal.outerHeight();
  const windowWidth = $(window).width();
  const windowHeight = $(window).height();
  
  modal.css({
    position: 'fixed',
    top: (windowHeight - modalHeight) / 2,
    left: (windowWidth - modalWidth) / 2
  });
}

// Maintain aspect ratio
function maintainAspectRatio(element, ratio = 16/9) {
  const width = element.width();
  element.height(width / ratio);
}

// Fill remaining space
function fillRemainingHeight(element) {
  const windowHeight = $(window).height();
  const siblingHeights = element.siblings().toArray()
    .reduce((sum, sibling) => sum + $(sibling).outerHeight(true), 0);
  
  element.height(windowHeight - siblingHeights);
}