JQueryMobile+融云webSDK创建的聊天室有多余空白
2015-12-18 10:00
260 查看
做了一个视频电商,要求上边放视频,下边有聊天室可以聊天。因为融云提供免费的即时通讯服务,所以用的融云的web SDK .但是有一个问题就是,聊天室我给了样式:
发送消息的时候,消息内容距离发送框有一大截空白,并且不同的移动设备遗留的空白页有所不同。最后的解决办法就是具体算出我聊天室的高,不能用:10rem.并且一定要有高,滚动条才会生效。
具体代码如下:
#chatRoom{height:10rem;overflow:scroll;}
发送消息的时候,消息内容距离发送框有一大截空白,并且不同的移动设备遗留的空白页有所不同。最后的解决办法就是具体算出我聊天室的高,不能用:10rem.并且一定要有高,滚动条才会生效。
具体代码如下:
[code]var targetHeight = 0; var changeSize = function(){ /*设置chat高度*/ var clienHeight=document.documentElement.clientHeight; //屏幕的高度 var headerHeight=$("#MyHeader").height();//header的高度 var videoHeight=$("#videoHeader").height();//video的高度 var barHeight= $(".ui-navbar").height();//navBar高度 targetHeight = clienHeight - headerHeight - videoHeight - barHeight - 24; }; $('#chatRoomDrop').off('click').on('click',function(){ if(!targetHeight){ changeSize(); } $('#MessagesContent').height(targetHeight+'px'); }); /*客服*/ $('#severDrop').off('click').on('click',function(){ if(!targetHeight){ changeSize(); } $('#MyMessagesContent').height(targetHeight+'px'); });
相关文章推荐
- jquery控制导航定位,浮动窗跟随网页变化
- jquery中判断是否按下回车enter键
- jQuery Validate插件实现表单强大的验证功能
- Jquery 根据value值设置下拉列表(select)默认选中项
- jquery实现二级导航下拉菜单效果
- jquery判断复选框选中状态以及区分attr和prop
- ASP输出JSON,jQuery.get异步请求,HTML5本地存储,JavaScript分页显示
- jQuery复选框全选反选操作
- 【jQuery】使用getJSON()方法异步加载JSON格式数据
- 【jQuery】使用load()方法异步请求数据
- 【jQuery】调用delay()方法延时执行动画效果
- 【jQuery】调用stop()方法停止当前所有动画效果
- 【jQuery】调用animate()方法制作移动位置的动画
- 【jQuery】调用animate()方法制作简单的动画效果
- 【jQuery】使用fadeTo()方法设置淡入淡出效果的不透明度
- 【jQuery】使用fadeIn()与fadeOut()方法实现淡入淡出效果
- 【jQuery】使用slideToggle()方法实现图片“变脸”效果
- 【jQuery】使用slideUp()和slideDown()方法的滑动效果
- 【jQuery】调用toggle()方法实现动画切换效果
- 【jQuery】动画效果的show()和hide()方法