Geek Answers Handbook

JQuery

I have a code like this.

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

But this does not work when in the “Like” column is a box. It seems to be triggered before Facebook triggered the box.

How to solve this problem?

Basically, I need to call this process after facebook loads. Both block and recommended blocks (both).

+2
source share
4 answers

I think you can just put a similar button in a container with a fixed height.

For instance:

 <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>

Then you will not worry about how tall it will be.

Another possible solution. I suggest that you use the load facebook javascrpt sdk method asynchronously. Then you can execute your code after 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); }
+2
source

To execute the code after rendering the facebook plugin, you can subscribe to xfbml.render. Here is my working code:

 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 }
+3
source

According to FB.Event.subscribe , a download event appears that will be fired automatically when the page finishes rendering the plugins

Step-1: In HTML (put where you want to show the social box):

 <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>

Step-2: In the footer (just before the end of the <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>
0
source 
 $(document).ready(function() { var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); $('#main').children().height(highestCol); });
-1
source

More articles:


All Articles