0

私が持っているのは、ビューポートの上下に固定されたトップバーとボトムバーです。それらの間にあるマップ div は、javascript が画面の残りの部分を占める Google マップに変換します。

ただし、一番下のバーの上には、一連の改行と水平線を含む display:none 要素があります。これは、iOS スタイルのリストをシミュレートするより良い方法が見つかるまで、何も入っていないリストを表示する一時的な方法です。(これは私が言及しているものです: http://www.technipages.com/wp-content/uploads/2011/12/iOS-list-of-music-not-on-device.png )それは素晴らしいことですが、ここでの主な関心事ではありません。JavaScript がそのリストに項目を入力し、空の行を消去します。jQuery 関数は、下部のバーのボタンを押すだけでリストをスライドさせて表示します。これはすべてうまくいきます。

下部のボタンを押すと、リストがマップ上を上にスライドして上部のバーで停止し、スクロールできるようになります。両方のバーが表示されたままになります。もう一度ボタンを押すとスライドします。

このすべての問題は、リストを開いた後、リストをスクロールすると、上部と下部のバーが魔法のようにリストの一部になり、他のすべてのアイテムと一緒にスクロールしてしまうことです。どちらも修正されているため、これは私を際限なく混乱させますが、明らかに私は間違いを犯しています。

これが私のコードです。すべての CSS はインラインです。リストを表示する jQuery 関数も示します。それはかなり簡単です。XCodeシミュレーターではこれは完全に機能しますが、itouchでテストすると上記の結果が得られることに注意してください。非常に紛らわしいです。

<head>
<script type="text/javascript">
$("#bottombar").click(function(){
      //alert("Trigger!");
      $("#resultsList").slideToggle("fast");
                  });
</script>
<head>
 <body>

        <div style="position:fixed; top:0px; width:100%; border-bottom: 3px solid; z-index: 19; background:#FFFFFF; padding:5px;"> 
            <a style="text-decoration:none; z-index:20;" href="index.html">Home</a>
        </div>
        <br />

        <div id="map_canvas" style="width:100%; margin-top:10px; height:400px;"></div>

        <div style="position:relative">

            <div id="resultsList" style="background: #FFFFFF; width:100%; margin-top:15px; height: 400px; z-index:1; position:absolute; bottom:0; left:0; display:none">

                <br id="top"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/> 

            </div>

        </div>

        <div style="position:fixed; bottom:0px; width:100%; border-top: 3px solid; z-index: 19; background:#FFFFFF; padding:5px;"> 
            <button id="bottombar" type="button" style="z-index:20; padding-bottom:5px;">Show as List</button>
        </div>

    </body>
4

0 に答える 0