html textarea in front of html form
Posted: Mon Oct 28, 2013 7:51 am
I have the following textarea in my form:
When this textarea has focus the following overlay is called:
Then an expanded version of the textarea appears on the overlay:
This works great but I notice in the background that the textarea causes the fields on the form to move even though the textarea is in front of the form. To verify this I removed the expanded textarea completely and just had the overlay coming up and all is well. Is there something I have missed with the positioning of the textarea?
I am using jquery to call the overlay and textarea here:
Any suggestions would be greatly appreciated thanks
Code: Select all
<td><label>Fault Description:
</label></td>
<td><textarea id="Fdesc" name="fDesc" class="element textarea small" cols="31" rows="3"></textarea></td>Code: Select all
.overlay {
display: block;
position: absolute;
height: 1050px;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 0;
background: #68C6F1;
opacity: .75;
filter: alpha(opacity=75);
z-index: 999;
}Code: Select all
.focused {
position: relative;
center:0px;
top:-700px;
height: 600px;
width: 700px;
z-index: 1000;
font-size:12px;
margin: 0;
}I am using jquery to call the overlay and textarea here:
Code: Select all
$(document).ready(function () {
$('#Fdesc').focus(function () {
$('<div class="overlay"/>').appendTo('body');
$(this).addClass('focused');
});
$('#Fdesc').blur(function () {
$(this).removeClass('focused');
$('.overlay').remove();
});
});