Home/ Questions/Q 7778487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T18:24:36+00:00

I am making a web app for the user to create a simple orgchart.

  • 0

I am making a web app for the user to create a simple orgchart. I don’t even have the lines connecting the nodes yet, but I am using text areas. I found a very useful autosize() plugin that is great for adding an extra row when the width is taken up. Is there a way to make it so that if the user only uses one line, the autoresize will shrink the width to wrap around the text?

I was trying to figure out how to do the jsfiddle but I dont know how to add more than one javascript (for the plug-in) so Ill just put my jquery code at the bottom of the plug-in and put the plug-in at in the javascript area in the jsfiddle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder 2.0</title>
    <link rel="stylesheet" href="PathwayBuilder2.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script src="PathwayBuilder2.js" type="text/javascript"></script>
    <script src="plug-ins/autosize.js" type="text/javascript"></script>
</head>




<body>
    <div id="Pathway">
        <div class="whole">
            <div class="text_display">
                <textarea class="text_field_not_selected"></textarea><br />
                <input type="button" class="add_child" value="+" />
            </div>
        </div>
    </div>
</body>
</html>

javascript/jquery

$(document).ready(function() {
    $('textarea').autosize();
});

$(document).ready(function() {
    $('.add_child').live({
        click: function() {
            var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
            $(this).closest('.whole').append(new_child);
            $('.text_field_not_selected').autosize();
        }
    });
});

$('textarea').live('focusin blur', function() {
    $(this).toggleClass('text_field_not_selected');
});

css

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#pathway {
    display: block;
}
.whole {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
textarea {
    min-width: 2em;
    text-align: center;
}
textarea:focus {
    resize: none;
}
.text_field_not_selected {
    resize: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 3px 5px #444;
    -moz-box-shadow: 0px 3px 5px #444;
    -webkit-box-shadow: 0px 3px 5px #444;
}
.add_child {
    margin-bottom: 25px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    here you go working demo : http://jsfiddle.net/YVEhr/30/ (more apt)
    or http://jsfiddle.net/YVEhr/1/

    Please let me know if thats what you want, I am happy to help out. took me a bit to got it (i.e. resizing idea) 🙂

    Edit Okies I got it now (Phew) Please feel free to play around with the css or you can have ‘row=something` to start with, I have shared some links for further help. 🙂

    Demo http://jsfiddle.net/YVEhr/30/

    Resizing the textarea to fit the screen: good link: or you can also look into this man: http://archive.plugins.jquery.com/project/TextFill

    Jquery Code

    //inital resize
resizeTextArea($('textarea'));

//resize text area
function resizeTextArea(elem){
   // alert(elem[0].scrollHeight + ' ---- ' + elem[0].clientHeight);
    elem.height(1); 
    elem.scrollTop(0);
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}

//'live' event
$('textarea').live('keyup', function() {
    var elem = $(this);
   // alert('foo');
    //bind scroll
    if(!elem.data('has-scroll'))
    {
        elem.data('has-scroll', true);
        elem.bind('scroll keyup', function(){
            resizeTextArea($(this));
        });
    }

    resizeTextArea($(this));
});

    Please let me know if thats what you want.

    Explanation

    Just need to bind new etxtareaclass to .autosize() function and rest you can see it in jsfiddle.

    Dont forget to accept the answer & if you like you can use this solution without using any plugin: jQuery – Building an AutoResizing TextArea that Doesn't Flash on Resize

    Anywho this will work, hope this helps and have a nice one, cheers!

    JQuery Code

    $(document).ready(function() {

    $('.add_child').live({
        click: function() {
            var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
            $(this).closest('.whole').append(new_child);
            $('.text_field_not_selected').autosize();
        }
    });
});
    • 0