在我们的网站上,http://darealty.com/aurum/location每个部分的高度由我使用的Wordpress主题设置,以便它有效地与窗口大小一样高。
我使用jQuery来覆盖每个部分的高度(我可以说明原因,但它与问题并不相关)。
我的问题是它不允许我覆盖主题javascript设置的高度,即使我确保我的脚本在主题之后加载。 (我手动将它放在页脚中,然后我将它排入functions.php)。
我能让它实际工作的唯一方法是使用setTimeout来延迟执行我的脚本。
新手问题:
1)无论哪个脚本最后运行,总是会说出正在应用的高度,还是还有其他需要考虑的内容?
2)这是否意味着我的脚本在主题脚本之后没有被执行,尽管我认为是什么?
3)有没有更好的方法可以确保我的脚本最后运行?
这是我的代码,如果它有点乱,请道歉:
$(document).ready(function(){
"use strict";
if($(window).width() >= 768) {
$( ".left-text" ).each(function() {
var windowHeight = $( window ).height();
var leftTextHeight = $(this).height();
var sectionHeight = $(this).parents(".highlight-left").height();
var desktopLogoHeight= $(".desktop-logo").height();
var sectionWrapperPaddingTop = $(this).parents(".section_wrapper").css("padding-top");
sectionWrapperPaddingTop = parseInt(sectionWrapperPaddingTop);
var sectionWrapperPaddingBottom = $(this).parents(".section_wrapper").css("padding-bottom");
sectionWrapperPaddingBottom = parseInt(sectionWrapperPaddingBottom);
var t = $(this); // make 'this' a variable so we can use it inside the compareHeight function
function compareHeight() {
var difference = windowHeight - desktopLogoHeight - leftTextHeight - sectionWrapperPaddingBottom;
if ( difference < 0 ) {
console.log("Difference " + difference);
console.log("Increase margin: YES");
var increaseMarginAmount = desktopLogoHeight - sectionWrapperPaddingTop;
// Set margin on left-text and increase height
$(t).css("margin-top", increaseMarginAmount);
// Set section height equal to original height + left text margin-top height
$(t).parents(".highlight-left").height(sectionHeight + increaseMarginAmount + 33);
}
else {
console.log("Difference :" + difference);
console.log("Increase margin: NO");
}
}
setTimeout(function(){ compareHeight(); }, 2000);
});
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
非常感谢任何帮助。