자바 스크립트가 요소의 높이를 완전히 고려하지 않음

Question

나는 메인 콘텐츠 #contentWrapper과 높이를 같게 만들고 싶은 사이드 바 #menuOption을 가지고 있습니다.

내 페이지의 기본 구조는 다음과 같습니다.

HTML

<div id="wrapper"> 
    <div id="menuOption"> 
    </div> 
    <div id="mainContent"> 
     <div id="contentWrapper"> 
     <div id="content"> 
      <div id="lartDisqus"> 
      <?php comments_template(); ?> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

CSS

div#wrapper{height:100%;} 
div#menuOption{float:left; width:40px; background:#444; min-height:100%;} 
div#mainContent{min-height:100%; margin-left:40px; z-index:0; position:relative;} 
    div#contentWrapper{float:left; height:100%; width:85%; background-color:green;} 
    div#content{border-left:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden; 
    margin-top:195px;} 

jQuery를

jQuery(window).on("load",function(){ 
    var documentHeight = jQuery('#contentWrapper').height(); 
    jQuery('#menuOption').css('height',documentHeight + 'px'); 
}); 

jQuery(function($){ 
    $(window).resize(function(){ 
     var documentHeight = $('#contentWrapper').height(); 
     $('#menuOption').css('height',documentHeight + 'px'); 
    }).resize(); 
}); 

오전 데 문제가 있음 #mainOption! = #contentWrapper, PHP 함수 <?php comments_template(); ?>을 제거하면 모든 것이 작동하고 자바 스크립트가 높이를 정확하게 계산합니다.

마지막으로 자바 스크립트를로드 중이며 확실히로드 중입니다.

JavaScript가 의 높이가 <?php comments_template(); ?>으로 출력되는 것을 고려하지 않은 것처럼 보입니다.

라이브 사이트에 대한 링크를 추가했고 색깔이 #contentWrapper이므로 조금 더 분명하게 볼 수 있습니다. http://lartmagazine.co.uk/lorem-ipsum-dolor-sit-amet/

Answer 1

예. 문제가 발생하는 이유는 Disqus를 사용하고 있기 때문입니다. Disqus는 페이지가로드 된 후 자바 스크립트를 통해 사이트의 전체 댓글 섹션을 생성하고 자바 스크립트 마법이 실행 된 후에도 해당 섹션을 생성합니다. 그러나, 약간의 구글 연구 후, 나는 당신이 분명히 disqus가 적재를 완료 한 후에 콜백 을 보낼 수 있다는 것을 발견했다. 다음은 필요한 것을 수행하는 방법의 예입니다. 자바 스크립트를 제외한 모든 것을 동일하게 유지하십시오.

function disqus_config() { 
    this.callbacks.afterRender.push(function() { 
    (function($){ 
     $(window).resize(function(){ 
     // you dont need the + 'px' stuff. jquery does this for you by default 
     $('#menuOption').css({ height:$('#contentWrapper').height() }); 
     }).resize(); 
    })(jQuery); 
    }); 
} 

다음은 내가 발견 한 기사에 대한 링크입니다. 외관상으로는 그것은 그들의 api 문서에서 문서화되지 않는다.

http://www.electrictoolbox.com/running-javascript-functions-after-disqus-loaded/

편집 : 내 첫 포스트 후

을 (당신이 워드 프레스 Disqus에 플러그인을 사용하는 경우), 나는 그것이 작동하지 않는 있다며 몇 가지 의견을 얻었다. 그래서 나는 내 고객의 개발 사이트 중 하나에서 그것을 테스트했다. 물론, 그것은 작동하지 않았다; 그러나, 내 고객과 포스터, 그리고 통계적으로, 이것이 필요한 다른 대부분의 사용자를 추적했습니다.

내 고객 대부분은 내 제안에 따라 WordPress를 사용합니다. WordPress에는 Disqus에서 발행 한 Disqus 용 플러그인이있어서 비교적 간단한 작업으로 Disqus 주석을 사용할 수 있습니다. 몇 가지 조사를 한 후,이 플러그인은 자신이 disqus_config()이라는 기능을 제공한다는 사실을 발견했습니다. 즉, 그들은 현재 플러그인을 코딩하는 것처럼 좋은 WordPress 플러그인이 코딩 될 수 있도록 자신의 코드를 해당 기능에 쉽게 추가 할 수 있도록하는 방식으로 빌드하지 않습니다.

염두에두고, 유감스럽게도 코드를 추가하려면 플러그인을 편집해야합니다.플러그인을 업데이트 할 때마다 코드가 사라지기 때문에 일반적으로 나쁜 습관입니다. 하지만 때로는 코딩이 제대로되어 있지 않은 플러그인도 선택의 여지가 없으며, 원하는 것을 성취하기 위해 (또는 플러그인의 전체 복사본을 만들어 하나의 변경을 만들어 다른 사람과 같이 직접 호출해야합니다. 있는 것처럼 보입니다). 의 최신 버전으로 가장 현재에

wp-content/plugins/disqus-comment-system/comments.php 

다음 파일을 열고, 문서 루트를 설치 워드 프레스에서

: 여기 Disqus에 사용자의 요구에 맞게 시스템 워드 프레스 플러그인을 코멘트 편집하는 방법입니다 이 같은이 기능은 두 선 사이에 코드를 붙여 줄 93 주위에 종료

var disqus_config = function() { 

, :

플러그인, 라인 (55)에, 당신은 무언가 같이 참조3210

이 편집을 사용하면 특수한 코드가 적시에 실행되어야합니다. 위에서 설명한 것과 같은 방법을 사용합니다. 일부 연구 후에도 여전히 작동하지만, 불행히도 플러그인을 편집해야합니다.

희망이 있으면 많은 사람들에게 도움이됩니다. 왜냐하면 Disqus는 몇 가지 큰 이점을 가지고 있기 때문에 때때로 개발자들에게 힘든시기를 만들어주기 때문입니다.