开发者

Can I dynamically resize the Facebook Activity Stream plugin?

开发者 https://www.devze.com 2023-04-12 03:00 出处:网络
I\'m using the html5 embed code for the Activity Feed as documented here: htt开发者_高级运维p://developers.facebook.com/docs/reference/plugins/activity/

I'm using the html5 embed code for the Activity Feed as documented here:

htt开发者_高级运维p://developers.facebook.com/docs/reference/plugins/activity/

I'd like the Facebook Activity Stream to "fill" it's enclosing box. This enclosing box is resizable, so I'd need to resize that activity stream when the enclosing box is resized.


Activity Feed plugin use an iframe for rendering and it is not possible to resize it with pure CSS. However with javascript you can resize the plugin by reloading the iframe with the correct height as a parameter. It is a faster method then parsing again the XFBML tag.

CSS (to make sure the plugin elements follow the container size)

.fb-activity, .fb-activity * {
    position:relative !important;
    width:100% !important;
    height:100% !important;
}

Javascript (using jQuery)

$(window).resize(function() {

    //Calculate the new height of your container
    //...

    var $container = $('.container');
    var $iframe = $container.find('iframe');
    $container.css('height',containerHeight+'px');
    if($iframe.length) {
        $iframe.attr('src',$iframe.attr('src').replace(/height=[0-9]+/gi,'height='+escape(containerHeight)));
    } else {
        $container.find('.fb-activity').attr('data-height',containerHeight);
    }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号