1

我一直在使用 jQuery 的 .height() 函数来计算视口高度，然后调整 css 以在窗口内定位 div。

在我切换到 jQuery 1.9.1 之前，这一切都很好，现在它已经停止运行了。我在 1.9.1 和 1.8.2 之间尝试了一些来回测试，关闭和打开其他 jQuery 函数，看看是否可能存在一些冲突，但在 1.8.2 中一切正常，但 window.height 代码在1.9.1

我的基本代码如下，我希望有人能告诉我我可能需要做哪些不同的事情才能使其与 1.9.1 一起工作（由于网站内的其他功能，我更喜欢使用它，此代码用于仅限主页）。第一个设置具有完整背景图像的 div 的高度，第二个将一些文本放置在顶部。

   var splashpos = $(window).height() - 121; 
   $('#splash').css({"height": splashpos + "px"});

   var splashttlpos = $(window).height() - 308; 
   $('.splashttl').css({"top": splashttlpos + "px"});

谢谢

附加位

将我的普遍评论添加回问题本身。文档类型设置为 html <!DOCTYPE html>。#splash div 设置为 position:relative，.splashttl div 设置为 position:absolute。页面设置 body (100% width) -> div#splash (100% width) -> div.wrap (90% width for content) -> div.splashttl (位置：绝对出现在右下角)。

jQuery 代码，第一部分是设置启动高度到该背景图像仅覆盖视口，向下滚动显示整体白色背景。第二部分是调整 position:absolute 的顶部值，使 div 位于视口底部的正上方。

再一次，它使用 jQuery 1.8.2 可以完美运行，但不适用于 jQuery 1.9.1（我已经关闭了所有其他脚本以消除冲突，但无济于事）。我在 jQuery Migrate 脚本中添加了它，它可以工作。

所以谁能告诉我 .height() 在 1.8.2 和 1.9.1 之间发生了什么变化。我需要用我的代码修改什么？我在 jQuery 文档中找不到任何参考资料。

解决（或多或少）

一时兴起，我决定尝试更改脚本在网页上出现的顺序。当我将内容滑块的代码移到启动代码下方时，它开始工作。我不知道为什么，因为当我注释掉内容滑块脚本时它没有任何区别，但是当我将它移低时它确实如此。

这对我来说是个谜，但现在一切正常。感谢我收到的所有反馈。

4

4 回答 4

1

刚刚测试过。如果您为 splashttl 类定义“位置”，它将起作用。例如：

.splashttl{
   position:relative;
}

否则 jquert 会出于某种原因将 .splashttl 的 'top' 属性设置为 'auto'

- -编辑 - -

试试这样：

$(document).ready(function(){
   var splashpos = $(window).height() - 121; 
   $('#splash').css({"height": splashpos + "px"});

   $('.splashttl').css({"top": $('#splash').height() - $('.splashttl').height() + 'px', 'left': $(document).width() - $('.splashttl').width() + 'px'});
});

再次示例：http: //freedockstar.com/test.php

并回答您的另一个问题“.height() 在 1.8.2 和 1.9.1 之间发生了什么变化”：我看不到任何东西。它总是返回元素的高度，并且仍然......

于 2013-05-07T12:54:36.080 回答
0

问题是怪癖模式，jQuery 不支持并在 1.8 中删除了对它的支持。
如果您的码头类型是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

尝试将其更改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

或像这样：

<!DOCTYPE HTML>

参考Quirks_Mode

于 2013-05-07T12:43:57.547 回答
0

看到这个 http://bugs.jquery.com/ticket/12388

jQuery 不支持quirks模式 你有没有机会quirks启用模式？

于 2013-05-07T12:41:10.043 回答
0

它应该可以工作，必须有别的东西，这里有一个演示： jsfiddle

$(document).on('click', function() {
   var h = $(window).height();
   var w = $(window).width();
    alert('height: ' + h + ' / width: ' + w);
});

您可以改用 document.height ( jsfiddle-2 )，但最好了解问题所在并修复它。

$(document).on('click', function() {
   var h = document.height;
   var w = document.width;
    alert('height: ' + h + ' / width: ' + w);
});

另外，你不需要在 splashTopPos 中添加“px”，如果没有指定其他值，jQuery 默认为像素

于 2013-05-07T12:47:18.550 回答