1

I need a jQuery Mobile fixed footer but within an iframe of an HTML5 page that is designed for a mobile web. I have been struggling for the past 2 days, as the fixed jQuery Mobile footer goes to the bottom of the iframe which many a times is outside the view port, hence not a desirable behavior

Outer HTML

       <!DOCTYPE html>
        <HTML>
         <HEAD>
          <TITLE> New Document </TITLE>
          <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery-1.9.1.min.js"></script>
         <SCRIPT LANGUAGE="JavaScript">
          <!--
             $(document).ready(function(){   
                     $(window).scroll(function () {
                         document.getElementById('myFrame').contentWindow.placeToolbar();
                    });
              });  

            function getToolbarPosition(){ 
              var returnheight=$(window).height()-$("#myFrame").position().top-40;
              return returnheight;
            }
          //-->
          </SCRIPT>
         </HEAD>

         <BODY>

               <iframe src="inner.html" width="100%" height="800px" id="myFrame" scroll="auto"/>

         </BODY>
        </HTML>


    INNER.HTML
    <!DOCTYPE html>
    <html>
    <head>
     <script>
      function placeToolbar(){
          placebar();
      }

      function placebar() {
$("#footerid").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft": "1px"}, "slow" );
      }

    $(document).ready(function() {

      function positionToolbar() {
          placebar();
      }

      positionToolbar();
    });
    </script>

     <body>
     <div data-role="page">

        <div data-role="header" data-position="fixed">
                <h1>Fixed Header!</h1>
        </div>

         <div data-role="footer" id="footerid" >
                <h1>Fixed Footer!</h1>
        </div>
    </div>
  </body>
</html>

This works ok, but the scrolling of the div is not smooth and the scroll event get fired only when I stop swiping up or down hence during the swipe there is a gap between the footer and the bottom of the viewport and the footer moves to the bottom only after I stop the swipe or release the touch. I want a solution which will work exactly as the footer would on the main page, but I want it within an iframe. Please help, I have really struggled on it for a while.

4

0 回答 0