标签: window-resize

下午好,

我目前正在使用SlickJS Carousel,我正在尝试使用该unslick();代码段在窗口宽度大于375时删除多个项目.

我可以看到调整大小功能的工作方式,当窗口大小小于375 slick();轮播显示时没有任何问题.

如果有人能看到什么出错,请告诉我.

谢谢.

JS

$(document).ready(function () {
    // Header Slider 
    $('.touchslider_one').slick({
        autoplay: true,
        infinite: true,
        speed: 1500,
        autoplaySpeed: 3000,
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        cssEase: 'linear',
    });
    onresize();
    $(window).resize(function () {
        onresize();
    });
});
function onresize(){
    checkWidth();
}
function checkWidth() {
    if ($(window).width() < 376 ) {
        // Boxes
        $('.touchslider_fourth').slick({
            autoplay: false,
            infinite: true,
            speed: 1500,
            adaptiveHeight: true,
            dots: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            cssEase: 'linear'
        });
        // …

我正在尝试测试由窗口调整大小事件触发的功能（使用Karma）。一切在现实世界中都可以正常工作，但是当我尝试在测试中手动触发事件时，永远不会调用该函数。这导致测试失败。

这是我的HTML：

<div id="topnav" 
     class="navbar navbar-graylight header-width" 
     role="banner" 
     (window:resize)="onResize($event)"></div>

这是我的onResize（）函数：

@Component({
  selector: "main-header",
  templateUrl: "main-header.component.html",
})
export class MainHeaderComponent {

  public itWasTriggered = false;

  public onResize(event) {
    this.itWasTriggered = true;
  }
}

这是我的测试：

it("Why is onResize() not being ran", () => { 
   const heroEl = fixture.debugElement.query(By.css(".navbar-graylight"));
   heroEl.triggerEventHandler("window:resize", null); 
   expect(comp.itWasTriggered).toBe(true);
});

这是检查器中显示的内容：

<div _ngcontent-a-1="" class="navbar navbar-graylight header-width" id="topnav" role="banner">
  <!--template bindings={}-->
  <!--template bindings={}-->
</div>

我有一个遗留的 web 应用程序，它具有超级复杂的调整大小事件绑定。它支持页面中类似桌面的窗口（我知道...），并且它们都可以在调整大小时进行缩放。

除了在一种情况下，这实际上表现良好：当您单击此应用程序上的 PDF 链接并将其下载到浏览器时，然后在新选项卡而不是系统查看器中打开 PDF（如果这是用户的浏览器设置）。然后当关闭选项卡并返回应用程序的选项卡时，它在调整大小逻辑上花费了过多的时间（从单击拖动窗口角开始的正常调整大小逻辑时间为 ~1-3s，这就像 ~15-20s）

我认为当下载栏弹出页面并打开新选项卡时，可能会同时触发多个调整大小。已经有一个非常大的（1500 毫秒）去抖动器，但也许是关于打开新标签/下载栏调整大小而不是点击拖动调整大小使去抖动器在这种情况下不适用）并在关闭 PDF 和返回应用程序选项卡。

我们不能只是告诉用户在系统查看器中打开他们的 PDF，我需要一些关于如何开始尝试解决此问题的指导。（或在我尝试的道路上提供帮助）。

我正在尝试的路径是：我想检测来自下载栏的调整大小，而不是出于其他原因（也许 y 增量与下载栏高度完全相同？？有没有办法做到这一点？）并且只返回false，如果没有调整50-100px，我们并不在意，当他们关闭它时，无论如何它都会正常调整大小。

我希望在窗口调整大小时调整bjqs滑块的大小.

这是我到目前为止所得到的:

<script type="text/javascript">
$(document).ready(function() {

    $(window).resize(function(){
        $('.pagebg').bjqs({
            height      : 347,
            width       : $(window).width(),
            showcontrols : false,
            showmarkers : false,
         });
     });
});
</script>

我试图使用$(window).resize来调整它的大小,但是有多个实例正在运行

有谁知道如何调整大小并保持只运行一个实例？

将JavaScript面板一直扩展到右侧并调整浏览器窗口大小后,我现在无法看到结果/ HTML面板,无法将栏拖回原位.

我可以垂直调整窗口大小,而不是水平调整大小.

我在Chrome中尝试过:

• 打开/关闭选项卡/浏览器
• 空缓存
• 在开发人员模式下禁用/启用缓存
• 删除所有Cookie
• 控制台打开,空缓存和硬重新加载
• 通过chrome:// settings/cookies删除与jsfiddle.net相关的cookie
• "手动"通过以下方式设置'window_sizes':http://pastebin.com/rBMHfvqV
• 扩展浏览器窗口
• 禁用所有扩展

我目前的window_sizes:

window_sizes = {
    w : [
        "104.46009389671363%",
        "0.4694835680751197%"
    ],
    h : [
        "23.96416573348264%",
        "76.03583426651736%",
        "21.50055991041433%",
        "78.49944008958568%"
    ]
};

jsfiddle上的窗口在隐身模式下正确显示.我也没有去jsfiddle.net一个星期希望某种饼干/神秘肉会到期.

我正在使用leafletjs我的测试应用程序.我需要在调整浏览器大小时触发缩小事件.

这是我的浏览器调整大小代码:

(function(){
    $(window).on("resize", resize); 
    function resize() {
        "use strict";

        if($(window).width() <= 765){
            mapOptions.zoom = 5;
            console.log(mapOptions.zoom);
        }
    }
})();

此代码如果要显示地图:

L.TopoJSON = L.GeoJSON.extend({
    addData: function(jsonData) {    
        if (jsonData.type === "Topology") {
            for (key in jsonData.objects) {
                geojson = topojson.feature(jsonData, jsonData.objects[key]);
                L.GeoJSON.prototype.addData.call(this, geojson);
            }
        } else {
            L.GeoJSON.prototype.addData.call(this, jsonData);
        }
    }  
});

var tiles = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
var latlng = new L.LatLng(28.40, 84.15);
mapOptions={
    dragging: false,
    zoomControl: true,
    scrollWheelZoom: false,
    doubleClickZoom: false,
    touchZoom: false,
    attributionControl: false,
    center: latlng,
    zoom: …

如何设置窗口的最小尺寸？我尝试设置minHeight minWidth值,但我仍然可以使用鼠标在此值下调整窗口大小.

这是我的FXML根窗格:

<BorderPane fx:id="borderPane"
        minHeight="200" minWidth="400" prefHeight="600" prefWidth="800"
        xmlns="http://javafx.com/javafx/null"
        xmlns:fx="http://javafx.com/fxml/1"
        fx:controller="simulation.Simulation_Controller">
</BorderPane>

我想知道如何限制应用程序窗口只按比例调整大小？我希望它保持比例,以免扭曲照片/视频.

我想在此页面上实现像左侧导航一样的粘性菜单：http : //getbootstrap.com/2.3.2/scaffolding.html。

我的菜单是一个nav元素position:relative（我也尝试static过），fixed当它到达视口的顶部时就会出现。

这是我的功能：

$(document).ready(function() {
    function stickyNav() {
        var elementPosition = $('nav').offset();
        console.log(elementPosition);

        $(window).scroll(function(){
            if($(window).scrollTop() > elementPosition.top){
                $('nav').addClass("sticky");
            } else {
                $('nav').removeClass("sticky");
            }
        });
    }
    stickyNav();
}); //document ready

该console.log(elementPosition);收益约1200像素在页面加载时的偏移最高，这是不对的。但是，如果我调整页面大小，该值会更改为 650px 左右，这是正确的顶部偏移量，并且该函数会执行它应该执行的操作。

我环顾四周，发现 offsetp top 在隐藏元素上时可能是错误的，或者它有边距问题，但实际上我这里没有任何复杂的结构，只有一个可见nav元素。

任何帮助解决这个问题将不胜感激！谢谢！！

嗨 - 我继承了一个网站，该网站有一个无法正常工作的小 javascript 脚本。我没有自己编码，我是一个 javascript n00b，所以请原谅我的无知。

该站点根据窗口大小从 3 列视图切换到 1 列视图，并且有一个脚本可以使站点的一个特定部分在两个视图之间整齐地转换（通过设置列高使它们整齐地堆叠）。我注意到如果我在不刷新的情况下调整窗口大小，列高将无法调整。我怎样才能解决这个问题？

谢谢！

<script type="text/javascript">
            function adjust_col_heights() {
                if (window.innerWidth > 991) {
                    var col_1_height = document.getElementById('col-1').clientHeight;
                    var col_2_height = document.getElementById('col-2').clientHeight;
                    var col_3_height = document.getElementById('col-3').clientHeight;
                    console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
                    var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
                    var css_height = col_max_height + "px";
                    document.getElementById('col-1').style.height = css_height;
                    document.getElementById('col-2').style.height = css_height;
                    document.getElementById('col-3').style.height = css_height;
                    document.getElementById('poem').style.position = "absolute";
                }
                else {          
                    document.getElementById('poem').style.position = "relative";
                }
            }
            adjust_col_heights();
            window.onresize = adjust_col_heights;
        </script>