In the following code i am trying to populate the following content in an Android APP page but when the user scrolls on the page the content of class="scrollable" goes behind the header and scrolls.How can i prevent this\[code\]function get_offers(){var html="";html += "<div data-role='header' " + " data-id='appHeader' data-theme='c' align='center'> <font color='white'><h1 class='head1'>Headert</h1></font> <span class='homeHeader'><img src='http://stackoverflow.com/questions/14079647/img/home.png' style='float:left;' class='homeb' />Hot Deals</span></div>"; html += "<div data-role='content' style='margin-top: 100px;' class='scrollable'>";html += " <div onclick='getdeal(1);' style='color: #FFFFFF;'><table cellspacing='0' cellpadding='0'><td> <img src='http://stackoverflow.com/questions/14079647/img/hhi.png' alt='hhi' /> </td><td><span><b>HH</b></span><br>Dance & Dine @ HHI Bengaluru this New Year's eve</td></table></div>";//<hr WIDTH='100%' COLOR='white'>";html += " <div onclick='getdeal(2);' style='color: #FFFFFF;'><table cellspacing='0' cellpadding='0'><td> <img src='http://stackoverflow.com/questions/14079647/img/huckle_logo.jpg' alt='huckleberry' /> </td><td><span><b>Huckle</b></span><br>Blues, Rock, Good food and wine @ Huckleberry this New Year's eve</td></table></div>";//<hr WIDTH='100%' COLOR='white'>";html += " <div onclick='getdeal(3);' align='left' style='color: #FFFFFF;'><table cellspacing='0' cellpadding='0'><td> <img src='http://stackoverflow.com/questions/14079647/img/aroy_logo.jpg' alt='aroy' /> </td><td><span><b>AR</b></span><br>Live Music, Signature dishes and Exclusive cocktails on 31st Dec</td></table></div>";//<hr WIDTH='100%' COLOR='white'>";html += " <div onclick='getdeal(4);' align='left' style='color: #FFFFFF;'><table cellspacing='0' cellpadding='0'><td> <img src='http://stackoverflow.com/questions/14079647/img/timluck.png' alt='timluck' /> </td><td><span><b>Tim</b></span><br>Balle Balle New Year Bash - Punjabi Tadka Music, Desi Shots, Kababs & Kulfi and more</td></table></div>";//<hr WIDTH='100%' COLOR='white'>";html += " <div onclick='getdeal(5);' align='left' style='color: #FFFFFF;'><table cellspacing='0' cellpadding='0'><td> <img src='http://stackoverflow.com/questions/14079647/img/oye_a_logo.jpg' alt='oyeamritsar' /> </td><td><span><b>Oye Amritsar</b></span><br>Welcome the New Year with great Punjabi Food at Oye Amritsar!</td></table></div>";//<hr WIDTH='100%' COLOR='white'>";html += "</div>";$.mobile.loadPage("#offerlist");$.mobile.changePage('#offerlist');$("#offerlist").empty();$("#offerlist").append(html);} \[/code\]
Phonegap header overlapping the content in android
- Thread starter jingdai
- Start date