Как установить одинаковую высоту для макета div с помощью системы комментирования jQuery и Disqus - PullRequest
Новая
       5

Как установить одинаковую высоту для макета div с помощью системы комментирования jQuery и Disqus

2 голосов
/ 15 октября 2011

У меня есть макет, который основан на div, и использует jQuery и функцию "setEqualHeights" (ниже), чтобы сделать все столбцы в моем макете равными.

Равные высоты jQuery: 

function setEqualHeight(columns) 
{
    var tallestcolumn = 0;
    columns.each(
    function() 
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn) 
          {
                tallestcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}

$(window).load(function() {
    setEqualHeight($(".coln_equalize"));
});

А HTML-код будет выглядеть примерно так: 

<div id="wrap">

  <div id="nav-coln" class="coln_equalize">
  ... navigation ...
  </div>

  <div id="content" class="coln_equalize">
  ... content ...
  </div>

</div>

setEqualHeights работает нормально, пока я не добавлю Disqus в смесь.

Кажется, что он загружается асинхронно, что приводит к тому, что высота макета разбивается и НЕ больше не равна.

HTML-код с Disqus: 

<div id="wrap">

  <div id="nav-coln" class="coln_equalize">
  ... navigation ...
  </div>

  <div id="content" class="coln_equalize">

      ... content ...

      <div id="disqus_thread">
        ... disqus stuff ...
      </div>

  </div>

</div>

Иногда я освежаюсь, и это нормально, а иногда я освежаюсь, и это снова ломается. Кроме того, когда я добавляю новый комментарий, и этот новый комментарий появляется на странице (таким образом, добавляя больше высоты), макет снова ломается.

Я предполагаю, что setEqualHeights применяется до того, как Disqus полностью завершит загрузку. И не помогает, что новые комментарии добавляют больше неизвестных переменных высоты.

Есть ли способ заставить Disqus полностью завершить загрузку перед применением setEqualHeights?

ПОПЫТКА РЕШЕНИЯ № 1 (но не удалось): только загрузить функцию setEqualHeights ПОСЛЕ полной загрузки Disqus

Я искал похожие проблемы и до сих пор придумал эту тему: Получение столбцов равной высоты jQuery Plugin и Disqus для хорошей игры

Но «решение» (или его отсутствие) не сработало для меня. Было упомянуто о способе заставить Disqus завершить загрузку перед применением функции высоты ... но он не работал, когда я попробовал код.

Я вставил свою попытку ниже: 

function setEqualHeight(columns) 
{
    var tallestcolumn = 0;
    columns.each(
    function() 
     {
          currentHeight = $(this).height();
          if(currentHeight > tallestcolumn) 
          {
                tallestcolumn = currentHeight;
          }
    }
    );
    columns.height(tallestcolumn);
}

(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://escapology.disqus.com/embed.js';
var done=false;
dsq.onload=dsq.onreadystatechange = function(){
      if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
        done=true;
        //CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE
            $(window).load(function() {

                $(document).ready(function() {
                    setEqualHeight($(".coln_equalize"));
                });

            });
        // (END) CALL YOUR EQUAL HEIGHTS JQUERY CODE HERE
        dsq.onload = dsq.onreadystatechange = null;
      }
    };
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

ПОПЫТКА РЕШЕНИЯ № 2 (также не удалась): получить высоту блока Disqus с помощью jQuery, а затем добавить его в качестве параметра высоты CSS с помощью jQuery

Тогда я подумал, что мог бы использовать более простой скрипт, который бы получал высоту Disqus, и применил бы его как CSS, используя jQuery. Чтобы сделать это, я вставил следующий код вместо блока «// ВЫЗОВ СВОЕГО РАВНОГО ВЫСОКОГО КОДА JQUERY ЗДЕСЬ»: 

$(window).load(function(){
          var dynamic_height = $('div#disqus_thread').height();
          $('div#disqus_thread').css({'height':dynamic_height+'px'});
});

Но, опять же, я полагаю, что эта попытка не удалась, потому что она также применяется до того, как Disqus полностью завершает загрузку, и также не удается, потому что она не ловит новую высоты добавляются с новыми комментариями.

ЛЮБАЯ помощь будет признательна !!

...