jQuery popBox – a textarea popup extension for small text boxes

This plugin provides a simple to use popup textarea extension for textboxes.

If you have ever come accross the situation where you have a bunch of text boxes that you want the user to fill in, for example in the back admin system of a site, but it is annoying for the user to try and type in text in a small box and you do not want to launch a full blow text editor, this plugin will automatically popup a textarea for text input.

A perfect addition for backend admin systems. Simple, effective and fast.

This plugin can be applied to a textbox or textarea (see notes on textarea usage). Basically if the user clicks on a textbox which has popBox applied to it, a nice modal popup box will appear with the textarea selected for the user to enter their text, if they click outside of the area or on the ‘done’ button it will dissapear and the text will be inserted into the initiating textbox.

The other cool thing is the user can tab into a textbox, the popup will appear with the cursor set inside it, they can then continue to type, hit tab and be taken back out and continue to tab to the next textbox – similiar to tabbing through a spreadsheet.

All the styling is done in CSS, no images, the button is also CSS. Rounded corners will degrade properly in IE. There is no animation or clever tricks as I wanted it to be fast, I have a page with rows of textboxes that this is applied to and it needs to be quick and responsive. Future additions may include animation, styling options etc. It comes with CSS which can be modified as you like.

Hitting the ‘Escape Key’ will back out any changes you make and cancel the operation.


 

jQuery plugin page: http://plugins.jquery.com/project/popBox

A demo can be found here: http://simon.tpdserver2.co.uk/jquery/popBox/demo/

Usage is very simple.

1. Include jQuery (I use the Google CDN)

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

2. Inlcude the popBox.js or the minified version popbox.min.js and the popbox.css files

<script src=”js/popBox/popBox1.2.1.min.js” type=”text/javascript”></script>
<link href=”js/popBox/popBox1.2.1.css” rel=”stylesheet” type=”text/css” />

3. Apply to your textbox:

$(document).ready(function () {
$(‘#input-box’).popBox();
});

Thats it! simple.

Optional arguments are:

height: popup textarea height
width: popup textarea width
newlineString: the newline string to use when copying the text back to the original textbox

Note: As the html textbox (input type=”text”) does not support newline chars this plugin will replace newlines with ‹br›. This can be changed using the options, for example if you want to apply this plugin to an existing textarea (which is small) you can set newlineString to be ‘n’ and it will be preserved.

Options examples:

$(‘#input-box’).popBox({width:500});

$(‘#input-box’).popBox({width:500, newlineString: “n” });

Please note this is a very first release based on my own basic needs. If it proves popular it can easily be expanded with options and settings.

  • Per

    Thanks for this plugin, very handy!

    One hint to Bill above: if you comment out the two lines in the plugin that do absolute positioning the text area appears right after the text field you clicked on. You could build on that to get the effect you want – just taking out those two lines will re-flow the page when the textarea is shown.

    One question to Simon: I don’t know why this is but when the page is not scrolled to the very top, the popup isn’t vertically centered, instead it’s always down by exactly the scroll amount. The result is that if I scroll down half a page, the popup appears on the very bottom of the page.

    I had to change this line to make the transparent background stay in place:
    $(“.popBox-holder”).css({ top: 0 + ‘px’ });

    and I had to remove the ‘+ scrolled’ from being added to ‘top’ to make the textarea stay.

    That seems odd, I think you implied above adding those things as a fix in an early version.

    Per

  • http://www.devanagarifonts.net Mohit

    Thanks for the plugin :)

  • Pingback: jQuery popBox v1.2.1 released « HibboBlog

  • Bill

    Nice job Simon.

    Your plugin was just what I needed for a project I’m working on. I’m not very well versed in jQuery, so a question if you don’t mind. Is it possible to have the popup appear near the input field it’s associated with rather than the center of the screen?

    Thanks.

    • shibbard

      Hi,

      At the moment there is no option to do so, but I have had a few people ask me the same question.

      I will look at adding this as an option into the next release. I have also received a patch from another user which adds the ability to hit escape which cancels any changes made – this will also be included.

      thanks for the feedback,

      Simon.

  • Sam Sabel

    Great plugin.

    Little bit of feedback:
    New line does not play nice with pipes (|).
    Also on first click of an input, it seems to center on the containing div for me. Second time a particular input is opened, it centers correctly on window.

  • Pingback: 50 Awesome New jQuery Plugins | css-jquery

  • Al

    Hi Simon,

    I have been experimenting with your plug-in, works very well. I have tried attaching it to a image button instead of a text field and it functions well.

    What I was curious about, was if you had thought of a way you could pass in a title/label for the popup window, perhaps from an associated div?

    • shibbard

      Thats a good idea of attaching to a button – I had not even tried that myself.

      I will have a think on the title idea as an option. I do like to keep my plugins simple but it is a good suggestion :)

      thanks for the feedback

      Simon

  • http://whatsayu.net Mossa

    Yep, Simon, that was it –the quotes. All is well now! You are the man!

    Thanks
    Mossa

  • http://whatsayu.net Mossa

    Thanks for the reply:

    Precisely, what I did. I replaced this: $(‘#inputbox’).popBox();

    with: $(‘#inputbox’).popBox({width:500, newlineString: “n” });

    The result is that the popbox stops working.

    This is where I’m at now –unable to test further because the plugin becomes unresponsive with the modification.

    By the way, some of the string characters are missing when posting. I guess it is the html doing its thing.

    • shibbard

      Thats very odd, I have tried the exact same thing with various replacement strings (using version 1.2.0) and it works ok.

      If you copy pasted it from this blog make sure to replace the quotes ” with proper ones around the /n (these ones in the blog are not the same).

  • shibbard

    Hi Mossa,
    If you wanted to insert “n” instead of “< br >”

    you can do like below:

    $(‘#input-box’).popBox({width:500, newlineString: “n” });

    But it depends on what your function “mysql_real_escape_string” removes from the string. As if you are then outputting to html rather than a textarea you will need to preserve the “< br >”.

  • http://whatsayu.net Mossa

    Assuming that the newlineString replaces the string line within the inputbox script inside the head tag; I have attempt this and the outcome is that the popbox becomes disabled.

    Any ideas?
    Mossa

  • http://whatsayu.net Mossa

    Thanks for the reply Simon! Yes, I in fact have a sql injection prevention code within my variables–I’m escaping.

    Where should I’ apply the newlineString noted in the post above?

    In my variable definition section of my code, I have the following as it pertains to the inputbox:

    —-begins

    $inputbox=mysql_real_escape_string($_POST[‘inputbox’]);
    $inputbox= “n”.’On ‘.date(‘m/d/y’.’ @ ‘.’h:i’).”n”.’We performed the following:’.”n$inputboxn———-End————-“.”n”;

    —ends

    So again, my question is where do I apply the newlinString you have suggested?

    Thanks again, Simon!
    Mossa

  • shibbard

    Hi Mossa,

    As this is based on input type = text which does not support newlines I convert the /n newline generated by the textarea into a
    tag.

    So the string generated in the textbox the plugin is applied to should have the html
    tag present. Do you have some code which is stripping out the
    tag maybe before it is inserted into the database – this is often done to prevent sql injection.

    You can use the plugin option ‘newlineString’ to set this newline string to be whatever you want as below:

    $(‘#input-box’).popBox({width:500, newlineString: “n” });

    Let me know how you get on,

    Simon.

  • http://whatsayu.net Mossa

    Good day Simon:

    The popup box is working great since our last conversation.

    I’m using the plugin in a form which takes the input of the box and append in to text field in mysql. My concern is that if during the inputting a new line is created, the html tag is appended without translating into a new line.

    Here is an example of the output:

    on 2010-11-03 14:07:54
    Oil changebrakesnew tires and other

    The intended outcome is:

    on 2010-11-03 14:07:54
    Oil change
    brakes
    new tires and other

    is there a fix for this?

    Your thoughts!
    Mossa

  • Nathan

    Very handy plugin, FYI
    IE8 with doc type of TRANSITIONAL does NOT play well with version 1.2, but is happy with version 1.1

    • shibbard

      Thanks for taking the time to feed back Nathan. I will look into it, must be related to the postion fixed attribute.

  • shibbard

    Updated with version 1.2.0

    This fixes the problem Mossa found in which the popup would conflict with other absolute positioned elements on the page.

    http://plugins.jquery.com/content/popbox-120

  • http://www.whatsayu.net Mossa

    Good day Simon:

    Great job on the popup box plugin –such a great idea!

    I’m currently testing it into a project that I’m working on and need to know how can align the actual popup box to the center of the screen irrespective of the page coordinates at any given moment. Using the css file, I’m able to adjust the holder, but not the box itself.

    Your thoughts, please

    • shibbard

      Hi Mossa,

      I’m not entirely clear on what you mean by page coordinates. The popup should always be in the center of the browser.

      Could you explain a bit more and I’ll see if I can help?

      thanks,

      Simon.

      • Anonymous

        Thanks for reply. for some reason it keeps on positioning on the right of screen. when I tested the demo on the demo page, even on a page zoom, it remains centered. this effect, I’m not able to replicate.

      • shibbard

        Thats very odd, I use it on many of my backend admin systems. Do you have a link where I can view it?

        Are you using v1.1.0?

        What browser and version?

        thanks,

        Simon.

      • Anonymous

        Hi Simon and thanks again for the reply. My project which requires this pop up box is intended for an intranet network. However, I can send you a private link outside of this forum for you to attempt to replicate the problem. Can you provide a different form of communication platform?

        I have test the plugin in ie 8, safari 5.02, chrome 6.0. All are reproducing the same problem. The version of the plugin is the v1.1.0.

        Your thoughts!
        Mossa

      • shibbard

        Hi Mossa,

        Sure, drop me an email – hibbard.simon@gmail.com

        I’ll see what I can do.

        Simon.

  • Pingback: 50 Awesome New jQuery Plugins « UKWDS!

  • Pingback: [indiFish] learn to be a pro designer!

  • Pingback: 50 Awesome New jQuery Plugins | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!

  • shibbard

    Update: Version 1.1.0 added. This fixes a problem with centering the modal popup when the page has been scrolled.

  • Pingback: 50 Awesome New jQuery Plugins · rogdykker

  • Pingback: 50 Awesome New jQuery Plugins :Speckyboy Design Magazine