Question

我正在响应主题中的WP主页中插入类似于Facebook的框，并且需要根据所使用的视口调整宽度。

放置like框的HTML代码如下：

<div class="fb-like-box" id="epo" data-href="http://www.facebook.com/fbuser" data-width="880" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="true"></div>

我已经有一个jQuery函数来检测窗口宽度，但找不到任何方法来替换div中的“data-width”属性。

$(window).ready(function() {
var wi = $(window).width();  
var div = document.getElementById("epo");


$(window).resize(function() {
    var wi = $(window).width();

    if (wi <= 480){
        div.data-width('300');
        }
    else if (wi <= 767){
        div.data-width('460');
        }
    else if (wi <= 980){
        div.data-width('760');
        }
    else if (wi <= 1200){
        div.data-width('880');
        }
    else {
        div.data-width('880');
        }
});            
});

Answer 1

正如CBroe强调的那样，数据的宽度已经加载。但是改变iframe宽度也不起作用。所以我研究了这个解决方案。

我在页面上插入了四个ID div，在其中我放置了FB likebox的代码，更改了data-width属性以适应主题所具有的四种不同的响应宽度，使用firebug微调宽度和填充： / p>

<div id="fb-full">
    <div class="fb-like-box" id="epo1" data-href="http://www.facebook.com/fbuser" data-width="880" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="true">
    </div>
</div>

<div id="ipad">
<div class="fb-like-box" id="epo2" data-href="http://www.facebook.com/fbuser" data-width="706" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="true">
    </div>
</div>

<div id="mobile-h">
<div class="fb-like-box" id="epo3" data-href="http://www.facebook.com/fbuser" data-width="416" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="true">
    </div>
</div>

<div id="mobile-v">
<div class="fb-like-box" id="epo4" data-href="http://www.facebook.com/fbuser" data-width="260" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="true" data-show-border="true">
    </div>
</div>

然后我将此代码添加到style.css

#ipad, #mobile-h, #mobile-v { display:none; }

在responsive.css中，我添加了 display：none！important的不同组合;并显示：block！important; 根据当前显示宽度显示或隐藏div。

Answer 2

我使用父div来计算大小并使其完全响应。

`

<div id="fb-parent">
    <script>(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_GB/sdk.js#xfbml=1&version=v2.6";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
        <div id="fb-page" class="fb-page" data-href="https://www.facebook.com/pages/fbUser" data-tabs="timeline" data-width="500" data-height="250" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"></div>
</div>
<div class="clear"></div>
<script>
    $(function () {
        var fb_width = $('#fb-parent').width();
        fb_width.toFixed();
        var fb_height = $('#fb-parent').height();
        fb_height.toFixed();
        $('#fb-page').attr("data-width", fb_width);
        $('#fb-page').attr("data-height", fb_height);
    });
</script>`

Answer 3

你必须使用它：

$("#epo").attr("data-width", "300px")

Answer 4

您的data-width是一个属性。要设置属性的值，请尝试

div.attr('data-width', '300px')

如何在窗口调整大小的类似于Facebook的框中修改数据宽度属性

4 个答案: