this is my code. im having problem when i submit comment the textarea will lost its postion. i dont know why. ive checked its css. no luck.
$(document).ready(function(){
$("#box-table-a").tablesorter();
var messageArea = $('textarea#message');
var nameArea=$('#comment-name');
var submit=$('#submit-comment');
nameArea.val('Enter your name').css('color', '#666666');
messageArea.val('Leave your message here').css('color', '#666666');
messageArea.focus(function (){
$(this).val('').css('color', '#000000');
$(this).unbind('click').click(function(){
return false;
});
});
nameArea.focus(function (){
$(this).val('').css('color', '#000000');
$(this).unbind('click').click(function(){
return false;
});
});
$('input#submit-comment').click(function(){
// Store vars
var message = messageArea.hide().val();
var cname = nameArea.hide().val();
// Validation
if(message.length < 1 || message == "Leave your message here"){
submit.fadeOut('fast');
messageArea.fadeOut('slow', function(){
nameArea.fadeOut('slow');
var errorMessage = 'Oops! You haven’t typed anything. Please have another go...';
var error = $('<div id="too-short"><span class="error">' + errorMessage + '</span></div>').insertBefore($(this));
error.hide().fadeIn('slow', function(){
setTimeout(function(){
error.hide();
messageArea.fadeIn('slow');
nameArea.fadeIn('slow');
submit.fadeIn('slow');
}, 1000);
});
});
return false;
}
var dataString = 'message='+ message+'name='+ cname;
// Show loader
var loader = $('<div id="loader"><img class="load-gif" src="' + loaderImage.src + '" /></div>').insertBefore($(this));
//alert (dataString);
$.ajax({
type: "POST",
url: "commentconnect.php",
data: {message:message, name:cname},
success: function(data) {
$('div#loader').find('img.load-gif').remove();
$('div#loader').hide().fadeIn('slow');
$('span.limit').remove();
$('div#append').prepend(data);
$('input#submit-comment').unbind('click').click(function(){
return false;
});
}
});
return false;
});
});
//ive added the appended part of the comment which is in the table
<table align="left" style="margin-left:30px; width:520px; border:1px solid;">
<?php
while($fetchcom=mysql_fetch_array($comment))
{
echo"<tr>";
echo"<td style='font-size:15px'>";
echo $fetchcom['c_name'];
echo"</td>";
echo"<td align='right' style='font-size:12px; font-style:italic'>";
echo $fetchcom['date'];
echo"</td>";
echo"</tr>";
echo"<tr>";
echo"<td colspan='2' style='padding:10px 10px 5px 10px; font-size:14px; color:gray; font-style:italic;'>";
echo $fetchcom['Comment'];
echo"</td>";
echo"</tr>";
}
?>
<div id='append' style="margin-left:-20px; position:relative; width:300px;"></div>
</table>
<div id="submission">
<form name="comment-submission">
<div style="position:relative; float:left; left:30px; top:5px;" >Add Comment</div>
<div style="position:relative; left:30px; top:3px;"><input type="text" id="comment-name" /></div>
<textarea id="message" name="message" ></textarea>
<div style="position:relative; top:-85px; height:70px; width:100px; right:-458px;"><input type="button" id="submit-comment" value="Submit" /> </div>
</form>
<div class="clear"></div>
</div>
//and heres the css hope this helps
div#submission {
position:relative;
height:50px;
width:520px;
}
div#submission textarea#message {
float:left;
width:400px;
height:46px;
padding:5px 25px 5px 5px;
border:1px solid #666;
font-family: Tahoma, sans-serif;
font-size:14px;
margin-left:30px;
}
#comment-name{
float:left;
width:400px;
height:20x;
padding:5px 25px 5px 5px;
border:1px solid #666;
font-family: Tahoma, sans-serif;
font-size:14px;
margin-bottom:5px;
}
div#submission input#submit-comment{
cursor:pointer;
height:30px;
width:70px;
margin-top:54px;
margin-left:5px;
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border: 1px solid;
border-color: #696 #363 #363 #696;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
}
i think the problem is in the prepend(data) part. there must be something there to add to restore the position of the textarea, but i dont know what and how. im new to jquery and ajax.
btw i have screenshot to show you the textarea ive mentioned. before submitting comment - http://i.stack.imgur.com/67eVU.png and heres a screenshot after submitting comment - http://i.stack.imgur.com/zFSXC.png thanks in advance
its really your CSS at fault here, you need to define an area (div) with dimensions like height/width that match your input form, and then it should not be deformed in the manner you see right now. Hard to tell you more as I don't see any proper CSS here.
Do something like:
<div style="position: relative">
<div style="position: absolute; left: 50px;">Add comment</div>
<div style="position: absolute; right: 20px;">Blah blah</div>
...
</div>
Keeping your primary container as a 'relative' item lets you position your inner items in relationship to it. Currently you have a position:relative; mess there, which is where your problem is.
Practice some CSS positioning on a simple HTML page to get your form looking correct, then integrate into your app.
I only used inline css for quick reference, you shoudl use an external CSS sheet in your real world usage
The input above the textarea in the first image is in a div that's set at block level. In the second image, that text box, and I assume the div, are not there. That block level div pushes the floated textarea to its position in the first image. There are several ways to fix it via css, but the most obvious is to make sure the input and it's containing div are still present after submission.