使用 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 的相关文章

  • JavaScript 日期 + 7 天

    这个脚本有什么问题 当我将时钟设置为 29 04 2011 时 它会添加2011年4月36日在星期输入 但正确的日期应该是6 5 2011 var d new Date var curr date d getDate var tomo da
  • jquery $('id').text 带粗体

    我有一个 jquery 可以更改链接的文本 如下所示 if urlfind gt 0 linkurl text More info 和 HTML a href a 我试图为此链接添加粗体 但添加 b More Info b 让它们在文本本身
  • 如何使用 JavaScript 或 jQuery 获取 html 元素的比例值?

    我想知道如何获得元素的比例值 我努力了 element css webkit transform 返回matrix scaleX 0 0 scaleY 0 0 有没有办法得到scaleX and scaleY only 找出文档和元素之间的
  • 如果我想让我的网站跨平台兼容和屏幕阅读器兼容,我应该避免使用 javascript 、 jquery 、 flash 、 ajax 、 silverlight 吗?

    如果我想让我的网站跨平台兼容 PC iPHONE 其他手机 PDA 和 Accessible 兼容屏幕阅读器 我是否应该避免使用 JavaScript jQuery flash Ajax Silverlight 我应该只使用 xhtml c
  • 在模型对象上设置属性?

    Hi 我正在构建 ASP NET MVC 站点并遇到了问题 在我的项目中 我得到了一个 modelview 类 其中包含几个属性 例如 public class myModelView public int MyProperty1 get
  • 针对较小屏幕的拆分表行

    我有一个固定宽度为 960px 有 5 列的表格 当我在移动设备中查看时 我想制作第 3 4 5 列 看起来就像在下一行 有什么方法可以让 CSS 打断一行 使其看起来像这样 但是 还保留原来的HTML代码吗 您可以使用 FlexBox f
  • 哪个 SVG/SMIL DOM 元素具有“beginElement”方法?

    最终 这是针对将在 Firefox 中运行的 Kiosk 风格的应用程序 使用 jQuery 1 6 4 因此答案可能是特定于 Firefox 的 我正在尝试制作动画 SVG 但我正在尝试通过动态插入 SMIL 来为其设置动画 我没有看到任
  • Firebug 分析问题:“没有要分析的活动”

    我想用一些 javascript jQuery 尝试一些不同的选项 看看哪个是最快的 但是我无法让分析正常工作 这是我要测试的代码 this keypress function e console profile test retrieve
  • Rails 3.1 与 Asset Pipeline,link_to :确认消息显示两次?

    好的 所以我已经看到了这个问题 https stackoverflow com questions 4475449 link to confirm displays popup twice关于这个问题是由 jQuery 或 Prototyp
  • 从 WordPress 搜索结果页面获取类别名称

    在特定博客类别中进行搜索查询 重定向到 WP BLOG 主页面 后 我的搜索 URL 如下所示 online shop s category new posts category post type post 不幸的是 我无法在搜索结果页面
  • 将外部 SVG 加载到 DOM 中,当前文档而不是子文档

    我正在尝试将外部 SVG 文档加载到一个简单的网页中 以便我可以将其用作基本的氯罗佩斯地图 然而 使用HTML 中的结果是 SVG 作为子文档加载 基本上我无法使用 jquery 按 ID 查询 SVG 路径 例如 NY css fill
  • 建议一种每分钟更新时间的方法

    我有一个完整的ajax应用程序 我正在使用下面的代码每分钟更新一次时间 但如果我保持浏览器打开超过 10 分钟 浏览器就会变得无响应 缓慢 建议更好的代码 function tick var d new Date var time padN
  • 将 jQuery 与托管在 Github 页面上的 Jekyll 站点结合使用

    我有一个简单的 Jekyll 博客托管在 github 页面上 我已经包含了 jQuery 和 tablesorter 插件 但遇到了错误 据我所知 这个错误是由于没有以正确的顺序加载 jQuery 引起的 我的下图显示代码的顺序是正确的
  • 如何在android中使用jquery和phonegap打开pdf文件?

    最近我正在为 Android 构建一个应用程序 我正在使用phonegap 来做同样的事情 一切都运行良好 除了一个问题 即我无法在 android 中使用 jquery 打开 pdf 文件 我已经尝试了很多做同样的事情 但我无法做到这一点
  • 将图像从 JQuery 上传到 Node JS

    我需要从我的网站上传图像文件HTML页 但是 我不会使用form标签 因为还有其他form稍后将用于将数据传递到服务器的字段 文本字段 复选框等 我的后端在Node JS 我想要的只是从Node Js结尾 我怎样才能做到这一点 HTML d
  • JavaScript 在数组中查找

    我有一个像这样的数组 var movies Name The Red Violin ReleaseYear 1998 Director Fran ois Girard Name Eyes Wide Shut ReleaseYear 1999
  • 停止 jQuery 循环设置 display:none;

    我正在创建一个小游戏 用户从一组项目中进行选择 然后对所选项目进行洗牌并选择一个 我正在使用 jQuery 循环 http jquery malsup com cycle http jquery malsup com cycle 运行主动画
  • 基于鼠标位置的平滑滚动(Jquery)

    HI 我想创建一个基于鼠标位置的平滑滚动条 这个想法是创建一个具有固定宽度的外部 div 内容非常宽 必须根据鼠标位置向左或向右滚动 如果内容是 无限 或 无尽 的 那就太好了 内容是一个非常宽的图像 无缝 地重复 有人可以帮我用 jQue
  • 使用 Tiny Scrollbar 自动滚动到 div 底部

    我正在编写一个shoutbox 并使其尽可能用户友好 它使用微型滚动条插件 http plugins jquery com project tinyscrollbar对于 jQuery 我想合并一个额外的函数 让我可以让它到达底部div 它
  • JQuery 可拖动图像并保存位置

    好吧 这变得很尴尬 已经搜索并尝试了大约 5 个小时 但我只是在兜圈子 场景很简单 它是用户个人资料的标题图像 可以将其拖动到某个位置 然后将图像的顶部位置保存到数据库中 感谢 Beetroot Beetroot 的 遏制 父级 我开始关注

随机推荐

  • 如何使用 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