Working scroll-to-bottom for comments

This commit is contained in:
Latif Khalifa
2013-10-15 02:37:48 +02:00
parent 9029a3c971
commit 5900c7ab45
3 changed files with 19 additions and 8 deletions

View File

@@ -124,7 +124,9 @@ class Comments
$(function(){ $(function(){
$("#add_comment").button() $("#add_comment").button()
.on("click", function(){ .on("click", function(e){
e.preventDefault();
data = { data = {
ajax: 1, ajax: 1,
@@ -139,15 +141,15 @@ class Comments
data: data, data: data,
success: function(res) { success: function(res) {
$("#comments_scroller").html(res); $("#comments_scroller").html(res);
$('#comments_scroller').scrollTop($('#comments_scroller')[0].scrollHeight);
updateDelLinks(); updateDelLinks();
scrollDown($('#comments_scroller'));
}, },
}); });
}); });
$('#comments_scroller').scrollTop($('#comments_scroller')[0].scrollHeight);
updateDelLinks(); updateDelLinks();
scrollDown($('#comments_scroller'));
}); });
</script> </script>
@@ -155,8 +157,12 @@ class Comments
<p>Comments for crash signature <?php echo $id ?></p> <p>Comments for crash signature <?php echo $id ?></p>
<div id="comments_scroller" style="max-height: 300px; overflow-y: auto;"><?php echo self::renderComments($id) ?></div> <div id="comments_scroller" style="max-height: 300px; overflow-y: auto;"><?php echo self::renderComments($id) ?></div>
<div id="new_comment"> <div id="new_comment">
<a id="add_comment">Add comment</a> <form id="comment_submit_form" action="comments.php">
<textarea id="comment_input" class="ui-widget-content" style="width: 100%; display: block; height: 100px; margin-top: 5px;"></textarea> <input type="submit" id="add_comment" value="Add comment" />
<textarea id="comment_input" class="ui-widget-content" style="width: 100%; display: block; height: 100px; margin-top: 5px;"></textarea>
<input type="hidden" name="signature_id" value="<?php echo $id ?>" />
<input type="hidden" name="action" value="add_comment" />
</form>
</div> </div>
</div> </div>

View File

@@ -139,7 +139,6 @@ class Layout
</head> </head>
<body> <body>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[
$(function() { $(function() {
$( ".toolbarbutton" ).button(); $( ".toolbarbutton" ).button();
@@ -150,7 +149,12 @@ class Layout
*/ */
}); });
//]]>
function scrollDown(elem) {
var scrollHeight = Math.max(elem[0].scrollHeight, elem[0].clientHeight);
elem[0].scrollTop = scrollHeight - elem[0].clientHeight;
}
</script> </script>
<div style="padding-top:10px;"> <div style="padding-top:10px;">

View File

@@ -21,6 +21,7 @@ $filter->render();
autoOpen: false, autoOpen: false,
width: 800, width: 800,
height: "auto", height: "auto",
position: "top",
}); });
$(".comment_link").each(function() { $(".comment_link").each(function() {