jquery - JqueryMobile Fixed position within an iframe -
i need jquery mobile fixed footer within iframe of html5 page designed mobile web. have been struggling past 2 days, fixed jquery mobile footer goes bottom of iframe many times outside view port, hence not 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, scrolling of div not smooth , scroll event fired when stop swiping or down hence during swipe there gap between footer , bottom of viewport , footer moves bottom after stop swipe or release touch. want solution work footer on main page, want within iframe. please help, have struggled on while.
Comments
Post a Comment