Detect Element Size On Window Resize Javascript | jQuery sizespy

Quick Start is a jQuery-sized spy extension that displays a sizing screen inside your element and shows the element’s current height/width when the window is resized.

resizeobserver, window resize javascript, javascript detect element resize, window resize event, window resize width jquery

How to make use of it:

1. Load the JavaScript jquery.sizespy.js after the jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.sizespy.js"></script>

2. Call the sizeSpy function to create a screen size box inside your element.

<div class="boxes">
  <h2>Header Box</h2>
  <div class="item">
$(function() {
    spanTarget: '.boxes'

3. Customized sizing control box styles.

$(function() {
    spanTarget: '.boxes',
    cssPrefix: 'sizespy',
    spanStyles: {
      "position": "absolute",
      "left": "0",
      "top": "0",
      "background-color": "red",
      "color": "white",
      "padding": "3px 6px",
      "font-family": "sans-serif",
      "font-weight": "bold",
      "z-index": "99999"
    containerStyles: {
      "outline": "1px dashed red"
    targetStyles: {
      "position": "relative"


  • string cssPrefix – change css prefix of generated elements
  • string spanTarget – target element of debug span. Regular CSS selector, ‘wrap’ will wrap matching elements. Default is false
  • object spanStyles – change/adjust CSS style of created debug span, options are merged.
  • object containerStyles – change/adjust CSS style of created container div, options are merged.
  • object targetStyles – change/adjust CSS style of observed element, options are merged.

Detect Element Size On Window Resize, Quick Start Plugin/Github

See Demo And Download

Official Website(LOUISINTERNET): Click Here

This superior jQuery/javascript plugin is developed by LOUISINTERNET. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…