2011-03-27 3 views
2

나는 이와 같은 코드를 가지고 있습니다.페이스 북의 박스로드 이벤트 jquery

$(document).ready(function() { 
    var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); 
    $('#main').children().height(highestCol); 
}); 

하지만 일부 열에 좋아요 상자가 있으면 작동하지 않습니다. 페이 스북 (Facebook)처럼 불리기 전에는 이것이라고 불리는 것 같습니다.

이 문제를 해결하는 방법은 무엇입니까?

기본적으로 facebook이 Like 상자 및 Recommendations 블록 (둘 다)을로드 한 후에이 프로세스를 호출해야합니다.

+0

친구, 당신은 Math.max''에 두 번 같은 일을 포기하고 자신에게 같은 일을 설정하고, 본질적으로는,'높이 = 최대 (높이, 높이)'처럼 느끼는 자체에 대한, 나에게 의미가 없다 ... 나는 여기서 뭔가를 놓치고 있는가? –

+0

오. 정말. 이 순간에는 중요하지 않습니다. Likebox 및 권장 사항이 완전히로드되면 함수를 호출하는 것이 중요합니다. –

답변

2

마치 수정 버튼 높이 컨테이너에 버튼을 넣을 수 있습니다. 예를 들어

:

<div style="height: 62px;"> 
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" stream="false" header="false"></fb:like-box> 
</div> 

그럼 당신이 될 것입니다 정확히 얼마나 높이에 대해 걱정하지 않습니다.

다른 가능한 해결책. 로드 페이스 북의 javascrpt sdk 메서드를 비동기 적으로 사용한다고 가정합니다. 그럼 당신은 FB.init 후 코드() 페이스 북의 플러그인이 렌더링 된 후

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); 

    if (jQuery.isFunction(window.fbexecute)) { 
     window.fbexecute(); 
    } 
    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

var fbexecute = function() { 
    var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); 
    $('#main').children().height(highestCol); 
} 
+1

이 솔루션은 제 경우에는 작동하지 않았습니다. 나는 나의 해결책을 게시 할 것이다. – Tillito

-1
$(document).ready(function() 
{ 
    var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); 
    $('#main').children().height(highestCol); 
}); 
+1

그건 해결책이 아닙니다. document.ready가 호출 될 때 아직 facebook like 상자가 존재하지 않습니다. 따라서 여기에서 높이를 계산할 수 없습니다. – Tillito

3

당신은 xfbml.render에 가입 할 수 있습니다, 코드를 실행하려면를 실행할 수 있습니다. 여기 내 작업 코드는 다음 FB.Event.subscribe 당으로

window.fbAsyncInit = function() { 

    FB.init({ status: true, cookie: true, xfbml: true }); 

    FB.Event.subscribe("xfbml.render", function() { 
     fbexecute(); 
    }); 
}; 

(function() { 
    var e = document.createElement('script'); 
    e.async = true; 
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
}()); 

var fbexecute = function() { 
    //-- re-calculate heights here 
} 
+0

Edison이 게시 한 솔루션이 작동하지 않았습니다. fbexecute가 호출되었을 때 아직 facebook 플러그인이 렌더링되지 않았습니다. 이것은 올바른 방향으로 나를 지적했다 : http://stackoverflow.com/questions/7297619/how-to-load-a-function-method-after-facebook-social-plugin-is-has-finished-loade – Tillito

0

, 페이지 렌더링 플러그인

을 완료 할 때 자동으로 트리거됩니다로드 이벤트가

스텝 1 :되는 HTML에서 (넣어 당신이 사회적 상자를 원함) 표시하기 :

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div> 

스텝 2 : 바닥 글에서 (단지 <body> 태그를 종료하기 전에) :

<div id="fb-root"></div> 
<script> 
window.fbAsyncInit = function(){ 
    //FB.init({ status: false, cookie: true, xfbml: true }); 
    FB.Event.subscribe("xfbml.render", function(){ 
     columnHeightFixer(); 
    }); 
}; 
(function(d, s, id){ 
var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) return; 
js = d.createElement(s); js.id = id; 
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

function columnHeightFixer(){ 
    //...Height Fixing Code... 
} 
</script>