Resize HTML element using CSS3

Question

I am using CSS3 resizable property to resize an HTML Div element.

Here is sample code : http://jsfiddle.net/blunderboy/nMTm9/1/

But, I want to update the value inside input element as soon as width of div changes. How can we achieve this ?

Have you looked at the jQueryUI resizeable implementation? It works across all browsers and fires a resize event when the element size is changed. — paul
– paul, Commented Oct 3, 2012 at 12:40
you want that to resize first the div and after that the value on the input fieald wil update ? — yossi
– yossi, Commented Oct 3, 2012 at 12:42
Yes I looked at jQueryUI but it will make site heavy. I was thinking if it is possible to do the same without using jquery because I dont want to download UI js file just for small purpose. @yossi: I want to update the input value as soon as div is resized. — Sachin Jain
– Sachin Jain, Commented Oct 3, 2012 at 12:47
I found this link davidwalsh.name/html5-placeholder-css it maybe it will help — yossi
– yossi, Commented Oct 3, 2012 at 13:08

Armel Larcier · Accepted Answer · 2012-10-03 13:23:08Z

3

With setInterval, you can do this:

http://jsfiddle.net/nMTm9/3/

It's not perfect but works great.

var input = $('input'), div = $('#resizable');
function calculate(){
    input.val(div.width()+"px");
}
setInterval(calculate,500);

answered Oct 3, 2012 at 13:23

Armel Larcier

16k7 gold badges70 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sachin Jain Over a year ago

This is just brilliant stuff. Although not ideal but really really appreciable. Thanks a lot :) :)..Works for me..

yossi · Accepted Answer · 2012-10-03 14:08:47Z

1

No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.

The close change content by style is if you put content in the input field or erased the content input field the label change by css.

enter link description here

edited Oct 3, 2012 at 14:08

answered Oct 3, 2012 at 13:12

yossi

1,4412 gold badges12 silver badges16 bronze badges

1 Comment

Sachin Jain Over a year ago

Can't we add some listener to height and width of div. That is whenever they are changed, the handler is invoked and that will update the value in input. THANKS BTW

Collectives™ on Stack Overflow

Resize HTML element using CSS3

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related