locked
How to get the actual width after jquery resizable() method called over div ? RRS feed

  • Question

  • User-147238865 posted

    Hii all,

    I am designing a simple application , where i have  multiple div and that div is resizable for to do this i used Jquery  $(".resize").resizable(); and i have a save button in my page.

    Now what i required is that when user made resize of div and click on save button under this i need to find out what is the current size of div at this particular time.

    To do this i write the code following manner :-

     $(".resize").resize(function () {
                                debugger;
                                var width=$(this).width();
                                var height=$(this).height();
                                 var dashdata = {
                                divwidth: width,
                                divheight: height
                                
                            };
    
                            dasharr.push(dashdata);  //It is an array where i am saving data for each div
                            
                             });
    
    

    But in the above code problem is that the resize method fired unlimited times and it pushing data like 200 items , but what i want is when user done with resize then i need to store the width and height of div .

    So  anybody having any ideas that how to implement resize() method so that it will store appropriate value.

    Thanks .

    Sunday, October 25, 2015 5:35 AM

Answers

  • User475983607 posted

    SURYA_TECH

    But in the above code problem is that the resize method fired unlimited times and it pushing data like 200 items , but what i want is when user done with resize then i need to store the width and height of div .

    So  anybody having any ideas that how to implement resize() method so that it will store appropriate value.

    The posted code appends to an array every time the resize event fires.  I imagine you want only the last value for each div.  You need to create a logic structure that supports your requirement.

    Here's a one way to solve the problem.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryDivSize.aspx.cs" Inherits="WebAppDemo.JQueryDivSize" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>div size</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                $(".ui-widget-content").resizable();
    
                var dasharr = new Array();
    
                $(".ui-widget-content").each(function (index, value) {
                    //console.log(index + ": " + value);
    
                    //Add the index to the div HTML
                    $(value).attr('data-index', index);
    
                    //Map the div index to the array index, 
                    //populate initial values
                    //and push the divAttr object on the array
                    var divAttr = new Object();
                    divAttr.dataIndex = index;  //This is here for testing
                    divAttr.height = $(value).height();
                    divAttr.width = $(value).width();
                    dasharr.push(divAttr);
                });
    
                $(".ui-widget-content").resize(function () {
                    var divAttr = new Object();
                    divAttr.width = $(this).width();
                    divAttr.height = $(this).height();
    
                    //Get the div index and use the index to update the array element with the same index
                    divAttr.dataIndex = parseInt($(this).attr('data-index'));
                    dasharr[divAttr.dataIndex] = divAttr;
                    console.log(divAttr.dataIndex + ' width: ' + dasharr[divAttr.dataIndex].width + ' height: ' + dasharr[divAttr.dataIndex].height);
                });
    
                //Write the array values to the console
                $('#Button1').click(function () {
                    $.each(dasharr, function (index, value) {
                        console.log('ID: ' + value.dataIndex + ' width: ' + value.width + ' height: ' + value.height);
                    })
                });
            });
        </script>
    
        <style type="text/css">
            .ui-widget-content { width: 150px; height: 150px; padding: 0.5em; margin:0.5em }
            .ui-widget-header h3 { text-align: center; margin: 0; }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="ui-widget-content"><h3 class="ui-widget-header">Resizable 1</h3></div>
            <div class="ui-widget-content"><h3 class="ui-widget-header">Resizable 2</h3></div>
        </div>
        <div>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 25, 2015 10:40 AM
  • User61956409 posted

    Hi SURYA_TECH,

    SURYA_TECH

    I have one doubt in your code, i.e while debugging the index value is increment +1 each time, so can clarify me from where this index value is coming.

    You are using $.each() function to iterate over an array, the callback is passed an array index and a corresponding array value each time

    http://api.jquery.com/jquery.each/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 26, 2015 3:00 AM

All replies

  • User475983607 posted

    SURYA_TECH

    But in the above code problem is that the resize method fired unlimited times and it pushing data like 200 items , but what i want is when user done with resize then i need to store the width and height of div .

    So  anybody having any ideas that how to implement resize() method so that it will store appropriate value.

    The posted code appends to an array every time the resize event fires.  I imagine you want only the last value for each div.  You need to create a logic structure that supports your requirement.

    Here's a one way to solve the problem.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryDivSize.aspx.cs" Inherits="WebAppDemo.JQueryDivSize" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>div size</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                $(".ui-widget-content").resizable();
    
                var dasharr = new Array();
    
                $(".ui-widget-content").each(function (index, value) {
                    //console.log(index + ": " + value);
    
                    //Add the index to the div HTML
                    $(value).attr('data-index', index);
    
                    //Map the div index to the array index, 
                    //populate initial values
                    //and push the divAttr object on the array
                    var divAttr = new Object();
                    divAttr.dataIndex = index;  //This is here for testing
                    divAttr.height = $(value).height();
                    divAttr.width = $(value).width();
                    dasharr.push(divAttr);
                });
    
                $(".ui-widget-content").resize(function () {
                    var divAttr = new Object();
                    divAttr.width = $(this).width();
                    divAttr.height = $(this).height();
    
                    //Get the div index and use the index to update the array element with the same index
                    divAttr.dataIndex = parseInt($(this).attr('data-index'));
                    dasharr[divAttr.dataIndex] = divAttr;
                    console.log(divAttr.dataIndex + ' width: ' + dasharr[divAttr.dataIndex].width + ' height: ' + dasharr[divAttr.dataIndex].height);
                });
    
                //Write the array values to the console
                $('#Button1').click(function () {
                    $.each(dasharr, function (index, value) {
                        console.log('ID: ' + value.dataIndex + ' width: ' + value.width + ' height: ' + value.height);
                    })
                });
            });
        </script>
    
        <style type="text/css">
            .ui-widget-content { width: 150px; height: 150px; padding: 0.5em; margin:0.5em }
            .ui-widget-header h3 { text-align: center; margin: 0; }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="ui-widget-content"><h3 class="ui-widget-header">Resizable 1</h3></div>
            <div class="ui-widget-content"><h3 class="ui-widget-header">Resizable 2</h3></div>
        </div>
        <div>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, October 25, 2015 10:40 AM
  • User-147238865 posted

    Thanks a lot  mgebhard for reply me, your idea really help me to solve my problem.

    I have one doubt in your code, i.e while debugging the index value is increment +1 each time, so can clarify me from where this index value is coming.

    Have a great Day....

    Smile

    Monday, October 26, 2015 1:09 AM
  • User61956409 posted

    Hi SURYA_TECH,

    SURYA_TECH

    I have one doubt in your code, i.e while debugging the index value is increment +1 each time, so can clarify me from where this index value is coming.

    You are using $.each() function to iterate over an array, the callback is passed an array index and a corresponding array value each time

    http://api.jquery.com/jquery.each/

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 26, 2015 3:00 AM