html textarea in front of html form

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
sectionLeader123
Forum Commoner
Posts: 31
Joined: Fri Oct 11, 2013 8:46 am

html textarea in front of html form

Post by sectionLeader123 »

I have the following textarea in my form:

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>
When this textarea has focus the following overlay is called:

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;
}
Then an expanded version of the textarea appears on the overlay:

Code: Select all

 .focused {
    position: relative; 
	center:0px; 
	top:-700px;
    height: 600px;
	width: 700px;
    z-index: 1000;
	font-size:12px;
	margin: 0;
}
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:

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();
    });
});
Any suggestions would be greatly appreciated thanks
Post Reply