Remove From My Forums

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

Question
0

Sign in to vote
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

0

Sign in to vote
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

0

Sign in to vote

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

Monday, October 26, 2015 1:09 AM
0

Sign in to vote
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

Answered by:

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

Question

Answers

SURYA_TECH

SURYA_TECH

All replies

SURYA_TECH

SURYA_TECH