相关疑难解决方法(0)

我正在使用JQuery:

$(window).resize(function() { ... });

但是,似乎如果此人通过拖动窗口边缘来手动调整其浏览器窗口的大小以使其变大或变小,则.resize上述事件将多次触发.

问题:如何在浏览器窗口调整大小完成后调用函数(以便事件仅触发一次)？

我最近遇到了一些非常奇怪的事情,我不确定是不是我可能只是遗漏了一些东西,但我无法理解为什么会这样.

我有一个网站上运行了以下jQuery代码段:

$(window).resize(function(){
  alert("Resize fired!");
});

当我在Android手机浏览器上访问该网站时,只需在网站上下滚动,我就可以看到警报.

Android浏览器滚动条(淡入和淡出)覆盖在整个站点的顶部,似乎不会导致窗口的任何大小调整,所以我猜这个事件不会被它们触发.

有谁知道为什么Android浏览器会在滚动时触发此事件？

任何信息将不胜感激.

编辑:

我已经尝试为body设置CSS,设置overflow-y滚动查看这是否是一个可行的解决方案,但事件仍然在Android上滚动时被触发.

编辑#2:

我在HTML中使用以下metatag:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

我正在为Twitter Bootstrap上构建的WordPress制作一个响应主题.我在主页上使用FlexSlider幻灯片jquery插件.

不幸的是,当我调整浏览器大小时,FlexSlider不会优雅地调整大小.当我变窄时,图像很容易被裁掉......如果我走得更宽,下一张图像的一部分可能会出现在侧面.即使我使用FlexSlider网站上的演示代码,也会发生这种情况.它甚至发生在FlexSlider演示中.但Dany Duchaine的[Energized theme] [3]设法在视口改变时很好地调整FlexSlider的大小.任何人都可以解释他是如何做到这一点,或建议我可以改善我的版本的行为？

谢谢!

我必须在平板电脑,桌面显示器以及某些非常大的4k +高分辨率影院尺寸显示器上构建d3可视化功能.

所以我试图弄清楚使用SVG的'viewBox'属性和'preserveaspectratio'与调用resize函数来重新渲染窗口调整大小事件和使用绝对值之间的权衡.大多数示例,例如此博客条目(http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/)建议后者我在其中执行以下操作:

d3.select(window).on('resize', resize)

resize() {
// rerender each individual element with the new width+height of the parent node
d3.select('svg')
 .attr('width', newWidth)
//etc... and many lines of code depending upon how complex my visualisation is
}

但是,为什么我不能只使用SVG viewBox让我的SVG调整大小如下:

d3.select('svg')
  .attr( 'preserveAspectRatio',"xMinYMin meet")
  .attr("viewBox", "0 0 900 500")
  .attr('width', '100%')

我只是假设我的宽度和高度是900x500px(或其他),并利用SVG是一种矢量格式来处理所有繁琐细节(如文本大小和边距)的事实.我很难理解为什么这么多人在使用D3提供响应式或可扩展的可视化示例时会使用resize()函数,而且我非常担心如果我沿着viewBox路线走,我会遗漏一些东西.

编辑:

因此,除了mef在下面所说的内容之外,有人认为使用viewBox我会遇到特定的宽高比.因此,我可能希望可视化的高度保持固定,例如在线条或条形图的情况下,但它具有响应的宽度.由于宽度的变化需要改变高度,因此无法使用固定的宽高比.这种情况需要resize()函数重新渲染以适应新的宽高比.

因此,尽管具有固定宽高比的viewBox更容易实现,但是有许多常见情况需要更大的控制,这需要resize()函数并解释社区对更复杂解决方案的偏好作为第一和最后的手段.我的用例可能有利于viewBox解决方案,当您的需求是响应时,这有点不寻常.

我如何实现,具有自动宽度和高度的jQuery模式对话框始终在浏览器中居中.调整浏览器窗口大小后.

以下代码不起作用.我认为问题是自动宽度和高度.

jQuery - 代码

$("<div class='popupDialog'>Loading...</div>").dialog({
  autoOpen: true,
  closeOnEscape: true,
  height: 'auto',
  modal: true,
  title: 'About Ricky',
  width: 'auto'
}).bind('dialogclose', function() {
  jdialog.dialog('destroy');
}).load(url, function() {
  $(this).dialog("option", "position", ['center', 'center'] );
});

$(window).resize(function() {
  $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

谢谢!

我正在寻找一种方法来在窗口调整大小的最后检测mouseup事件(通过拖动完成).(AFAICT,此事件不会被resize处理程序打开$(window)或打开$(document).)

PS:为了我的目的,可以定义一个"拖动调整大小",作为在mousedown(在窗口上合适的调整大小的轨迹上)和相应的mouseup事件之间发生的大小调整,忽略用户可能做出的任何暂停,同时仍然按住鼠标按钮,在这两个端点之间.

这个目前正在chrome中发生,在firefox中我还没有遇到过这个问题.

这是我的问题的非常简化的版本.

HTML:

<div class="thumbnail">
  <a href='#' id="clickMe">Click me!</a>
</div>

CSS:

div {
    width: 200px;
    height: 300px;
    background-color: purple;
}
a {
    position: absolute;
}
@media (max-width: 991px) {
    div {
        height: 200px;
    }
}

使用Javascript:

$(document).ready(function () {
    var $parent = $('#clickMe').parent();
    function resize() {
        $('#clickMe').offset({
            top: $parent.offset().top + $parent.height()-$('#clickMe').height()
        });
    }
    $(window).on('resize', resize);
    resize();
});

问题:

那么当我调整大小(没有拖动)时会给出什么？那么javascript推出第一和设置的位置<a></a>,然后CSS应用高度的变化,如果我们<992像素.

从逻辑上讲,按钮现在在视觉上位于div的外部而不是像我最初定义的那样在边框上.

本文提出的临时解决方案.

jQuery - 如何等待'resize'事件的'end'然后再执行一个动作？

var doit;
    $(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); }); …

我在调整窗口大小时调用一个函数:

window.addEventListener("resize", calculateDimensions());

但是我需要一种方法在调整窗口大小后调用不同的函数.有没有办法使用本机js(而不是jquery)实现这一点

TIA

我一直在寻找一种轻量，灵活，跨浏览器的解决方案，以在JavaScript中访问CSS媒体查询，而不会在JavaScript代码中重复CSS断点。

CSS技巧发布了一个基于CSS3动画的解决方案，该解决方案似乎很有帮助，但是建议改用Enquire.js。

Enquire.js似乎仍然需要在脚本中对Media Query大小进行硬编码，例如

enquire.register("screen and (max-width:45em)", { // do stuff }

问题

到目前为止，所有用于访问Java媒体查询的解决方案似乎都依赖于在脚本中硬编码的断点。如何以允许仅在CSS中定义断点而不依赖的方式访问断点.on('resize')？

尝试的解决方案

我已经制作了自己的版本，可以在IE9 +中使用，使用了一个隐藏元素，该元素使用该:content属性添加查询触发时想要的任何内容（与ZeroSixThree解决方案相同的起点）：

的HTML

<body>
    <p>Page content</p>
    <span id="mobile-test"></span>
</body>

的CSS

#mobile-test {
    display:none;
    content: 'mq-small';
}
@media screen only and (min-width: 25em) {
    #mobile-test {
        content: 'mq-medium';
    }
}
@media screen only and (min-width: 40em) {
    #mobile-test {
        content: 'mq-large';
    }
}

使用jQuery的JavaScript

// Allow resizing to be assessed …

我想在调整元素大小之前和之后做一些事情,我试图绑定resize事件并且它工作:

$('#test_div').bind('resize', function(){
            // do something
});

我发现了一些问题,但解决方案是timeout,我不想使用timeout.我想立即处理:)

也可以看看:

• JavaScript/JQuery:$(window).resize如何在调整大小完成后触发？

• jQuery - 如何等待'结束'或'调整大小'事件,然后才执行操作？

感谢任何建议:)