Schimbarea înălțimii de la 100% la 724px face diferența

Am un aspect pentru o aplicație web și am încercat să aflu de ce iScroll-4 (http://cubiq.org/iscroll-4) pare să fie în conflict cu funcția animată JQuery. Se pare, totuși, că nu. Problema este valoarea înălțimii CSS a unui DIV care conține.

My HTML și CSS urmează pentru o orientare peisagistică, aplicație web pentru aplicații iPad Settings. Panoul din partea dreaptă ar trebui să alunece stânga după 5 secunde, dar schimbarea stilului DIV din fereastra de vizualizare să aibă o înălțime: 724px o rupe.

Mă întreb dacă cineva îmi poate spune de ce schimbarea liniei comentate în foaia de stil face o diferență, te rog?

Următoarele referințe HTML versiunea 1.7 a jQuery și versiunea 4 a iScroll.

index.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

    <script src="jquery-1.7.min.js" type="text/javascript" language="javascript"></script>
    <script type="text/javascript" language="javascript" src="iscroll.js"></script>
    <script type="text/javascript" language="javascript">
        function slide() {
            $("#content").animate({left: -724});
        }
        setTimeout("slide()", 5000);

        var scrollNav, scrollList, scrollBody;

        function loaded() {
            scrollNav = new iScroll('navcontainer');
            scrollList = new iScroll('listcontainer');
            scrollBody = new iScroll('articlecontainer');
        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false);
    </script>
</head>
<body>
    <div id="page" class="flip">
        <!-- navigation -->
        <div id="nav">
            <div id="navheader" class="header">page.nav.navheader</div>
            <div id="navcontrols" class="controls">page.nav.navcontrols</div>
            <div id="navcontainer" class="container">
                <div id="navscroller" class="scroller">
                    <div id="navpulldown" class="pulldown">
                        ...navscroller.navpulldown
                    </div>
                    
                    <div id="navpullup" class="pullup">
                        ...navscroller.navpullup
                    </div>
                </div>
            </div>
            <div id="navfooter" class="footer">page.nav.navfooter</div>
        </div>
        <!-- main content -->
        <div id="viewport">
            <div id="content">
                <!-- list -->
                <div id="list">
                    <div id="listheader" class="header">page.content.list.listheader</div>
                    <div id="listcontrols" class="controls">page.content.list.listcontrols</div>
                    <div id="listcontainer" class="container">
                        <div id="listscroller" class="scroller">
                            <div id="listpulldown" class="pulldown">
                                page.content.list.listcontainer.listscroller.listpulldown
                            </div>
                            
  • page.content.list.listcontainer.listscroller.listitems.listitem.1
  • page.content.list.listcontainer.listscroller.listitems.listitem.2
  • page.content.list.listcontainer.listscroller.listitems.listitem.3
  • page.content.list.listcontainer.listscroller.listitems.listitem.4
  • page.content.list.listcontainer.listscroller.listitems.listitem.5
  • page.content.list.listcontainer.listscroller.listitems.listitem.6
  • page.content.list.listcontainer.listscroller.listitems.listitem.7
  • page.content.list.listcontainer.listscroller.listitems.listitem.8
  • page.content.list.listcontainer.listscroller.listitems.listitem.9
  • page.content.list.listcontainer.listscroller.listitems.listitem.10
  • page.content.list.listcontainer.listscroller.listitems.listitem.11
  • page.content.list.listcontainer.listscroller.listitems.listitem.12
  • page.content.list.listcontainer.listscroller.listitems.listitem.13
  • page.content.list.listcontainer.listscroller.listitems.listitem.14
                            <div id="listpullup" class="pullup">
                                page.content.list.listcontainer.listscroller.listpullup
                            </div>
                        </div>
                    </div>
                    <div id="listfooter" class="footer">page.content.list.listfooter</div>
                </div>
                <!-- article -->
                <div id="article">
                    <div id="articleheader" class="header">page.content.article.articleheader</div>
                    <div id="articlecontrols" class="controls">page.content.article.articlecontrols</div>
                    <div id="articlecontainer" class="container">
                        <div id="articlescroller" class="scroller">
                            <div id="articlepulldown" class="pulldown">
                                page.nav.navcontrols.navcontainer.navscroller.articlepulldown
                            </div>
                            <div id="articlebody" class="bodycontent">
                                page.content.article.articlecontainer.articlescroller.articlebody
                            </div>
                            <div id="articlepullup" class="pullup">
                                page.nav.navcontrols.navcontainer.navscroller.articlepullup
                            </div>
                        </div>
                    </div>
                    <div id="articlefooter" class="footer">page.content.article.articlefooter</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

iPad-landscape.css:

/* elements */
body
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
}

div
{
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
}

ul
{
    position: relative;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    list-style-type: none;
}


/* classes */

.header
{
    width: 100%;
    height: 44px;
    background-color: Aqua;
}

.controls
{
    width: 100%;
    height: 44px;
    background-color: Green;
}

.container
{
    width: 100%;
    height: 636px; /* 768 minus header, controls and footer */
    background-color: Blue;
    overflow: hidden;
}

.scroller
{
    width: 100%;
/*    height: 636px;*/
}

.trans
{
    /* transition */
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.nonselectable
{
    -webkit-user-select: none;
}

.pulldown
{
    width: 100%;
    height: 44px;
    background-color: Teal;
}

.items
{
    width: 100%;
}

.item
{
    width: 100%;
    background-color: Fuchsia;
    border-bottom: 1px solid #eee;
}

.item:nth-child(2n+0)
{
    background-color: #efefef;
}

.bodycontent
{
    width: 100%;
}

.pullup
{
    width: 100%;
    height: 44px;
    background-color: Teal;
}

.footer
{
    width: 100%;
    height: 44px;
    background-color: Red;
}


/* identifiers */

#page
{
    width: 1024px;
    height: 768px;
}

#nav
{
    width: 300px;
    height: 768px;
}

#navheader
{
}

#navcontrols
{
}

#navcontainer
{
}

#navscroller
{
}

#navpulldown
{
}

#navitems
{
}

.navitem
{
    height: 44px;
}

#navpullup
{
}

#navfooter
{
}

#viewport
{
    width: 724px;
    height: 100%; /* CHANGING THIS VALUE TO 724px BREAKS THE SLIDING PANEL */
    background-color: Purple;
    overflow: hidden;
}

#content
{
    position: relative;
    float: left;
    width: 1448px;
    height: 768px;
    background-color: Gray;
}

#list
{
    width: 724px;
    height: 768px;
}

#listheader
{
}

#listcontrols
{
}

#listcontainer
{
}

#listscroller
{
}

#listpulldown
{
}

#listitems
{
}

.listitem
{
    height: 88px;
}

#listpullup
{
}

#listfooter
{
}

#article
{
    width: 724px;
    height: 768px;
}

#articleheader
{
}

#articlecontrols
{
}

#articlecontainer
{
}

#articlescroller
{
}

#articlepulldown
{
}

#articlebody
{
}

#articlepullup
{
}

#articlefooter
{
}
1
Mulțumesc băieților, dar acest lucru nu este cu siguranță un cod finalizat, deci spațiile masive. Oricine știe o soluție la întrebare?
adăugat autor Matt W, sursa
De fapt, triple redundante și în ceea ce privește selectorii. corp, div, ul {margine: 0; umplutura: 0; limită: 0} div, ul {position: relative; float: left;} ul {list-style-type: none} îl curăță. ;-)
adăugat autor Greg Pettit, sursa
FYI margin: 0px 0px 0px 0px; este dublu redundant. Utilizați margin: 0;
adăugat autor AlienWebguy, sursa
Poate fi ceva cu iScroll, deoarece pare să funcționeze foarte bine, de asemenea, dacă setați #viewport {overflow: visible} funcționează bine din anumite motive, ceea ce vă poate da un avantaj. jsfiddle.net/Vervious/C3b8j/4
adăugat autor Vervious, sursa

1 răspunsuri

Nu esti sigur ce vrei sa spui prin pauza, nu functioneaza deloc sau nu merge tot asa cum ti-ar placea.

Înălțimea #page este de 768, prin urmare, în prezent, înălțimea #viewport (la 100%) este, de asemenea, 768.

Încercați să puneți 768 în loc de 724 și să vedeți ce se întâmplă (dacă funcționează așa cum doriți).

Știu că acest lucru nu vă rezolvă problema, dar poate ajunge mai aproape de o soluție.

0
adăugat
Ne pare rău, ceea ce vreau să spun prin pauză este că în majoritatea browserelor alunecarea din mâna dreaptă div nu se animă, deși se întâmplă cu siguranță în DOM, datorită rezultatului elementului mutat, poate fi văzut atunci când faceți lucruri cum ar fi derularea conținutului - adică: se întâmplă. Dacă elementul nu ar fi alunecat peste el, nu ar fi vizibil deloc.
adăugat autor Matt W, sursa
Oh, btw, am încercat-o cu înălțimi diferite. Se pare că problema este utilizarea px vs.%.
adăugat autor Matt W, sursa
Editat răspunsul dvs. pentru a spune în mod constant 768 (aveți 786 într-un singur loc)
adăugat autor Blair McMillan, sursa