jQuery:如何动态检测窗口宽度?

2023-11-29

我的页面上有一个滚动元素(使用 jScrollPane jQuery 插件)。我想要完成的是一种通过检测浏览器窗口的宽度来关闭滚动窗口的方法。我正在做响应式布局,我希望当浏览器低于一定宽度时关闭此滚动功能。当我刷新页面时,我能够使其工作,但是当我调整浏览器窗口大小时,宽度值不会即时更新。

现在,如果我从 1000 像素宽的窗口开始,然后将其大小调整为 350 像素,则滚动功能仍然存在。我希望浏览器宽度达到 440px 时立即关闭滚动功能。

这是我到目前为止的代码..

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}

更改变量并不会神奇地执行变量中的代码if-堵塞。将公共代码放在一个函数中,然后绑定事件,并调用该函数:

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery:如何动态检测窗口宽度? 的相关文章

  • 检测 iframe 内容加载失败

    我可以使用以下命令检测 iframe 的内容何时加载load事件 不幸的是 就我的目的而言 这有两个问题 如果加载页面时出现错误 404 500 等 则永远不会触发加载事件 如果某些图像或其他依赖项加载失败 则会照常触发加载事件 有什么方法
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • JointJS - 处理链接删除点击

    创建链接后 将鼠标悬停在其上会显示红色 X 以将其删除 单击此按钮将触发一系列事件 通过订阅 全部 活动收集 单元格 向下指针 链接 向下指针 cell pointermove x5 似乎可疑 单元格 指针向上 在浏览了文档并花费了太长时间
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • 用于导出到 CSV/Excel 的数据 URI(无服务器端请求):浏览器支持/限制?

    以下问题 Javascript 或 Flash 导出至 CSV Excel https stackoverflow com questions 8150516 javascript or flash export to csv excel
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • 是否可以使用 Javascript 读取 PHP 会话?

    我正在使用 cakePHP 1 26 在控制器中 我得到了一个包含以下代码行的函数 this gt Session gt write testing user this gt Session gt read testing 现在系统编写了一
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • 优化正则表达式以过滤数千个 HTML 选择选项

    背景 我开发了一个基于 jQuery 的穿梭小部件 https stackoverflow com a 13557000 59087对于 HTMLselect元素 因为我找不到一个经过最低限度编码并提供正则表达式过滤器来补偿的元素变音符号
  • Jade(当前称为“Pug”)模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可
  • 在浏览器上录制视频并上传到LAMP服务器

    我已经尝试了很多东西 red5 jquery 网络摄像头 html5 但这些解决方案都没有录制视频并准备好上传到服务器 无论如何 html5 flash 等等 更好的跨浏览器解决方案 最好的 上传视频 音频 并将结果上传到服务器 我猜是通过
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • 从 Node.js 调用 execl、execle、execlp、execv、execvP 或 execvp 的方法

    POSIX 系统公开了一系列exec函数 允许人们将可能不同的东西加载到当前进程中 保留打开的文件描述符 进程标识符等 可以出于多种原因执行此操作 在我的情况下 这是引导 我想更改我自己的进程的命令行选项 然后在现有进程上重新加载它 这样就
  • 我无法使用 jQuery 和 abort() 函数停止 ajax 请求

    我的 jQuery 如下 var x ajax dataType jsonp url https ajax googleapis com ajax services search images q google v 1 0 success

随机推荐

  • 如何使用 Angular 8 在 html 中渲染 Tiff 格式文件

    我的应用程序中有一个上传部分 但这里除了 tiff 格式文件外 它可以很好地处理 png jpeg 和其他图像格式 但不能处理 tiff 格式 选择文件后 我无法显示为预览 谁能帮助我让它发挥作用 DEMO DEMO TS onSelect
  • 安全性 - 数组直接存储

    我什至提到 声纳违规 安全性 数组直接存储 我的代码是这样的 gt public final void setSelectedObjectsList final ScheduleDTO selectedObjectsList Securit
  • Bootstrap 4 Beta 中轮播的淡入淡出过渡

    我正在尝试修改新的 Bootstrap 4 Beta 轮播 以使用淡入淡出而不是滑动操作从幻灯片过渡到幻灯片 并使用 CSS 我无法让它工作 我不确定是否需要特殊的 Javascript 调用 请参阅此处的 Codepen carousel
  • 从 R 中的时间向量中每次减去 10 分钟?

    我有一列这样的时间 2 43 00 PM 2 43 01 PM 2 43 05 PM 2 43 06 PM 2 43 07 PM 我想转到每一行并从每一时间中减去 10 分钟 这样新列如下所示 2 33 00 PM 2 33 01 PM 2
  • std::is_assignable 和 std::pair

    正如所料 以下代码不编译 include
  • 用于取消选中所有其他复选框的复选框

    我正在尝试进行一些验证 以便 当任一 选择一个 or 选择B 被检查 未选择 自动取消选中 当选中 未选择 时 两者 选择一个 and 选择B 会自动取消选中 但是当我运行此代码时 单击任何复选框都会取消选中all3 个复选框 即窗口初始化
  • 选择(下拉)的背景图像在 Chrome 中不起作用

    我想使用图像作为选择 下拉菜单的背景 以下 CSS 在 Firefox 和 IE 中工作正常 但在 Chrome 中不行 main drop down loc width 506px height 30px border none back
  • 属性错误:使用 lambda 在 Spark sql python 上分割

    在 Spark SQL 中 我使用 Python 并且尝试处理以下 sql 的输出 RDD 这是推文列表 我需要分割单词并提取 但是当使用地图并尝试按空格分割时 我收到了下面提到的异常消息 words tw sqlContext sql S
  • 使用 Python 对 PDF 文档进行数字签名

    我正在尝试使用 Python 签署 PDF 文档 并发现了一个名为我的PDF签名者 它有很好的文档记录 但是我发现该文档有点令人困惑 我遇到的唯一问题是如何安装mypdfsigner模块运行代码来签署文档 文档本身提供了一个代码示例 但是虽
  • 准备好的sql语句中的Python整数列表

    我的问题有点像Python 字符串到 SQL IN 参数的列表但我有一个整数列表 我使用的Python代码是 ids 1000032 1000048 sql SELECT CompNo CompName CompType FROM Comp
  • 在python matplotlib中将不规则四边形转换为矩形

    我从视频中得到了这些数据 矩形的顶点 动物在矩形内追踪的点 由于图像变形 我的 矩形 不规则 我想转换数据以便将它们在 matplotlib 中绘制为矩形 有简单的方法吗 这是迷宫和追踪 我把它分解成五个四边形 您可以使用skimage t
  • Javascript NoGray 日历如果今天被阻止,则在选择的阻止日期后查找下一个可用日期

    我正在使用NoGray Calendar并有以下代码 my cal1 new ng Calendar input date date1 month month1 year year1 selected date new Date displ
  • 错误:无法打开显示::0 进行 Selenium 测试

    首先我收到以下错误 org openqa selenium firefox NotConnectedException Unable to connect to host 127 0 0 1 on port 7055 after 45000
  • 使用“struct S”或“S”作为类型名的区别

    C 语言中结构化类型的名称S ist struct S 在C 中也可以使用struct S作为类型名而不是S像往常一样 struct S struct S s1 also ok in C S s2 normal way in C 所以 假设
  • 使用 group by 进行条件聚合查询

    我有一个系统 用户从不同的公司登录 我正在尝试运行查询来查看每个公司的活跃用户数与用户总数 Users table userID companyID lastLogin 期望的输出 companyID totalCompanyUsers n
  • 如何在Python中检查数字的“密码”[重复]

    这个问题在这里已经有答案了 我已经设置了一个程序来更改 密码 我让它检查它是否至少有 8 个字符 包含大写字母和数字 如果不满足此条件 它会再次要求输入密码 除了检查号码之外 我一切正常 我想知道是否有人可以提供帮助 npwv 1 whil
  • JSTL 1.0 字符串函数

    我正在尝试使用一些字符串函数 例如修剪或concat使用 JSTL 我尝试了以下方法 我尝试添加但我最终遇到了错误 我认为这适用于其他 JSTL 版本 例如 1 2 或 1 1 我需要知道的是如何在 JSTL 1 0 中使用字符串函数 JS
  • 对嵌套列表进行排序

    给出的是一个嵌套列表 具有以下标记 遗憾的是目前无法更改 我想对此列表进行排序 以及按 a 标签标题排序的所有嵌套列表 第一个 div 未嵌套在 li 中 应该用于对 ul 同级进行排序 性能也很重要 因为这个列表很容易包含超过 100 个
  • Pygame 从全屏切换到正常不起作用

    我目前正在尝试设置从窗口模式和全屏模式切换的设置 但是进入全屏并尝试返回后 游戏错误非常奇怪并且粘在左上角 顺便提一句 显示宽度 1280 显示高度 720 elif Settings Menu True screen fill 0 0 0
  • jQuery:如何动态检测窗口宽度?

    我的页面上有一个滚动元素 使用 jScrollPane jQuery 插件 我想要完成的是一种通过检测浏览器窗口的宽度来关闭滚动窗口的方法 我正在做响应式布局 我希望当浏览器低于一定宽度时关闭此滚动功能 当我刷新页面时 我能够使其工作 但是