使用 css 媒体查询触发 jquery

2024-02-07

我在我的项目中使用 css 媒体查询来创建一个适用于任何尺寸屏幕的网站。我希望触发不同的 jquery 函数,就像使用 css 一样。

例如,如果浏览器尺寸在1000px到1300px之间,我想调用以下函数:

$('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'circular'
});

但是当浏览器尺寸低于1000px时,js将停止处理。等等等等。

我不确定这是否可行,但也许有一个现有的解决方案或插件可以根据浏览器窗口大小创建不同的 js 环境。我想我可以以某种格式创建条件语句。有什么想法吗?


The 现代化 http://modernizr.com库支持直接调用 JavaScript 来评估媒体查询。

如果您不想这样做,您可以让不同的 CSS 规则驱动隐藏元素的某些属性,然后您可以使用“.css()”来检查 jQuery 的值。换句话说,“大于1000px宽”的规则可以设置一个隐藏的<div>到“宽度:1000px”,然后你可以检查

if ( $("#widthIndicator").css("width") === "1000px") {
  // whatever

Here http://jsfiddle.net/9X4up/是一个愚蠢的jsfiddle演示。左右拖动中间的分隔栏可以看到 JavaScript 代码(在间隔计时器中)检测到隐藏元素的有效“宽度”的更改。

如果您引用响应式设计,那么您还可以触发现有元素的属性,而无需向 html 添加标记,例如

if ( $("#navigation li").css("float") === "none") {
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 css 媒体查询触发 jquery 的相关文章

  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值
  • 在 Angular 5 中使用 jquery 插件

    我正在尝试在 Angular 5 项目中使用以下日期选择器 但我不确定如何导入它 https bootstrap datepicker readthedocs io en latest index html https bootstrap
  • 媒体查询跨帧泄漏

    这是一些 HTML The test html页面包含一些来自外部文件的 CSS 样式表有 media all and max width 600px body background color red 上面是简化的 但足以说明问题 两个页
  • MonoMac 窗口关闭时没有错误

    我刚刚开始在 Xamarin Studio 中使用 MonoMac 并且遇到了最奇怪的问题 我有一个带有 NSButton 和 NSTextField 的窗口 至此 我已经删除了按钮上的事件处理程序 因此它不会执行任何操作 除了在单击它时突
  • 如何插入元素作为第一个子元素?

    我想在每次单击按钮时使用 jquery 添加一个 div 作为第一个元素 div div class child div some text div div class child div some text div div class c
  • 将复杂对象传递到 WCF Rest 服务

    我有一个接受复杂对象的操作合约 并且我通过 jQuery 调用该操作 如何使用 jQuery 传递像这样的复杂类型对象 以下是操作签名 public Resolution CreateNewResolution Resolution New
  • Jquery Flipbook 上传 PDF

    我正在使用Builtbywill Flipbook div div title This is a page title img src image1 jpg div div img src image2 jpg div div title
  • 根据选择值显示/隐藏字段

    我试图根据我选择的字段之一的值显示和隐藏一些表单字段 我希望使用数组来保存每个选择值应该显示的内容和不应该显示的内容 以将我从大量的 switch 语句中拯救出来 但无法弄清楚如何做到这一点 我正在使用 PHP 和 jQuery 任何帮助都
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 更新到 1.11.0 后,自动完成功能要求您在 iOS 中单击两次

    使用 jQuery 2 1 0 和 jQuery ui 1 11 0 在 iOS 7 iPhone 和 iPad Mini 中测试 适用于 Android 和常规浏览器 问题 我们最近从 jQuery UI 1 10 0 升级到 1 11
  • 使用 JSON 文件动态更新 HTML 内容?

    我想创建一个 JS 循环 使用 jQuery 来查看 JSON 文件 并根据是否 div ids 与 JSON id 值匹配 这需要易于扩展并且无论有多少人都可以工作 div 添加了盒子 我有一个 HTML 文件 设置如下 div clas
  • 使用 jQuery 获取 ASP.Net Gridview 的 rowIndex

    您好 是否可以使用 jQuery 获取 gridview 的当前行索引 一点背景 我使用模板字段中的服务器端链接按钮从 gridview 中删除行 如下所示
  • JQuery 可滚动文本

    我正在寻找一个 jquery 插件 它将在可滚动框中绑定文本 大多数滚动插件都会转换浏览器滚动条 但我想保持它的原样和可用 这只是为了在较小的空间内包含大量的文本 就像这样page http www class pm files jquer
  • Jquery UI 日期选择器 设置默认日期

    我使用 jQuery UI 作为日期选择器 我想在字段中显示当前日期作为默认值 以下是我的代码 请帮助 From Date
  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • 当我更改浏览器选项卡时,Jquery Animate 停止

    我的投资组合中有一个疯狂的问题 http hericdk com http hericdk com 我用jquery做了一个简单的动画 一个太空飞船飞行的动画 然后就出现了我的作品 这个想法不错 大家都喜欢 但问题是 由于某种奇怪的原因 当
  • 如何使用 jQuery 通过 Ajax 发送复选框数组的值?

    我有一个包含很多表单字段的表单 12 x n 行 每行中的第一个字段 代表产品 是一个类似于以下内容的复选框
  • 如何模板化 Select2 的预选值

    我预先选择的值Select2 https select2 org如下所示 function formatState state console log state text2 I found undefined here console l
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • 如何使用 Python 的 zipfile 模块设置 ZIP 文件中文件的权限(属性)?

    当我从使用 Python 创建的 ZIP 文件中提取文件时zipfile http docs python org library zipfile html模块 所有文件都是不可写 只读等 该文件是在 Linux 和 Python 2 5
  • 用户登录后重定向

    我对 Angular 还很陌生 现在我只是想按照我的意愿设置所有路线并使其工作 Setup 当用户导航到某些页面时 settings对于此示例 应用程序应检查是否有用户已登录 如果有则照常继续 否则用户应该转到登录页面 login 我想要什
  • JQuery 方法和 DOM 属性

    我很困惑何时可以使用 DOM 属性以及何时可以在 Jquery 对象上使用 Jquery 方法 比如说 我使用选择器 var elemSel myDiv find id select 此时 elemSel 是一个 jquery 对象 我将其
  • 无法获取文件创建日期?

    在我的应用程序中 我创建一个目录 然后以下代码起作用 NSDictionary fileAttributes fileManager fileAttributesAtPath trackDirectory traverseLink YES
  • 如何从 lldb 执行一个块(由指针标识)

    我在 iOS 模拟器的 lldb 调试器中 并且有一个块的地址 我想尝试执行它 我尝试了想到的第一件事 见下文 但它不起作用 有没有办法做到这一点 lldb po 0x2c7140 int 2 2912576 lt NSGlobalBloc
  • 用 Jackson 映射一个可以有不同类型的 JSON 字段?

    我从 Web 服务获取 JSON 并且无法影响 JSON 格式 下面的 JSON 代码只是一个示例来说明问题 场cars可以是一个包含以下内容的对象Car对象 也可以是空字符串 如果我可以更改网络服务 我会将空字符串更改为空对象 例如 ca
  • 在 codeigniter 中将数组从控制器传递到模型

    我正在 Codeigniter 中做一个项目 这里我使用 imap 从我的 gmail id 中获取最新的 10 封邮件 这里我想获取所获取邮件的 from 字段 并且我想检查所获取邮件的 from 字段是否在我的数据库中table cli
  • 使用 Devise 的 RoR 中的会话超时消息

    我有一个使用设备保护的应用程序 会话超时为 30 分钟 使用设计 正常导航一切正常 如果用户在超时时单击链接 他们会被重定向回登录屏幕 并显示一条消息 您的会话已过期 请重新登录以继续 非常好 不过我在很多地方都有ajax 如果会话超时并且
  • WebGL / Three.js - 移动相机时,纹理着色的粒子不规则地闪烁

    这是一个jsfiddle http jsfiddle net vko8hzzs 4 我将粒子在使用纹理着色时以及相机移动时 闪烁 的问题放在一起展示 更新 粒子上不应该发生动画或运动 如果当您在视口上单击并拖动并且粒子闪烁或完全改变颜色时
  • bash:grep 根据第一列精确匹配

    我有一个如下所示的 txt 文件 9342432 A1 9342432 1 0 0 0 4392483 A2 4392483 2 0 0 0 4324321 A3 4324321 1 0 0 0 9342432 9342432 2 0 0
  • 点击时如何更改 UIView 的样式?

    我使用以下代码制作不同的 UIView 可点击 它们不是从 UIControl 继承 UITapGestureRecognizer gesture UITapGestureRecognizer alloc initWithTarget se
  • 什么是cgi编程

    CGI编程到底是什么意思 如果我用 C 编写一个cgi程序 在这种情况下 cgi 是什么意思 servlet 环境是经典 cgi 编程的抽象吗 CGI 表示通用网关接口 它是一个 Web 服务器 接收用户请求并进行处理 然后将响应发送回用户
  • 在 ASP.NET 中,什么时候应该使用 Session.Clear() 而不是 Session.Abandon()?

    Session Clear 和 Session Abandon 都会删除会话变量 据我了解 Abandon 结束当前会话 并导致创建新会话 从而导致结束和开始事件触发 在大多数情况下 例如注销用户 最好调用 Abandon 在某些情况下我会
  • 如何在触发器调用的过程中使用COMMIT

    我有下面的触发器 mytrg 它调用一个过程 myproc 如果表1中有任何插入 该过程将更新表2 在表2中更新数据后 我在过程中有 COMMIT 语句 但是当 table1 中有插入时 我收到以下错误 Error report SQL E
  • 使用动画重新加载表视图单元格(Swift)

    有没有办法重新加载特定的UITableView具有多个带有动画部分的单元格 我一直在使用 self TheTableView reloadSections NSIndexSet index 1 withRowAnimation UITabl
  • 在 Facebook 上发帖 - 错误 - 用户必须是该页面的管理员才能冒充该页面

    我自动将新闻从网站发布到 Facebook www rybnik com pl gt rybnikcompl 几个月来效果很好 但两天前我注意到错误 用户必须是该页面的管理员才能冒充该页面 据我所知 用户 应用程序权限 访问令牌等没有任何变
  • Bash 命令从远程 url 复制图像

    我用的是mac的终端 我想从远程网址复制图像 http media pragprog com titles rails4 code depot b public images http media pragprog com titles r
  • 如何将日期字符串转换为字符串(yyyy-MM-dd)。这样做时,我得到空值?

    我的数据为 customerFromDate 01 Apr 2010 和 customerToDate 30 Apr 2010 这是一个字符串 我想将该格式转换为字符串 yyyy MM dd 但这样做时我得到了空值 请参阅我尝试过的以下代码
  • 允许自定义文件在加载数据时双击并打开我的应用程序[重复]

    这个问题在这里已经有答案了 就像您在 Windows 中进行引用一样 要打开 txt 文件 它可能会打开 NotePad exe 和 或 Word exe 同时将文件中的文本加载到编辑器中 如何使用我的桌面应用程序执行此操作 我有一个扩展名
  • 使用 css 媒体查询触发 jquery

    我在我的项目中使用 css 媒体查询来创建一个适用于任何尺寸屏幕的网站 我希望触发不同的 jquery 函数 就像使用 css 一样 例如 如果浏览器尺寸在1000px到1300px之间 我想调用以下函数 mycarousel jcarou