finding height and width of content after editing with nicedit

Question

I have a div that is resizable and draggable via jquery.

It is also editable with niceedit.

The problem I have is when i add more text to the div whilst in editmode the div does not expand to fit the text in and the text spills out of the div.

Does anyone have any idea how I can update the height and width of the div from the updated contents?

You can see on this example if you start adding text the box does not expand:

http://jsfiddle.net/j6FLa/20/

Code to match jsfiddle

.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
}

#draggable {
min-width:150px;
min-height:150px;
height:auto;
width:auto;
border:1px solid #ff0000;
padding:25px;
}



//<![CDATA[
bkLib.onDomLoaded(function () {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    myNicEditor.addInstance('draggable');
});
//]]>


$("div.dragbox").dblclick(function (e) {
    $('.dragbox').css('cursor', 'select');
    $(this).draggable('disable').removeClass('ui-state-disabled').focus();
    }).on('blur', function () {
    $(this).draggable('enable');
});

$(function () {
    $("#draggable").draggable().resizable();
});


<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>

Answer 1

My previous answer can only take you as far as FINDING the height/width, but it does actually not CHANGE the height/width of the div itself.

So after the width/height is found using my previous answer, here is how to change the width/height of the div in question.

Lets say your div ID is "draggable" and your p ID is "text". When you are done editing your text you can update width and height by calling a function (defined below).

resize("draggable", "text"); 

You can imitate CSS styles in javascript like so:

function resize(id1, id2)
{
    var divName = document.getElementById(id1);
    divName.style.position = absolute;
    divName.style.width = getWidth(id2)+"px"; // remember the +"px"!!
    divName.style.height = getHeight(id2)+"px";
}

This will set the height and width of your div to be equal to the height and width of your text area. By doing like so you can change the height and width of any giving ID according to any other in your project. getWidth() and getHeight() is a reference to my previous post.

A combination of my 2 answers should be able to accomplish what you are looking for. I apologize for not giving a proper answer the first time around, but I'm still new both to programming and to this site. I'll try to do better in future. I hope that this time around you'll succeed in both getting and setting the sizes of your div.

--EDIT--

code from my previous post:

function getHeight(id)
{
    if(document.getElementById(id) == null) //simply a guard that returns 0 if a wrong ID is stated. In reality the return statement is enough.
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

function getWidth(id)
{
    return document.getElementById(id).offsetWidth;
}

-- END EDIT--

• Molle

Answer 2

I'm still a noob at programming, so there might be much better solutions. But I can show you what I have done with a similar problem. Not sure if that is what you need though.

function getHeight(id)
{
    if(document.getElementById(id) == null)
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

You create and call this function by sending the ID og the element that you want to get the width/height. The function is made so it will first check if the ID is present, if not it returns 0. If it is, it returns the inner width/height. If you are 100% sure that the ID you are asking for is present you only need the last line of the function.

You could use it like so:

var h = getHeight("draggable");

This will return the height of the draggable div and store it in the variable h.

Hope it is useful :)

Answer 3

use the stop event for the resizable widget to get the height - the problem you have is the text is not wrapped in another element if you wrap the text in another element you can target that element if not here's sort of a hackey solution also you can use this for the css

#draggable {word-wrap:break-word;}

use something like this for the js

$("#draggable").draggable().resizable({stop: function( event, ui ) {
        var tempHeight = $(this).css({"height" : "auto"}).height();
        $(this).css({"height" : "0px"}).animate({
        height : tempHeight
        },1000);
        }
     });

http://jsfiddle.net/j6FLa/26/

UPDATE I have updated my fiddle to add an extra p element in there and set it to the minimum height of the p you might like this way better

http://jsfiddle.net/j6FLa/28/

the html

<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style=""><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor asdfa asdfasdf asdf</p></div>

the js

$(function () {
    $("#draggable").draggable().resizable({stop: function( event, ui ) {
        var pHeight = $(this).children('p').height();
        $(this).css('min-height', pHeight);
        }
     });
    $("#draggable").on( "dragstop", function( event, ui ) {alert('yes');} );
});