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">
    Box 
  </div>
</div>

$(function() {
  $(".item").sizeSpy({
    spanTarget: '.boxes'
  });
});

3. Customized sizing control box styles.

$(function() {
  $(".item").sizeSpy({
    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"
    }
  });
});

Options

• 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.