CODEWITHSUNDEEP
jqueryimagehtmlresizable
Hermann Golden
Hermann Golden

Reputation: 203

Picture's width to be placed inside < div >

While resizing the picture, I want the picture width added to < div id="w" >< /div >, I have tried the following, anyone can help? thank you:

<script>
$(document).ready(
function() {
    $( "#resizable" ).resizable({
         resize: select_function
    });
});
var select_function = function(event, ui)
{
    $("#w").text($( "#resizable" ).attr("width"));
};

</script>
 <div id="w">Test</div>
<img border="0" id="resizable" src="picture.png">

Upvotes: 0

Views: 64

Answers (3)

Jan
Jan

Reputation: 2520

Have you tried getting the width of the image like this?

$("#w").html($( "#resizable" ).width());

Upvotes: 1

JSuar
JSuar

Reputation: 21091

You either need to add a width attribute to the img tag.

<img border="0" id="resizable" src="picture.png" width="500px">

Or you need to use the built-in JQuery width() function.

$( "#resizable" ).width();

I recommend checking out the JQuery docs on .width() and .attr() to get a better understanding.

Upvotes: 0

SLaks
SLaks

Reputation: 887797

You don't have a width="" attribute.

To get the actual width of the element, call $( "#resizable" ).width().

Upvotes: 1

Related Questions