Using jQuery resize to display size of item

Question

Wondering if anyone can help. I'm using jQuery resizable on a website. I'd like to display the size of the resized/resizable object as a notification style badge using pseudo classes, this should update every time the item is resized. The CSS isn't a problem, it's getting the size data and displaying it I'm having issue with. Any ideas how to pull this off? Any help will be much appreciated. I'm having errors in the snippet below so here's a fiddle that works.

https://jsfiddle.net/adrian_babb/xwaokufj/

<ul id="icon_menu">
    <li class="draggable"></li>
</ul>

draggable.ui-resizable:after {
content: "";
position: absolute;
top: -5px;
right: -5px;
font-size: .7em;
background-color: #5f6a72;
color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
}

<script>        
$(document).ready(function($) {

$(".droppable").droppable({
    accept: '.draggable',
    drop: function(event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-droppable')) {
            $(this).append($clone.addClass('inside-droppable').draggable({
                containment: '.droppable',
                scroll: false,
                tolerance: 'pointer',
                position: 'relative',
            }));

            $clone.resizable({
                aspectRatio: 'true',
                ghost: 'true',
                handles: 'ne, nw, se, sw',
                maxHeight: 200,
                maxWidth: 200,
                minHeight: 30,
                minWidth: 30
            });
        }
    }
});
$(".draggable").draggable({
    helper: 'clone',

$(document).ready(function($) {

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var $clone = ui.helper.clone();
            if (!$clone.is('.inside-droppable')) {
                $(this).append($clone.addClass('inside-droppable').draggable({
                    containment: '.droppable',
     scroll: false,
     tolerance: 'pointer',
     position: 'relative',
                }));

                $clone.resizable({
     aspectRatio: 'true',
     ghost: 'true',
     handles: 'ne, nw, se, sw',
     maxHeight: 200,
     maxWidth: 200,
     minHeight: 30,
     minWidth: 30
                });
            }
        }
    });
    $(".draggable").draggable({
        helper: 'clone',
  revert:"invalid",
  scroll: false
    });
    });

#icon_menu {
 width: 200px;
 height: auto;
 float: right;
}

#icon_menu li {
 width: 45px;
 height: 45px;
 position: relative;
}

.draggable {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 background: rgba(127, 214, 236, 0.5);
}

.droppable {
 width: 200px;
 height: 100px;
    border: 1px solid #000000;
    float: left;
}

draggable.ui-resizable:after {
 content: "";
 position: absolute;
 top: -5px;
 right: -5px;
 font-size: .7em;
 background-color: #5f6a72;
 color: #ffffff;
 width: 20px;
 height: 20px;
 text-align: center;
 line-height: 20px;
 border-radius: 50%;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="icon_menu">
  <li class="draggable"></li>
</ul>

Sorry my snippet had script errors. Not sure why so I've added a fiddle which seems to be working fine — user3433046, Jul 28 '16 at 17:21

score 0 · Accepted Answer · answered Jul 28 '16 at 17:03

0

you must have jqueryui library included as well to make droppable() and draggable() work . After you have done that , there is a method stop , that is called when the resize event is done , something like this :

$element.resizable({
   handles: 'e',
   ghost: true,
   delay: 200,
   helper: "overmoused",
   minWidth: 20,
   start: function(e, ui) {},
   resize: function() {},
   stop: function(e, ui) { 
     console.log(ui.originalSize.width, ui.size.width)
   }
});

answered Jul 28 '16 at 17:03

Deepika Guliani

64
1
12

Sorry, I posted the question before I had properly sorted out the external libraries, all sorted now. Thanks for the answer, how would I thin use this size in the CSS :after property. – user3433046 Jul 28 '16 at 17:26
1) either instead of :after , you create an element and then set it's properties in the stop method – Deepika Guliani Jul 29 '16 at 05:03
2) [use something like this](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – Deepika Guliani Jul 29 '16 at 05:04

Using jQuery resize to display size of item

1 Answers1