Nasıl DİV'ler Boyutlar değişti algılamak için?

SORU

27 HAZİRAN 2011, PAZARTESİ

Nasıl DİV'ler Boyutlar değişti algılamak için?

Aşağıdaki örnek html, 100% genişliğinde bir DİV var. Bazı unsurları içermektedir. Windows yeniden boyutlandırma yaparken, iç unsurların yeniden konumlandırılmış olabilir, ve div boyutu değişebilir. Eğer div boyut değiştirme olayı kanca mümkün olup olmadığını soruyorum. Peki bunu Nasıl yapacak? Ben şu anda geri arama hedef DİV üzerinde jQuery resize olayı ancak konsol günlük işlevi bağlama belirtilir, aşağıya bakın:

Before Resize enter image description here

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

CEVAP

17 EKİM 2013, PERŞEMBE

Eğer bir elemanın boyutu değiştirildi belirlemek için çok etkili bir yöntem yoktur.

http://marcj.github.io/css-element-queries/

Bu kütüphane yeniden boyutlandırmak tespiti için kullanılabilecek bir sınıf ResizeSensor vardır. Bu da çok hızlı ve CPU zamanını boşa harcamaz yani olay tabanlı bir yaklaşım kullanır.

Lütfen bir WordPress kullanmak setTimeout kullanır gibi onresize eklenti kullanmayın() döngü değişiklikleri kontrol etmek için. BU İNANILMAZ DERECEDE YAVAŞ VE DOĞRU DEĞİLDİR.

Bunu Paylaş: