Query - Dimensions

$('selector').width()

$('selector').width(value)

// Get width
const width = $('#myElement').width();

// Set width
$('#myElement').width(200);

$('selector').height()

$('selector').height(value)

// Get height
const height = $('#myElement').height();

// Set height
$('#myElement').height(150);

$('selector').scrollTop()

$('selector').scrollTop(value)

// Get scroll position
const scrollPosition = $('.scrollable-div').scrollTop();

// Set scroll position
$('.scrollable-div').scrollTop(100);

$('selector').scrollLeft()

$('selector').scrollLeft(value)

// Get scroll position
const scrollPosition = $('.scrollable-div').scrollLeft();

// Set scroll position
$('.scrollable-div').scrollLeft(50);

$('selector').naturalWidth()

// Get natural width of image
const imageWidth = $('img').naturalWidth();

// Get natural width of table
const tableWidth = $('table').naturalWidth();

$('selector').naturalHeight()

// Get natural height of image
const imageHeight = $('img').naturalHeight();

// Get natural height of div
const divHeight = $('div.content').naturalHeight();

$('selector').position()
$('selector').position({ relativeTo: container, precision: 'pixel' })

$('selector').position({ type: 'global' })
$('selector').position({ type: 'local' })
$('selector').position({ type: 'relative', relativeTo: container })

$('selector').position({ top: 100, left: 200 })
$('selector').position({ top: 50, left: 75, relativeTo: container })

// Get all position coordinates
const pos = $('#element').position();
console.log(pos.global.top, pos.local.left);

// Get only viewport coordinates
const viewport = $('#element').position({ type: 'global' });

// Get position relative to container
const relative = $('#element').position({
  type: 'relative',
  relativeTo: '#container'
});

// Set position relative to containing parent
$('#element').position({ top: 100, left: 200 });

// Set position relative to specific element
$('#element').position({
  top: 50,
  left: 75,
  relativeTo: '#reference'
});

$('selector').pagePosition()
$('selector').pagePosition({ precision: 'subpixel' })

// Get page position
const pos = $('#element').pagePosition();
console.log(`Element is at ${pos.top}px from document top`);

// Get subpixel precision
const precisePos = $('#element').pagePosition({ precision: 'subpixel' });

$('selector').dimensions()

// Get all dimensions
const dims = $('#element').dimensions();
console.log(`Element size: ${dims.width}x${dims.height}`);
console.log(`With padding: ${dims.innerWidth}x${dims.innerHeight}`);
console.log(`With border: ${dims.outerWidth}x${dims.outerHeight}`);
console.log(`Page position: ${dims.pageTop}, ${dims.pageLeft}`);

// Access box model details
console.log(`Padding: ${dims.box.padding.top}px`);
console.log(`Border: ${dims.box.border.left}px`);
console.log(`Margin: ${dims.box.margin.bottom}px`);

$('selector').intersects(target)
$('selector').intersects(target, options)

// Check intersection
if ($('#trigger').intersects('#popup')) {
  console.log('Overlapping');
}

// Multiple targets
if ($('.item').intersects('.dropzone')) {
  console.log('Over dropzone');
}

// 50% overlap required
$('#draggable').intersects('#target', { threshold: 0.5 });

// Must be fully contained
$('#child').intersects('#container', { fully: true });

// Check specific sides
$('#element').intersects('#boundary', { sides: 'top' });
$('#element').intersects('#boundary', { sides: ['left', 'right'] });

// Get detailed data
const details = $('#source').intersects('#target', { returnDetails: true });
if (details.intersects) {
  console.log(`Overlap: ${details.ratio * 100}%`);
  console.log(`Area: ${details.rect.width * details.rect.height}px²`);
  console.log(`Element position relative to target:`, details.elementPosition);
}

// Require ALL elements to intersect
if ($('.items').intersects('#container', { all: true })) {
  console.log('All items are within container');
}

// Multiple elements with position analysis
$('.item').intersects('#container', { returnDetails: true })
  .forEach((details, i) => {
    if (details.intersects) {
      console.log(`Item ${i}: ${details.ratio * 100}% overlap`);

      // Use elementPosition for obstruction analysis
      const pos = details.elementPosition;
      if (pos.top < 0) console.log(`Item ${i} extends above container`);
      if (pos.bottom > targetDims.outerHeight) console.log(`Item ${i} extends below container`);
    }
  });