0

サイズ変更時にアスペクト比を維持するために Jquery を使用しています。小さな画面では、このスクリプトを別のクラスで使用したいと考えています。最初のロードではすべて問題なく動作するようです。

しかし、ウィンドウのサイズを 768 より大きいサイズから 767 より小さいサイズに変更すると、リロードしない限りスクリプトは機能しません。不思議なことに、767 未満の小さなウィンドウでサイトをロードし、768 を超える大きなウィンドウにサイズを変更すると、スクリプトは機能し、サイズを変更しても機能し続けます。これを解決する方法はありますか？

if ($(window).width() > 768) {
    /* square featured-column1 box aanpassing */
    equalheight = function(container) {
        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0;
        $(container).each(function() {
            $el = $(this);
            $($el).height('auto')
            topPostion = $el.position().top;

            if (currentRowStart != topPostion) {
                for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                    rowDivs[currentDiv].height(currentTallest);
                }
                rowDivs.length = 0; // empty the array
                currentRowStart = topPostion;
                currentTallest = $el.height();
                rowDivs.push($el);
            } else {
                rowDivs.push($el);
                currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
            }
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
        });
    }
    $(window).load(function() {
        equalheight('.featured-column');
    });

    $(window).resize(function() {
        equalheight('.featured-column');
    });
    /* Aspect ratio box (responsive rechthoek) aanpassing */
    $(document).ready(function() {
        aspectResize();
        $(window).resize(aspectResize);
    });
    aspectResize = function() {
        var $aspect = $('div.up-to-date-bar');
        var width = $aspect.width();
        $aspect.height(width / 3 * 1);
    }
}
/* Aspect ratio box (responsive rechthoek) aanpassing up-to-date-column*/
if ($(window).width() < 767) {
    $(document).ready(function() {
        aspectResize();
        $(window).resize(aspectResize);
    });
    aspectResize = function() {
        var $aspect = $('div.up-to-date-column');
        var width = $aspect.width();
        $aspect.height(width / 1 * 1);
    }
}
4

1 に答える 1

0

http://api.jquery.com/resize/を使用して、ウィンドウのサイズ変更時に関数を呼び出すことができます。

$( window ).resize(function() {
    // Your code here
});
于 2014-09-24T18:59:42.740 に答える