Text Area for Big Text

Popup thingy for showing a small amount of text but have it balloon out on mouseover.. readonly for mouseover, but textarea/editablt if you click it.

by michaeldausmann

HTML

<!--input box plus an 'explode' button that pops the larger edit dialog-->
<div id="inputContainer">
    <input 
    id="smallText" 
    value="This is some text which is too big for editing in a small textbox." 
    title="This is some text which is too big for editing in a small textbox.">
    </input>
    <button id="explode">...</button>
</div>

<!--Larger edit dialog containing a textarea for dealing with big text-->
<div id="editDialog">
    <textarea height="100%">This is some text which is too big for editing in a small textbox.</textarea>
</div>

CSS

</style>

<!--jquery ui does its ui magic-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />


<style>    
    textarea {
      width: 100%; /* make the text area fill the whole dialog */
      height: 100%;
      margin: 0; /* don't want to add to container size */
      border: 0; /* don't want to add to container size */
      resize: none; /* resize is delegated to the dialog */  
    }
    
    .noTitle .ui-dialog-titlebar {display:none} /* don't show the dialog titlebar */
    
    .ui-widget { font-size: 10px; }  /* default ui widget font is 1em, make it less chunky */

</style>

JavaScript

//turn the editDialog div into a hidden dialog to be opened with the 'explode' button
$("#editDialog").dialog({
    title: "myValue",  //not shown
    autoOpen: false,
    height: 140,
    width: 350,
    dialogClass: 'noTitle',
    position: {
        my: "left top",
        at: "left bottom",
        of: $("#inputContainer")
    },
    buttons: {
        Close: function() {
            $(this).dialog("close");
        }
    }
});

//use the button as a toggle for the dialog
$("#explode").click(function() {
    if ($("#editDialog").dialog("isOpen")) {
        $("#editDialog").dialog("close");
    } else {
        $("#editDialog").dialog("open");
    }
})