[英]jQuery CSS Height of twitter box on page load
I am aware of how stupid this sounds... 我知道这听起来多么愚蠢...
I'm trying to re-size an iframe. 我正在尝试调整iframe的尺寸。 Here's what I have: 这是我所拥有的:
function doTwitterHeight(screenwidth)
{
if(!screenwidth){
var screenwidth = window.innerWidth;
console.log('screenwidth is now defined as: ' + screenwidth);
}
if(screenwidth >= 981){
$('#twitter-widget-0').css('height',466);
}
else if(screenwidth <= 980 && screenwidth >= 952){
$('#twitter-widget-0').css('height',614);
}
else if(screenwidth <= 951 && screenwidth >= 877){
$('#twitter-widget-0').css('height',632);
}
//etc.
else{
$('#twitter-widget-0').css('height',468);
}
}
The function works when called with resize, like so: 调用resize时,该函数有效,如下所示:
$(window).on('resize', function(){
doTwitterHeight();
});
But I also need the function to be called and re-size the height of that div when the page is first loaded. 但是我还需要调用该函数,并在首次加载页面时重新调整该div的高度。 I've tried: 我试过了:
$(window).on('load', function() {
doTwitterHeight();
});
And: 和:
$(document).ready(function(){
doTwitterHeight();
});
And: 和:
$(doTwitterHeight());
And I've had no luck with any of them. 而且我与他们中的任何一个都没有运气。
Thanks in advance :) 提前致谢 :)
So the resolution was to modify the code that twitter provide for the iframe embed. 因此解决方案是修改twitter为iframe嵌入提供的代码。 By using the advice found at: Twitter Embedded Timeline Callback 通过使用以下建议: Twitter嵌入式时间轴回调
I've now fixed the problem by replacing: 我现在通过替换来解决此问题:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
with: 有:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
ie by adding: 即通过添加:
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");
You can try this: 您可以尝试以下方法:
$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load
or as per your code piece: 或根据您的代码段:
$(window).on('resize', function(){
doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.