小编Sim*_*mon的帖子

如何让CSS mediaqueries与jQuery $(window).innerWidth()一起使用?

我正在尝试让jQuery处理菜单,而CSS在调整浏览器大小时会对窗口背景做些什么.

所以jQuery做了这样的事情:

if ( $(window).innerWidth() < mediaQueries['small']) {
    // (where 'small' would be 966)
    // Perform jQuery stuff on a menu ul
}
Run Code Online (Sandbox Code Playgroud)

CSS有这样的东西:

@media all and (max-width: 966px) {
    body {
        background: url(smallback.jpg) no-repeat 0 0;
    }
}
Run Code Online (Sandbox Code Playgroud)

当使用Firefox时,有一个17像素(似乎是垂直滚动条宽度)的间隙,其中已经处理了jQuery的东西,但CSS却没有.

由于其他浏览器可能会为其滚动条使用不同的宽度,因此只需在CSS中添加17px就无法解决问题.那么如何让jQuery考虑滚动条呢?$(window).innerWidth()对我来说似乎没有这样做.

任何帮助将不胜感激.

在Firefox,Opera或IE中打开此页面以查找问题的隔离版本.(Chrome和Safari不会遇到这个问题.因此:Webkit:+ 1,Gecko:-1,Trident:-1,Presto:-1.)

css firefox jquery width media-queries

18
推荐指数
2
解决办法
2万
查看次数

设置Webstorm/PHPStorm文件刷新时间

它可能只是一些我似乎无法找到的简单设置.事情就是这样:我有一个带有一些Compass/Sass CSS的web项目.当我修改Sass文件时,Compass会自动为我创建相应的CSS文件.如果文件已更改,Webstorm会将其全部上传到我的服务器.整齐!

但是,Webstorm(或PHPStorm,就此而言)并未立即注意到CSS文件中的更改,而是每2分钟左右检查一次外部修改.然后重新加载CSS文件并将其上载到服务器.

如何设置检查外部更改的时间间隔!?2分钟(左右,我还没有计时)太多了,我宁愿把它设置为10秒.对我来说也有用的是,如果我可以选择告诉Webstorm重新加载CSS文件,因为我知道它已经改变了.有点像日食中的F5.(Webstorm中的F5复制了一些内容,我无法在任何地方找到刷新命令或按钮.)

谢谢你的帮助!

解决方案: 请参阅CrazyCoder的评论.使用6.0 EAP版本的WS解决了这个问题.

phpstorm webstorm compass-sass

14
推荐指数
1
解决办法
6156
查看次数

当div的内容发生变化时,如何自动调整div的大小?

目前,我有这个DIV,注册表单位于页面中心.DIV的内容来自ascx页面.这很好地完成了.现在,如果用户尝试填写不唯一的名称,则会在username字段旁边添加一些错误消息.这打破了DIV的布局,因为现在的内容比以前更宽.所以我已经google了我的方式,但我找不到解决方案.

任何人都可以帮我找到一个很好的方法(伪HTML/js):

<div id="myCenteredDiv" onChangeContents="resizeToNewSize()">
  <!-- div contents -->
</div>

<script type="text/javascript">
  function resizeToNewSize() {
    $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, 
      $("#myCenteredDiv").contentHeight);
  }
</script>
Run Code Online (Sandbox Code Playgroud)

我正在寻找"onChangeContents"方法(和/或事件)和"div.contentWidth"属性.

非常感谢帮助我!

更新:试图更清楚地解释问题

假设我有这个DIV:

<div id="myDiv">
  <form ...>
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" />
    <span id="errorYourName"></span>
    <input type="submit" ... />
  </form>
</div>
Run Code Online (Sandbox Code Playgroud)

让我们说我有这个jQuery片段:

$(document).ready(function() {
  $("#txtYourName").live("blur", function() {
    if (validateInput($("#txtYourName").val())) {
      $("#errorYourName").html("");
      // entry 1
    } else {
      // entry 2
      $("#errorYourName").html("This name is not valid.");
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

... validateInput(value)返回true有效值.

现在好了.SimpleModal插件获取div并将其置于页面的中心,具有一定的宽度和高度,它以某种方式读取div的内容.因此div不比输入框宽,因为此时跨度是空的.

当输入框失去焦点时,会在范围中输入错误消息.然后这打破了div的布局.

我可以把代码放入entry …

javascript jquery dom resize

5
推荐指数
1
解决办法
3万
查看次数