Tizen Developers

Hi Enjo, The problem description is very brief and my understanding from this is, you were unable to see the header and footer while navigating to a new page. Please correct me if I am wrong. For this, either you can add header and footer in all pages or create a page for the menu items like <li><a href="deviceinfo.html">Basic Device Information (SystemInfo)</a></li> <li><a href="deviceproperties.html">Device Properties (SystemInfoProperty)</a></li> <li><a href="tracestatus.html">Trace Device Information (EventListener)</a></li> and load this on page load by doing something like $('#toc').load('toc.html', function() { $('#toc').listview('refresh'); }); inside document.ready() Regards, Raghu Kona

If you use the multiple page you can also use data-id on your footer and header. You MUST use the same data-id on all pages where the same footer and header menu should be shown for example

<div data-role="page" id="page1">
<div data-role="header" data-id="headerNav">
</div>
...
<div data-role="footer" data-id="footerNav">
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header" data-id="headerNav">
</div>
...
<div data-role="footer" data-id="footerNav">
</div>
</div>

Hi, Try the below code making the content style "block" and "none" on button click. HTML :

<div data-role="page" data-add-back-btn="footer" id="page1">
		<div data-role="header" data-position="fixed">
			<div data-role="tabbar">
				<ul>
					<li><a id="header-btn-1">One</a></li>
					<li><a id="header-btn-2">Two</a></li>
					<li><a id="header-btn-3">Three</a></li>
				</ul>
			</div>
		</div>
		<!-- /header -->

		<div data-role="content">
			<div id="contentarea1">Content1</div>
			<div id="contentarea2" style="display:none;">Content2</div>
			<div id="contentarea3" style="display:none;">Content3</div>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Footer content</h4>
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->

JavaScript :

$( "#header-btn-1" ).on( "click", function(event, ui) {
		$("#contentarea2").css({display:"none"});
		$("#contentarea3").css({ display:"none"});
		$("#contentarea1").css({ display:"block"});
	});
	$( "#header-btn-2" ).on( "click", function(event, ui) {
		$("#contentarea1").css({ display:"none"});
		$("#contentarea3").css({ display:"none"});
		$("#contentarea2").css({ display:"block"});
        });
	$( "#header-btn-3" ).on( "click", function(event, ui) {
		$("#contentarea1").css({ display:"none"});
		$("#contentarea2").css({ display:"none"});
		$("#contentarea3").css({ display:"block"});
	});