WP-Thread-Comment嵌套评论的留言框自动适应宽度

Posted by Harid八月 - 20 - 2011 Leave comments

WP-Thread-Comment插件是我一直在用的评论增强插件,它的功能有很多,具体就不细说了。它有一点小小的问题就是在点击【嵌套回复】后,将留言框部分移动至需要嵌套的地方时,留言框(textarea元素)的textarea元素其宽度依旧是保持原来的,因此会有挤出至侧边栏的现象。具体到星期九的话,我在留言框的右边放了个小广告,因此会将广告挤至下一行,影响美观。

下图是挤出至侧边栏的一个实例:

留言框挤出至侧边栏那么,我只要让留言框的宽度自动调节即可。我的方法是在点击了“【嵌套回复】”时,用Javascript读取当前“form”表单元素的宽度,因为没有进行嵌套回复而只是普通评论的时候,我的“form”元素所辖的区域也就是嵌套回复时需要移动的区域其宽度是704px,那么如果当前的宽度小于这个值,即说明需要调整。这个时候重新生成合适宽度的留言框就好了。

具体做法:

1、修改comments.php文件,找到留言框所在的行。我的代码是:

<textarea name=”comment” id=”comment” tabindex=”5″></textarea>

将其用层封装,改成:

1
2
3
<div id="commentarealeft">
     <textarea name="comment" id="comment" tabindex="5"></textarea>
</div>

2、修改WP-Thread-Comment插件的文件wp-thread-comment.js.php,找到“movecfm”函数,在函数里找到“ if(Commentarea && Commentarea.display != “none”){”语句,在其之前添加下述几行就OK了:

1
2
3
4
5
6
7
8
9
10
//设置宽度
var respond = document.getElementById('commentform');
var comment_area = document.getElementById('commentarealeft');
var res_wid = respond.offsetWidth;
if(res_wid < "700"){
	var new_wid = res_wid - 210;
	comment_area.innerHTML = '<textarea name="comment" id="comment" tabindex="5" style="width: '+new_wid+'px;"></textarea>';
}
 
Commentarea = commentarea();

如果留言区域的表单其id不是“commentform”,那么改成相应的id。我这里之所以new_wid是减210,是因为广告的宽度。如果没有广告,那么减小210这个数字。其中700是form表单元素的宽度。

修改后我的就好了,能自动适应新的宽度了,效果见嵌套回复时。

   声明:本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明:转自《WP-Thread-Comment嵌套评论的留言框自动适应宽度


分享按钮