Languages

Menu
Sites
Language
Hide header/footer

Hi,

I have a page where I do not need a heder and/or want to dynamically hide/show footer.

For eaxample, using Tizen Web UI / Multy Page Application I want the second page to be opened without a heder. All content area should be expanded including header area. And have some button or custom event which will hide/show footer.

Is ther any way to do this?

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

5 Replies
Lakshmi Grandhi
Hii , To hide header section just remove the <div data-role="header"> tag of second page , to hide the footer and make content to occupy he whole page you can add the below code 
function footerHide(){
	$('#footer').hide();    // "footer" is id given to footer
	$('#content').css('min-height', '650px');    // "content" is id given to content
}
Maksym
Hi Lakshmi, Thank you for your reply. I thought about such solution, but I didn't want to use values like '650px', maybe the better way is to use $('#content').css('min-height', ($('#content').css('min-height') + $('#footer').height())); Also this is a second page which is opened from the root page using the methd $.mobile.changePage('#pageID'); and in this case the root page is not hidden, so when I remove hedear or footer, I see header and footer of the rot page. Therefore I was thinking about something like "native" / API solution.
Maksym
Hi Lakshmi, Thank you for your reply. I thought about such solution, but I didn't want to use values like '650px', maybe the better way is to use $('#content').css('min-height', ($('#content').css('min-height') + $('#footer').height())); Also this is a second page which is opened from the root page using the method $.mobile.changePage('#pageID'); and in this case the root page is not hidden, so when I remove header or footer, I see header and footer of the root page. Therefore I was thinking about something like "native" / API solution.
konduri sai swathi
Kindly try the below code index.html: 
<body>
    <div data-role="page" id="page1">
        <div data-role="header" data-position="fixed">
            <h1>First Page</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <button onclick="changePage();">Page2</button>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Footer content1</h4>
        </div><!-- /footer -->
    </div><!-- /page1 -->
    
    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed" id="header">
            <h1>Second Page</h1>
        </div><!-- /header -->

        <div data-role="content" id="content">
            <p>This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.</p>
            <button onclick="footerHide();">Hide</button>
            <button onclick="footerShow();">Show</button>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" id="footer">
            <h4>Footer content2</h4>
        </div><!-- /footer -->
    </div><!-- /page2 -->
</body>
js file : 
function footerHide(){
	console.log("inside hide");
	$('#footer').hide();
	$('#content').css('min-height', ($('#content').height() + $('#footer').height()));
}
function footerShow(){
	console.log("inside show");
	$('#footer').show();
	$('#content').css('min-height', ($('#content').height() - $('#footer').height()));
}
function changePage(){
	$.mobile.changePage('#page2');
}
Maksym
Hi Konduri, Your solution works. Thanks!