How to create a div with 100% height with jQuery mobile?
How to create div with id = test with 100% height?
<div data-role="page" id="device1"> <div data-role="header"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <div data-role="fieldcontain"> <input type="range" name="slider1" id="slider1" value="0" min="0" max="255" /> </div> <div id=test height=100%> </div> </div><!-- /content --> <div data-role="footer" data-position="fixed"> </div><!-- /footer --> </div><!-- /page --> +4
1 answer
Well, that is what I have for you. Keep in mind that if the page content is high, this may not be very convenient. The swipe area is below the contents. As the content area becomes larger, the wipe area becomes smaller.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Swipe</title> <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script> <script src="phonegap.js" type="text/javascript"></script> <script> $(document).ready(function() { // Set the initial window (assuming it will always be #1 window.now = 1; //get an Array of all of the pages and count windowMax = $('div[data-role="page"]').length; $('.swipeArea').bind('swipeleft', turnPage); $('.swipeArea').bind('swiperight', turnPageBack); }); // Named handlers for binding page turn controls function turnPage(){ // Check to see if we are already at the highest numbers page if (window.now < windowMax) { window.now++ $.mobile.changePage("#device"+window.now, "slide", false, true); } } function turnPageBack(){ // Check to see if we are already at the lowest numbered page if (window.now != 1) { window.now--; $.mobile.changePage("#device"+window.now, "slide", true, true); } } </script> <style> body, div[data-role="page"], div[data-role="content"], .swipeArea { height: 100%; width: 100%; } </style> </head> <body> <div data-role="page" id="device1""> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> Content <div class=swipeArea></div> </div> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="device2" style="height: 100%"> <div data-role="header"> <h1>Content 2</h1> </div> <div data-role="content" style="height: 100%"> Content <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> <div class=swipeArea></div> </div> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="device3" style="height: 100%"> <div data-role="header"> <h1>Content 3</h1> </div> <div data-role="content" style="height: 100%"> Content <div class=swipeArea></div> </div> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="device4" style="height: 100%"> <div data-role="header"> <h1>Content 4</h1> </div> <div data-role="content" style="height: 100%"> Content <div class=swipeArea></div> </div> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> </div> </body> </html> +5