I am working on my first mobile app and I cannot get the right navbar button to work
-
12-12-2019 - |
Question
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
<!--Safety Home Page Starts Here -->
<div data-role="page" id="safety_home" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li><a href="#safety_home" class="ui-btn-active">Home</a></li>
<li><a href="#safety_topic">Topics</a></li>
<li><a href="#safety_report">Report</a></li>
</ul></div>
</div>
<div data-role="content" data-theme="c">
<p>Home</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
</div>
<!--Safety Home Page Ends Here -->
<!--Safety Topic Page Starts Here -->
<div data-role="page" id="safety_topic" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li><a href="#safety_home">Home</a></li>
<li><a href="#safety_topic" class="ui-btn-active">Topic</a></li>
<li><a href="#safety_report">Report</a></li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Topics Page Ends Here -->
<!--Safety Incidents Page Starts Here -->
<div data-role="page" id="safety_report" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li><a href="#safety_home">Home</a></li>
<li><a href="#safety_topic">Topics</a></li>
<li><a href="#safety_report" class="ui-btn-active">Report</a></li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Incident Page Ends Here -->
Solution
Yeah your second and third page has no closing </div>
tag. You may want to try and use validators to help spot issues like this. Here is the type of thing that you see when you run your code through a validator.
Line 38, Column 56: Unclosed element div.
<div data-role="page" id="safety_report" data-theme="c">
Line 20, Column 55: Unclosed element div.
<div data-role="page" id="safety_topic" data-theme="c">
HTML5 Validators
I hope this helps.