最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function scrollfunction() {}根据下滑的高度来动态设置一些元素的布局,发现还是有点问题宽度有。干脆隐藏掉一些。

 window.onscroll = function scrollfunction() {
var dis = document.documentElement.scrollTop || document.body.scrollTop;
var count = ;
if (dis > ) {
var userAgent = navigator.userAgent;
if(userAgent.indexOf("Firefox")>-){ $('#forumDiv').css({"position": "absolute", "left": "380px "})
$('#userInfoDiv').css({"position": "fixed", "width": "300px", "top": "50px"})
$('#hotKeyDiv').css({"position": "fixed", "right": "100px", "width": "300px", "top": "50px","display":"none"})
$('#toTop').css({"bottom":"150px"})
}else{ $('#forumDiv').css({"position": "absolute", "left": "380px "})
$('#userInfoDiv').css({"position": "fixed", "width": "400px", "top": "50px"})
$('#hotKeyDiv').css({"position": "fixed", "right": "100px", "width": "400px", "top": "50px"})
$('#toTop').css({"bottom":"150px"})
}
count = ; } else {
$('#toTop').css({"bottom":"300px"})
// document.getElementById("institutionDiv").style.display="block";
// document.getElementById("upDiv").style.display="block";
$('#forumDiv').css({"position": "", "left": " "})
$('#userInfoDiv').css({"position": "", "width": ""})
$('#hotKeyDiv').css({"position": "", "right": "", "width": "","display":"block"})
}
}
$(window).resize(function () {
var windowHeight= $(window).width();
if(windowHeight<){
document.getElementById('hotKeyDiv').style.display="none"
}else{
document.getElementById('hotKeyDiv').style.display="block"
}
})

加上个判断浏览器的类型。。

    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -;
//判断是否Opera浏览器
if (isOpera) {
return "Opera"
};
//判断是否Firefox浏览器
if (userAgent.indexOf("Firefox") > -) {
return "FF";
}
//判断是否chorme浏览器
if (userAgent.indexOf("Chrome") > -){
return "Chrome";
}
//判断是否Safari浏览器
if (userAgent.indexOf("Safari") > -) {
return "Safari";
}
//判断是否IE浏览器
if (userAgent.indexOf("compatible") > - && userAgent.indexOf("MSIE") > - && !isOpera) {
return "IE";
}
//判断是否Edge浏览器
if (userAgent.indexOf("Trident") > -) {
return "Edge";
};

js判断浏览器的类型,动态调整div布局的更多相关文章

  1. js判断浏览器的类型

    我们很多时候都需要判断浏览器,下面就是一些常用的判断 var ua = navigator.userAgent.toLowerCase(); //用来判断移动端类型 var isWeixin = /M ...

  2. 前端如何通过js判断浏览器的类型(忽略版本)web html css javascript

    每个页面浏览器会实例出一个window对象,在window对象下有一个属性navigator,navigator本身是一个对象,navigator对象上有一个属性userAgent里面包含了当前浏览器 ...

  3. js判断浏览器的类型和获得浏览器的版本

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  4. js 判断浏览器的类型

    function getBrowser() {    var Sys = {};    var ua = navigator.userAgent.toLowerCase();    var s;    ...

  5. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  6. JS判断浏览器类型与版本

    在JS中判断浏览器的类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常需要根据不同的浏 ...

  7. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  8. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  9. JS判断浏览器类型和详细区分IE各版本浏览器

    今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

随机推荐

  1. C#-类(九)

    类的定义 类是描述具有相同特征与行为的事物的抽象,类内部包含类的特征和类的行为 类支持继承 类的定义是关键字class为标志 类的格式 访问标识符 class 类名 { 类主体 } 访问标识符:指定了 ...

  2. shell read变量的读入

    shell变量的输入: shell变量除了可以直接赋值或脚本传参外,还可以使用read命令从标准输入获取,read为bash内置命令,可以通过help read查看帮助. 语法格式: read [参数 ...

  3. Linux 小知识翻译 - 「/proc 文件夹」

    这次聊聊 「/proc 文件夹」. /proc 文件夹用来保管系统状态相关的文件的特殊文件夹,这个文件夹中有的文件只是内存上的虚拟文件. /proc 文件夹下有些文件可以反映各个进程的运行状态.所以说 ...

  4. June.19 2018, Week 25th Tuesday

    True love is visible not to the eyes but to the heart. 真爱不靠眼睛看,要用心感受. True love is visible not to th ...

  5. CSS多行文本垂直居中

    今天需要将文本垂直居中,就是一行是垂直居中,多行也是垂直居中. 效果如下 实现代码(同事提供) <!DOCTYPE html> <html> <head lang=&qu ...

  6. Spring Web项目spring配置文件随服务器启动时自动加载

    前言:其实配置文件不随服务器启动时加载也是可以的,但是这样操作的话,每次获取相应对象,就会去读取一次配置文件,从而降低程序的效率,而Spring中已经为我们提供了监听器,可监听服务器是否启动,然后在启 ...

  7. docker学习笔记(三)-通过network理解docker,在同一网桥里搭建docker容器

    创建test1 test2 两个network namespace 两个network namespace没有被启动 启动了但是有没有与network关联 创建两个veth,用于关联两个network ...

  8. git pull request 流程

    git pull request 用于在 fork 官方 repo 到个人 github, 在本地修改后,向官方 repo 请求合并.在官方团队审查过代码后,就可以将自己所做的改动合并到官方 repo ...

  9. 《JAVA程序设计》_第一周学习总结

    20175217吴一凡 <java程序设计> 第一周学习总结 虽然已经做好了心理准备,但第一周的学习任务着实让我忙了整整三天,还是挺充实的吧.寒假已经在自己的电脑上安装好了虚拟机,我就在我 ...

  10. Spring Boot+Spring Security+JWT 实现 RESTful Api 权限控制

    摘要:用spring-boot开发RESTful API非常的方便,在生产环境中,对发布的API增加授权保护是非常必要的.现在我们来看如何利用JWT技术为API增加授权保护,保证只有获得授权的用户才能 ...