Query - Dimensions

$('selector').width()

$('selector').width(value)

// Get the width of an element
const width = $('#myElement').width();
console.log(width);

// Set the width of an element
$('#myElement').width(200);

$('selector').height()

$('selector').height(value)

// Get the height of an element
const height = $('#myElement').height();
console.log(height);

// Set the height of an element
$('#myElement').height(150);

$('selector').scrollTop()

$('selector').scrollTop(value)

// Get the vertical scroll position of an element
const scrollPosition = $('.scrollable-div').scrollTop();
console.log(scrollPosition);

// Set the vertical scroll position of an element
$('.scrollable-div').scrollTop(100);

$('selector').scrollLeft()

$('selector').scrollLeft(value)

// Get the horizontal scroll position of an element
const scrollPosition = $('.scrollable-div').scrollLeft();
console.log(scrollPosition);

// Set the horizontal scroll position of an element
$('.scrollable-div').scrollLeft(50);

$('selector').naturalWidth()

// Get the natural width of an image
const imageNaturalWidth = $('img').naturalWidth();
console.log(imageNaturalWidth);

// Get the natural width of a table
const tableNaturalWidth = $('table').naturalWidth();
console.log(tableNaturalWidth);

$('selector').naturalHeight()

// Get the natural height of an image
const imageNaturalHeight = $('img').naturalHeight();
console.log(imageNaturalHeight);

// Get the natural height of a div with content
const divNaturalHeight = $('div.content').naturalHeight();
console.log(divNaturalHeight);

$('selector').clippingParent()

// Find what element clips a positioned element
const $tooltip = $('.tooltip');
const $clipper = $tooltip.clippingParent();

// Check if element is clipped by its container
if ($clipper[0] !== document.documentElement) {
  console.log('Element is clipped by:', $clipper[0]);
}

// Find the scrollable container that clips content
const $content = $('.overflow-content');
const $scrollContainer = $content.clippingParent();

// Adjust positioning to avoid clipping
$scrollContainer.css('overflow', 'visible');

// Get clipping parents for multiple elements
$('.positioned-elements').each((el, index) => {
  const $el = $(el);
  const $clipper = $el.clippingParent();
  console.log(`Element ${index} is clipped by:`, $clipper[0]);
});

$('selector').containingParent()
$('selector').containingParent({ calculate: true })

$('selector').containingParent({ calculate: false })

// Find the actual positioning context (includes transform, filter, etc.)
const $absoluteEl = $('.absolute-positioned');
const $container = $absoluteEl.containingParent();

// Position element relative to its containing parent
const containerRect = $container[0].getBoundingClientRect();
$absoluteEl.css({
  top: containerRect.height / 2,
  left: containerRect.width / 2
});

// Get browser's reported offsetParent (legacy behavior)
const $element = $('.positioned-element');
const $offsetParent = $element.containingParent({ calculate: false });

if ($offsetParent[0]) {
  console.log('Browser offsetParent:', $offsetParent[0]);
}

// Fixed elements have no containing parent
const $fixed = $('.fixed-positioned');
const $container = $fixed.containingParent();

if ($container[0] === undefined) {
  console.log('Fixed element has no containing parent');
}

// Elements with transforms create new positioning contexts
const $transformed = $('.transformed-element');
const $transformContainer = $transformed.containingParent();

// Useful for accurately calculating positions
const rect = $transformContainer[0].getBoundingClientRect();
console.log('Transform container bounds:', rect);