[英]jQuery code snippet not working on page load
A jQuery code snippet isn't working upon page load. jQuery代码段在页面加载时不起作用。 It should replace 'frame--layout-vertical' with 'frame--layout-horizontal' and padding-bottom: 56.25% with padding-bottom: 100% when the screen width is greater than 641. By default, its frame--layout-vertical and padding-bottom: 56.25% (given the html below).
当屏幕宽度大于641时,应将“ frame-layout-vertical”替换为“ frame-layout-horizontal”,并将padding-bottom:56.25%替换为padding-bottom:100%。默认情况下,其框架- layout-vertical和padding-bottom:56.25%(鉴于以下html)。
Its working perfectly when I resize the screen a bit after page-load. 当我在页面加载后稍稍调整屏幕大小时,它可以正常工作。 'load' isn't working.
“加载”无效。
Here is the jQuery: 这是jQuery:
<script type="text/javascript">
$(window).on('load, resize', function frame() {
var viewportWidth = $(window).width();
if (viewportWidth < 641) {
$(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom' : '56.25%'});
} else {
$(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom': '100%'});
}
});
</script>
<div class="frame frame--policy frame--layout-vertical">
<div class="frame__hover-area">
<div class="frame__main-content">
<div class="frame__image-wrapper">
<div class="image image--placeholder frame__image wow fadeIn animated" data-wow-duration="1s" data-wow-delay="0s" style="padding-bottom: 56.25%; visibility: visible; animation-duration: 1s; animation-delay: 0s; animation-name: fadeIn;">
<img class="image__inner" src="http://redspark/upload/content/1/2017/03/11-58bd7aaf35385_thumbnail.jpg" role="presentation">
</div>
</div>
<div class="frame__content">
<span>
<a class="section-button section-button--policy" href="/content/blog/category/9/" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Sex</a>
<a class="article-component__link" href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html">
<h2 class="headline headline--article">7 Vegetarian Recipes That Are Better in a Bowl</h2>
</a>
<div class="byline">
<a class="author-link" href="">author</a>
<time class="byline__date" datetime="2017-03-11T04:31:06.000Z" title="2017-03-11 04:31">15 days ago</time>
</div>
</span>
</div>
<a href="http://redspark/content/blog/9/279-7-vegetarian-recipes-that-are-better-in-a-bowl.html" class="frame__main-content__cover-link"></a>
</div>
<div class="frame__border"></div>
<div class="frame__border frame__border--hover"></div>
</div>
</div>
EDIT: When I am using a auto load pagination. 编辑:当我使用自动加载分页时。 The my jQuery code isn't working since the browser isn't loaded.
由于未加载浏览器,因此我的jQuery代码无法正常工作。 Can you please give me a suggestion?
你能给我一个建议吗? How can I call jQuery code with auto pagination?
如何通过自动分页调用jQuery代码?
Here is the autoloading snippet. 这是自动加载的代码段。
<script language="Javascript" type="text/javascript">
$(function () {
$('div.sponsor-articles.sponsor-section').infinitescroll({
debug: true,
navSelector: 'div.appPaginatorContainer', // selector for the paged navigation
nextSelector: 'div.appPaginatorContainer span.next a', // selector for the NEXT link (to page 2)
itemSelector: 'div.sponsor-articles div.frame', // selector for all items you'll retrieve
bufferPx: 40,
debug:true,
columnWidth: function (containerWidth) {
return containerWidth / 5;
},
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif',
msgText: 'Loading more posts'
}
});
});
</script>
You write wrong 你写错了
$(window).on('load resize', function frame() {})
there should be no ,
不应有
,
You can use the document ready pattern. 您可以使用文档就绪模式。 EDIT: Added an initial call for page loaded.
编辑:添加了对页面加载的初始调用。
function frame() {
var viewportWidth = $(window).width();
if (viewportWidth < 641) {
$(".frame").removeClass("frame--layout-horizontal").addClass("frame--layout-vertical");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom' : '56.25%'});
} else {
$(".frame").removeClass("frame--layout-vertical").addClass("frame--layout-horizontal");
$(".image").css({'padding-bottom' : ''});
$(".image").css({'padding-bottom': '100%'});
}
$( document ).ready(function() {
frame();
$(window).on('resize', frame);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.