Discovering the dynamic dimensions of a div using jQuery

I'm curious if there's a way to dynamically retrieve the size of a div while it's being resized.

Currently, I'm using jQuery 1.10.2 and have implemented a resizable div. However, I've noticed that the events 'start' and 'stop' only provide the size of the div at the beginning and end of the resizing process. What I really want is to track the size in real-time as the div is being resized, and then display these dimensions (height and width) on the page in a textbox or another element.

<script type="text/javascript>
    $(function () {
        $("#divResizable").resizable({
            start: function (event, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                //alert(width);
                document.getElementById("divText").innerHTML = width;
            }
        });
    });
</script>

Answer №1

If you want to manage the resize event, consider using this approach (assuming you have incorporated jquery UI):

<script type="text/javascript">
    $(function () {
        $("#divResizable").resizable({
            resize: function (event, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                $("#divText").html(width + ', ' + height);
            }
        });
    });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The placement of Google Maps within a Bootstrap modal is consistently askew by the dimensions of the map itself

Let's start with a jsFiddle link for reference: http://jsfiddle.net/WppF6/168/ Whenever I open the map in the modal, it seems to be slightly off towards the bottom and right by the window size in pixels (300x300). If you scroll up and to the left, th ...

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

Whenever I directly click on my div, the pageUp and pageDown keys scroll the contents of the div. But when I trigger a click programmatically, the scrolling with pageUp and pageDown stops working. How can I enable scrolling with pageUp and pageDown without ...

Retrieve the chosen element from a jstree

How can I retrieve the selected Node from a jstree? This snippet shows the code in the View section: <div id="divtree" > <ul id="tree" > @foreach (var m in Model.presidentList) { <li class="jstree-clicked ...

What are the advantages of using an external CSS stylesheet for efficiency?

For all the websites I've programmed, I always opt to use an external CSS stylesheet for styling text and other elements. It just makes things so much easier to manage! I simply include this stylesheet in my head tag like this: <link href = "cssscr ...

When trying to apply styles using ng-style attribute with jQuery, Angular does not seem to

Check out this plunker showcasing the issue : http://plnkr.co/edit/1ceWH9o2WNVnUUoWE6Gm Take a look at the code : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { console.log('yeah'); ...

Mastering Space Between Row Items in Bootstrap 5 Grid: A Guide to Gutters

Hello, I am currently utilizing Bootstrap 5 and making use of the grid system. My layout is divided into 2 rows - one containing text and an image, and the other row consisting of two images. While everything looks fine on a PC, the mobile view displays t ...

Error: The hyperlink in the response from the Ajax request is not functioning as expected

I've exhausted all the suggestions for fixing this issue, but nothing has worked so far. Currently, my setup involves making an AJAX call to a PHP page called livesearch.php from the index page in order to retrieve live search results. <html> ...

Issues with HTML formatting in PHP emails

I am sending an approval/disapproval email to a user. I want to include a button in the email so that when the user clicks it, they can approve or disapprove the request. However, I am facing an issue as I cannot see the button in the mail when I receive ...

Unable to retrieve a value after deactivating a Div element

I have created a web page using MVC Razor. On this page, I included a div element with the following structure: <div class="row" id="DivDisableForView"> <div class="col-md-4"> <label for="" class="control-label" ...

Implementing the 'active' class on a hyperlink in CodeIgniter: A step-by-step guide

My template is divided into three sections: header, footer, and content. The main menu links are located in the header section. I am trying to apply a CSS class 'active' to the hyperlink that is selected. I have written jQuery code to achieve thi ...

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

Is there a way to ensure the scroll bar remains at the bottom as new data is added?

Hey there Coding Enthusiasts! I'm currently working on developing a chat system and one of the features I'm trying to implement is keeping the scroll bar at the bottom. The goal is to ensure that when someone sends a message, the user doesn' ...

How can we retrieve a jQuery selector from a $.get() function

When utilizing $.get() to fetch data, it successfully retrieves the entire HTML page. I am looking for a way to use selectors on the fetched data in order to extract specific information from elements, similar to how I would use $('.someclass') ...

Storing a component in browser storage using JavaScript and Angular

I am currently working on developing an Angular application that allows users to "favorite" a business card and store it in local memory. I am facing challenges with actually storing the clicked element in the browser's local memory. Furthermore, I f ...

What is the best way to interpret this JSON data?

When receiving data from an ASP.Net webservice, I am presented with the following JSON string: {"d":{"Table":[{"col1":123,"col2":"name","col3":"name","col4":100,"col5":"\/Date(1153033200000)\/"},{"col1":123,"col2":"name","col3":"name","col4":101 ...

Contrasting jquery-1.4.1.min.js and jquery-1.4.1.js

Question: What is the difference between jquery.js and jquery-min.js? When creating a new project in VS2010, two files are included: jquery-1.4.1.js and jquery-1.4.1-min.js. The former has more readable variables and minimal comments. What exactly is ...

ng-repeat fails to iterate over JSON data

I want to display some JSON data that I've received on my website. Here's the controller code: angular.module('web') .controller('runController', function($http, $scope) { $http.get('/#/runs') .success(fun ...

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

Adjusting the layout of your WooCommerce items to fill the entire page or eliminating padding to ensure responsiveness is necessary. At the moment, there seems to be inconsistency with margins and paddings

Here is the layout for the desktop view: https://i.sstatic.net/KtLOg.jpg And for mobile view: https://i.sstatic.net/UJmG1.jpg I am facing an issue with my product catalog (woocommerce) images not fitting the full screen. I believe this issue may be rel ...