<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DDK</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Door Darshan India</h1>
<image src="ddk.jpg" width="460">
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>Bidushi M.S.Subbulaxmi</li>
<li>Ustad Bismillah Khan</li>
<li>Bharatnatyam</li>
<li>Kathak</li>
<li>Odissi</li>
<li>Kathakali</li>
<li>Manipuri</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>M.S.Subhalaxmi</h1>
</div>
<div data-role="content">
<video width="420" height="340" controls>
<source src="Subhalaxmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="Subhalaxmi.ogv" type='video/ogg; codecs="theora, vorbis"'></video>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Ustad Bismillah Khan</h1>
</div>
<div data-role="content">
<video width="420" height="340" controls>
<video src="Bismilla Khan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="Bismilla Khan.ogv" type='video/ogg; codecs="theora, vorbis"'></video>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Bharatnatyam</h1>
</div>
<div data-role="content">
<video width="420" height="340" controls>
<video src="Bharatnatyam.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="Bharatnatyam.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<div align="justify"></div>
<h1>Kathak</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page6">
<div data-role="header">
<h1>Odissi</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page7">
<div data-role="header">
<h1>Kathakali</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page8">
<div data-role="header">
<h1>Manipuri</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Except the video on "page2" no other video plays. Only the controls are seen on "page3" and "page4". All the video files are in the same folder.
Where am I going wrong ? Plz help.
You have 2 times the same error.
<**video** src="Bharatnatyam.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="Bharatnatyam.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Should be
<**source** src="Bharatnatyam.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="Bharatnatyam.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Also on page 3.
(Without the '**' of course)
Related
I am strucked into an issue where the collapsable bootstrap navbar extends full width and seems not to be responsive only on android mobile devices. It works fine on iphone. The site is http://tworingsmedia.com/clients/Cornwall/05/index.html
Here is the code:
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<img src="img/web-logo03.png" width="270" height="248" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li>.....</li>
</ul>
</div>
</div>
</div>
</nav>
Try using the image size with rem units. Because the image is not responsive, the nav bar is not getting responsive. With rem units, it will be responsive and you can define the size of it as you wish with the responsiveness.
Should I use px or rem value units in my CSS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<img src="http://tworingsmedia.com/clients/Cornwall/05/img/web-logo03.png" width="100rem" height="90rem" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li>.....</li>
</ul>
</div>
</div>
</div>
</nav>
I'm using ionic card to show some reports ans statistics (with chartjs). It works perfectly on browser and android 4.4.2, but the text is not showing on android 5.
Screen shot of application running on android 4.4.2:
Screen shot of application running on android 5:
Here is my specs:
ionic v: 2.1.1
cordova v: 6.3.1
Nodejs v: v4.2.6
And here is my code:
<div class="row">
<div class="col">
<div class="list card">
<a class="item item-icon-left bg-blue color-white">
<i class="icon ion-pricetag"></i>
CA
</a>
<div class="row">
<div class="col col-40 clotureInfo">
<div class="row light-bg">
<div class="col col-50">
<a class="item">CA Global</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.caGlobal}}€</a>
</div>
</div>
<div class="row">
<div class="col col-10"> <a class="item"> <i class="icon ion-arrow-right-c"></i></a></div>
<div class="col col-40">
<a class="item"> Vente directes</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.venteDirecte}}€</a>
</div>
</div>
<div class="row light-bg">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Nb tickets</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.nbTickets}}</a>
</div>
</div>
<div class="row">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Tickets moyen</a>
</div>
<div class="col col-50">
<a class="item price" ng-if="globalData.nbTickets>0"> {{(globalData.venteDirecte / globalData.nbTickets).toFixed(2)}}€</a>
<a class="item price" ng-if="globalData.nbTickets==0"> 0</a>
</div>
</div>
<div class="row light-bg">
<div class="col col-10"> <a class="item"> <i class="icon ion-arrow-right-c"></i></a></div>
<div class="col col-40">
<a class="item"> Vente resto</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.venteResto}}€</a>
</div>
</div>
<div class="row">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Nb couverts</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.nbCouverts}}</a>
</div>
</div>
<div class="row light-bg">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Moy couverts</a>
</div>
<div class="col col-50">
<a class="item price"> {{(globalData.venteResto / globalData.nbCouverts).toFixed(2)}}€</a>
</div>
</div>
</div>
<div class="col col-50">
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options" chart-colors="globalData.colors2">
</canvas>
</div>
<div class="col col-10">
<p class="rec-color"> <span ng-style="{background: globalData.colors2[0]}"></span> Vente resto </p>
<p class="rec-color"> <span ng-style="{background: globalData.colors2[1]}"></span> Vente directe</p>
</div>
</div>
</div>
</div>
</div>
I tried to show the text using css style using z-index and color with !important but it deosn't work.
There where a conflict between css class "card" and the chartjs.
It worked in this two cases:
When i removed the chartjs canvas
When i removed the card css class
So i removed the card and i used a custom css code.
But why it worked fine on android 4.4.2 and there was a bug on android 5?
This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
In chrome dev tools I get mobile view, but live bootstrap just seems to give me mini version of site
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" content="chrome=1">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/home-slider.css">
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-xs-12 col-sm-3 sidenav">
<div class="navbar-header navbar navbar-default">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<div id="logo-div">
<img id="tri-img" src="src/dist/image/...jpg" alt="logo" />
</div>
<h4 id="title">Title</h4>
<h4 id="subtitle">Subtitle</h4>
<ul class="nav">
<li><span class="liner">Home</span></li>
<li class="port-main-title">Portfolio<span class="caret arrow"></span></li>
<li>Profile</li>
<li>Process</li>
<li>Contact</li>
</ul><br>
</div>
</div>
<!-- begin carousel -->
<div class="col-xs-12 col-sm-9">
<div id="carousel" class="carousel carousel-fade" data-ride="carousel-fade" data-interval="5000" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item img-responsive center-block active">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-leftt" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/ carousel -->
</div>
<!-- / carousel -->
</div>
</div>
<script type="text/javascript">
$(function() {
$('#myCarousel').carousel();
});
</script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<!-- build:js scripts/main.js -->
<script src="./js/main.js"></script>
<!-- <script src="js/bootsnipp.js" charset="utf-8"></script> -->
<script src="./js/slide.js" charset="utf-8"></script>
</body>
</html>
I've not used bootstrap before and thought I've followed the rules. Again, on my chrome device tools and browser simulators like ipadpeek and responsusimulator it seems to work, but not on live devices like android mobile or tablet?
Remove maximum-scale=1 from the viewport meta tag so it is set to this..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The webview doesn't understand what html height 100% means its just showing a blank page. However, in mobile browser it works perfectly fine. Can anyone help me? I've gone through a lot of suggestions but none of that worked. As you can see in the code, I've purposely set the html background color as red so that i can see if the html document is indeed on my webview. I don't see any red at all its just pure white.
It only works if i hard set the height and i don't want to do that. My code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
min-height:100%;
background-color:red;
position:relative;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
min-height: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color:red; /*#E9E9E9;*/
position:relative;
}
</style>
</head>
<body style="position:relative">
<div style="overflow-y:hidden" class="container-fluid login-container">
<div class="row" style="height:15%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:13%;">
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" style="height:5%;">
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" style="height:30%;">
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row" style="height:20%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:16%;">
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure your webview layout is configured properly:
android:layout_height="match_parent"
If you used wrap_content, the webview itself will shrink to zero so that only blank page is shown.
Showing red in IE and chrome, I could recommend instead of height: 100%; use height:100vh; as this will set the div to 100% of the view port height. a div tag will not automatically take the height of the view port, you must tell it to do so. also removed the following code as position:relative; is for Tgas not the . also removed the height styles from the row tags. you can set that in css but the height should set itself for each row.
html{
margin:0;
padding:0;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
background-color:red; /*#E9E9E9;*/
}
.cont-height {
height: 100vh;
}
<div class="container-fluid login-container cont-height">
<div class="row" >
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I had the same problem here:
Android WebView: how to let the css use the entire height w/ position absolute?
I answered my own question, problem was using alignParent instead of match_parent.
I hope that's the problem in your case.
In any case, try to put some borders to your WebView just to see where it actually stops.
I am trying to develop a sample note application. The application includes an index page having two div elements using data-role="page" option. The first page includes two buttons. Clicking on any button should navigate to other div using page transition as slide.
Here is my HTML Code :
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="css/cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="css/custom-theme.min.css" />
<script type="text/javascript" src="css/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
margin: 0; /* Setting body margins to 0 to have proper positioning of #container div */
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed"
style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
But when I tried to run this on avd, it seems like the data transitions were simply ignored.
In logcat it throws an error:
"file:///android_asset/www/index.html: Line 15 : ReferenceError: Can't find variable: $"
Don't know the reason. Any help?
mobileinit event is not getting fired. You need to register the event before jquery mobile is loaded so that as soon as JQM is loaded the event gets fired. Load JQM script after the following script.
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
Use this one. It should work.
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It looks like
$(document).one("mobileinit", function () {
should be:
$(document).on("mobileinit", function () {