I am learning 'Jquery Mobile' programming.
I wrote a program, but it is not working.
<html><head>
<link rel="stylesheet" href='../jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css' />
<link rel="stylesheet" href='../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css' />
<script type='text/javascript' src='../jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js'></script>
<script type='text/javascript' src='../jquery.mobile-1.4.5/demos/js/jquery.min.js'></script></head>
<body>
<div data-role="page" id="pageone">
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect (slides to the next page from right to left).</p>
<a href="#pagetwo" data-transition="slide">Slide to Page Two</a>
</div>
<div data-role="footer"> <h1>Footer Text</h1> </div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect REVERSED (slides to the previous page from left to right).</p>
<a href="#pageone" data-transition="slide" data-direction="reverse">Slide to Page One (reversed)</a>
</div>
<div data-role="footer"> <h1>Footer Text</h1> </div>
</div>
</body></html>
The css styles and data-role attributes are not working properly. Its just showing both pages at a time as HTML page.
The .css files and .js files are in correct path.
I have noticed three problems in your code.First you should either use the jquery- mobile css or the minified version of jquery-mobile css but not both.In your code you have used both.Another error I noticed in your code is given below.
You have used two div elements with data-role="page" attribute with the same id value.Finally when you include the jquery js,always put it on top of jquery-mobile js.