Сделайте два элемента одинакового размера

-3

Я хочу, чтобы два элемента в разных местах и разные «родители» в дереве DOM имели одинаковую высоту и ширину, даже если они меняются.Сделайте два элемента одинакового размера

Есть ли решение, которое будет поддерживать все браузеры, включая IE 8?

EDIT: Если есть решение, которое не будет работать в IE 8, я все равно хотел бы услышать об этом, но оно не будет принято в качестве решения, которое я ищу.

Разъяснение: Я хочу, чтобы решение, чтобы справиться с любой причиной для изменения размера окна: изменение размера, изменение размера контента и т.д.

источник

2015-06-10 Tomer Amir

Я посмотрел события js, абсолютное позиционирование, но не повезло. @brroshan –

@Algosub: Вам все еще нужна помощь? – Lain

Вы можете использовать setInterval, чтобы делать то, что хотите.

var changeIndex = -1; // record element width or height is change or not 

function setToSame() { 
    if(changeIndex!=-1) { 
     console.log("test"); 
    $('.same').height($('.same').eq(changeIndex).height()); 
    $('.same').width($('.same').eq(changeIndex).width()); 
     changeIndex = -1; 
    } 
} 

// set your own function to change size, but reserve changeIndex setting 
$('input').change(function() { 
    $(this).parent().children('.same').css($(this).attr('id'), $(this).val() +'px'); 

    // set the changeIndex to the current change div 
    changeIndex = $('.same').index($(this).parent().children('.same')); 
    console.log(changeIndex); 
}); 

setInterval(setToSame, 4);

См. jsfiddle here.

источник

2015-06-10 07:14:26 North

Это решение, которое я имел в виду, но на тяжелой странице контента я думаю, что это приведет к поражению производительности (скажем, что вы делаете это на множестве элементов или элементов есть много «детей»). Up –

Если вам нужен только два элемента, вы можете упростить его до двух идентификаторов. Я написал это по той причине, что, по-моему, у вас может быть три или более, чтобы сделать то же самое. Кроме того, он работает на IE8. – North

Yup, и я считаю, что это сработает, но у меня есть страницы, которые выполняют тяжелую рендеринг JS и AJAX, и если я использую такой код, это может привести к сбою страниц. Я надеялся использовать события DOM, но я не мог найти хорошего решения. –

-1

Вы можете использовать JQuery, чтобы получить решение, которое работает для IE8.

Пусть два элемента, который вы хотите иметь одинаковую высоту и ширину являются,

<div id="fir"> 

</div> 

<div id="sec"> 

</div>

Теперь укажите высоту и ширину одного элемента, как,

#fir{ 
    height: 50px; 
    width: 100px; 
}

Там нет предопределенного метода CSS для определения изменения высоты или ширины, но вы можете достичь результатов, используя jQuery as,

$(document).ready(function(){ 

    $('#fir').bind('heightChange', function(){ 
     var h = $("#fir").height(); 
     $("#sec").height(h); 
    }); 

    $('#fir').bind('widthChange', function(){ 
     var w = $("#fir").width(); 
     $("#sec").width(w); 
    }); 

    $('#sec').bind('heightChange', function(){ 
     var h = $("#sec").height(); 
     $("#fir").height(h); 
    }); 

    $('#sec').bind('widthChange', function(){ 
     var w = $("#sec").width(); 
     $("#fir").width(w); 
    }); 

});

Это позволит определить изменение высоты и ширины для обоих элементов и установить высоту и ширину другого элемента аналогичным образом.

Чтобы проверить, если приведенный выше код работает правильно, вы можете создать тестовый скрипт, который изменяет ширину элемента с id="fir" путем создания кнопки,

<button id="btn">Change width</button>

Теперь включает ниже функцию,

$("#btn").click(function() { 
    $("#fir").css('width', '400px'); 
    $("#fir").trigger('widthChange'); 
});

Here is the fiddle for it

источник

2015-06-10 06:52:34

Это не распространяется на случаи, когда они меняются в размерах после того, как готово событие было уволено ... –

@Algosub Проверьте мой обновленный ответ, извините, что пропустили этот момент –

Вы уверены, что события 'heightChange' и' widthChange'? Они не работают для меня, и я не могу найти их в Интернете ... Какую версию jQuery вы используете? –

<html> 
    <head> 
     <style> 
      div{} 
      #A{background: red} 
      #B{background: blue} 
     </style> 

     <script> 
      mBlockChange = false; //Required for IE9- 

      function equalSize(f, t){ 
       mBlockChange = true; 

       f = (f || document.getElementById('A')); 
       t = (t || document.getElementById('B')); 

       //We take the larger dimension of both since it is better than clipping. 
       //Change on your demands. 

       t.style.height = ''; 
       t.style.width = ''; 
       f.style.height = ''; 
       f.style.width = ''; 

       t.style.height = Math.max(f.offsetHeight, t.offsetHeight).toString() + 'px'; 
       t.style.width = Math.max(f.offsetWidth, t.offsetWidth).toString() + 'px'; 

       f.style.height = Math.max(f.offsetHeight, t.offsetHeight).toString() + 'px'; 
       f.style.width = Math.max(f.offsetWidth, t.offsetWidth).toString() + 'px'; 

       setTimeout(function(){mBlockChange = false}, 100); 
      } 

      //This one for IE9+, FFox, Chrome and Safari 
      //http://help.dottoro.com/ljrmcldi.php 
      function bindEvents(){ 
       var tA = document.getElementById('A'); 
       var tB = document.getElementById('B'); 

       //The addEventListener() method is not supported in Internet Explorer 8 and earlier versions with resize. 
       //Resizing the body 
       document.body.onresize = function(){ 
        //We only do this once the resizing is actually finished. 
        if (this.Timer) clearTimeout(this.Timer); 
        this.Timer = setTimeout(function(){ 
         //console.log('Resize', this); 
         equalSize() 
        }, 300) 
       }; 

       //If supported, we listen on dom changes. 
       if ('MutationEvent' in window){ 
        document.addEventListener('DOMSubtreeModified', function(){ 
         if (document.Timer) clearInterval(document.Timer); 
         //console.log('DOMSubtreeModified', this); 
         if (!mBlockChange) equalSize() 
        }, false); 
       } 
       //We set an interval for browsers which do not support DOMSubtreeModified 
       //If you do not want to rely on ('MutationEvent' in window) put it out of else and cancel the timer (scenario B) 
       //Can not bind parameters to setInterval in IE8- :s 
       else{ 
        document.Timer = setInterval(function(){ 
         //console.log('Interval', 'Document'); 
         equalSize() 
        }, 1000); 
       } 
      } 
     </script> 
    </head> 

    <body onload = 'bindEvents()'> 
     <div id = 'A'><p contenteditable = 'true'>A</p></div> 
     <div id = 'B'><p contenteditable = 'true'>B</p></div> 
    </body> 
</html>

https://jsfiddle.net/5cn7maqe/

Но ваши элементы по высоте и ширине не должны магическим образом изменить, он всегда требует некоторых взаимодействий, как изменение РОМ по Ajax, oninput с contenteditable или изменении размеров окна. Вам было бы лучше просто настроить его после этих действий вручную.

Редактировать: Сделаны незначительные изменения. https://jsfiddle.net/5cn7maqe/1/

источник

2015-06-10 13:08:44 Lain

Изменил его, чтобы прослушать все изменения dom. – Lain

Сделайте два элемента одинакового размера

ответ

Смежные вопросы