Fadein Div на мобильном телефоне Android - PullRequest
Новая
       7

Fadein Div на мобильном телефоне Android

2 голосов
/ 29 декабря 2011

Я пытаюсь отобразить div с контентом с панорамой 360 ° с помощью JavaScript.Он отлично работает на IE, Firefox, Safari, Iphone, Ipad и Android 3 (планшет), но не работает должным образом на Android Mobile (2.3.3).

Из моей панорамы я вызываю функцию javascriptдля перехода в div с абсолютной позицией и отображением: нет.

Вот код JavaScript 

function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
    $('#wrapper'+divnum).fadeOut("slow");}

Вот мой HTML 

<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>


<script type="text/javascript">
// <![CDATA[

    var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
    swf.addVariable("xml", "nantes.xml");
    swf.addParam("wmode","opaque");
    swf.embed("pano");

// ]]>

    </script>
</div>



<div id="wrapper1"><div id="scroller">
<div class="closetop"><a href="javascript:" onClick="fermerDiv(1)">Fermer</a></div>
<div class="closebottom"><a href="javascript:" onClick="fermerDiv(1)">Fermer</a></div>
<div id="tabContainer1">
    <div class="tabs">
      <ul>
        <li id="tabHeader_1">Texte</li>
        <li id="tabHeader_2">Photos</li>
        <li id="tabHeader_3">Vidéos</li>
      </ul>
    </div>
<div class="tabscontent">

<div class="tabpage" id="tabpage_1">  
Texte...
</div>

<div class="tabpage" id="tabpage_2">
Photos...
</div>

<div class="tabpage" id="tabpage_3">
Videos...
</div>

</div>

</div>
</div>
</div>

И CSS 

* {
margin:0;
padding:0;
}

@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
        html { height:100%; }
        body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000;   -webkit-user-select:none; -webkit-text-size-adjust:none; }

#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}

#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
    position:absolute;
    top:0px; bottom:-60px; left:0px;
    width:100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    overflow:auto;
    display:none;
}

#scroller {
    position:relative !important; 
    margin:0 auto;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    max-width: 600px;
    background:transparent;
    color: #fff;
    margin-bottom: 60px;
    text-align: justify;
}

Вот поведение в браузере Android по умолчанию: div обертки открыт, но остается за панорамой.В Opera mobile панорама не может быть прокручена, пока вы не вызовете div обертки, но затем обертка над панорамой (что правильно), но вы не можете прокрутить ее, вместо этого вы можете прокручивать панораму ...

Я действительно понятия не имею о проблеме ... Если у кого-то есть идея, большое спасибо !!!

МОЯ ТЕСТОВАЯ СТРАНИЦА ТАМ: http://www.360images.fr/nantes/nantes.html

1 Ответ

1 голос
/ 02 января 2012

У меня тоже есть эта проблема.Для меня добавление 

.hide()

до 

$('divelement').fadein

работает.

...