Geek asks and answers

Expand textarea (and bring it to the front) while it has focus

I want to expand the text area (increase the height) if it has focus. When expanding, the text field should not move the content down; instead, it should be displayed above other content.

This is the code I'm using so far ( see here for an example ):

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).height(90).css('zIndex', 30000);
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).css('height', 'auto');
    });
});

Text field extension works fine, but I can't get it to appear above the other elements on the page (it displays after the elements that follow).

Are there any tricks to show the expanded text box above / in front of all other elements?

Update : this is (minmal) the HTML used to reproduce the problem:

<div style="height:20px;">first:<br/>
   <textarea id="txt1" rows="1" cols="20"
     style="width: 400px; height: 12px; font-size: 10px;">
   </textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>
+3
5

position textarea . z-index.

+6

z-index , , position, . css , (demo):

CSS

.focused {
    position: relative;
    height: 90px !important;
    z-index: 1000;
}
.overlay {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: #000;
    opacity: .75;
    filter: alpha(opacity=75);
    z-index: 999;
}

Script

$(document).ready(function () {
    $('#txt1').focus(function () {
        $('<div class="overlay"/>').appendTo('body');
        $(this).addClass('focused');
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).removeClass('focused');
        $('.overlay').remove();
        $('#txt2').val('blur');
    });
});
+4

: absolute; (txt1), .

+1

input textarea, css jquery

http://jsfiddle.net/Ap5Xc/

0

More articles:


All Articles