jquery移动固定标头中的图像重叠内容直到调整大小事件

时间:2012-06-10 06:49:20

标签: jquery-mobile

我的jquery移动固定标头中有一个图像。当页面在Google Chrome或Apple Safari中加载时,标题内容会重叠标题下方的内容div,直到我调整页面大小。 Firefox和IE工作正常。

谢谢!

6 个答案:

答案 0 :(得分:20)

我认为问题在于,当jQuery Mobile初始化页面时,标题图像未加载且标题更小,因此jQuery Mobile在.ui-page元素上添加一个填充,一旦图像加载太小。一个简单的解决方法是手动设置标题图像的大小,以便它甚至在源加载之前占用它所需的空间。

你也可以这样做,虽然对我来说看起来很不好,但可以通过触发resizedocument.ready上的window.load事件来强制重绘:

$(window).on('load', function () {
    $(this).trigger('resize');
});

我在页面上将此代码粘贴到控制台中,并按预期重新定位了title元素。

答案 1 :(得分:3)

是否应用以下CSS帮助?

.ui-page {
    padding-top: 91px !important;
}

请注意,您必须优化选择器,因为这将适用于叠加弹出窗口。

答案 2 :(得分:1)

我遇到了很多麻烦。这一直有效,直到我想添加一个链接:

<div data-role="header">
  <img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>

注意空的h1标签。

我最终没有使用data-role =“header”,我只是无法使用链接。我用了一个ui-bar课程。像这样:

<div class="ui-bar ui-bar-a">
    <a href="/" data-role="none">
        <img border="0" src="images/logo.png" style="float: left; display:inline">
    </a>
</div>

答案 3 :(得分:1)

基于@Jasper答案的解决方案对我有用:

$(document).on('pageshow', "div[data-role='page']", function () {
    $(window).trigger('resize');
});

它的改进适用于所有 jquery移动网页

答案 4 :(得分:1)

我使用 Jasper Carlos487 的相当不错的解决方案,发现这是最新,最可靠的方法( jQM 1.4.x)

  1. 如果由于没有指定尺寸的图片而 需要一些时间加载,因此可能导致标题放大, 指定已知尺寸(理想情况下通过CSS)应该。否则应该有一种方法来确定它是否已经完成加载,从而应用下面的解决方案3的想法。

  2. 如果,这是由于某些(可能)未知的标头调整大小事件(例如,通过稍后加载的某些图片或其他一些缩小内容的内容)标题,从而使其垂直更大),然后这应该使用合理的足够大的超时值

    $( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
      // maybe value > 100 needed for your scenario / page load speed
      setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
    }
    
  3. 如果您知道导致此内容的原因 (在我的情况下,我正确地通过一些(否则隐藏/重叠)左对齐在大屏幕上移动页面内容导航面板),那么以下可能会更好,不依赖于页面需要加载的实际时间某些设备或场景(可能比上面的预定义超时更长) :

    // if its due to some animation like in my case
    // otherwise try to find a similar way to determine when the resizing event has 
    // completed!
    $('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
    
  4. (我不确定使用$(window).on( 'load', ... Jasper 解决方案在所有jQM页面加载方案(使用AJAX页面导航)中是否正确。这就是我更喜欢的原因在我的例子中, Carlos487 的方法。)

答案 5 :(得分:0)

上述解决方案均不适合我。但我发现我的问题在于页面导航后的事件。如果内容div在此期间被隐藏,则它不会位于标题div下,而是保留在原始位置:

$(document).on("pageshow", "div[data-role='page']", function()
{
   $("#pageContentDiv").hide();
   setTimeout(function()
   {
      $("#pageContentDiv").show();
   }, 0);
});

修改 找到了更好的解决方案将标题div高度和页面div顶部填充设置为相同的值:

<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">

希望这有帮助。