By Maksym

20 Jun 2013 03:33 English 5 Replies

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 on 18 03, 2014

Responses

5 Replies

Lakshmi Grandhi

20 Jun 2013 04:26

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
}

Reply to this post
Mark as answer

Maksym

25 Jun 2013 04:37

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.

Reply to this post
Mark as answer

Maksym

25 Jun 2013 04:38

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.

Reply to this post
Mark as answer

konduri sai swathi

25 Jun 2013 06:03

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');
}

Reply to this post
Mark as answer

Maksym

26 Jun 2013 01:59

Hi Konduri, Your solution works. Thanks!

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses