Changing mobileheader height in javascript

[Andy Parker]

Hi,

I'm trying to dynamically change the height of the mobileheader object in my project.

I've initially achieved this by applying some static CSS as follows:
.classHeader { height:12px; }

But, as this changes depending upon the target host, I want to do this in javascript and remove the static CSS.

I've tried various code, but nothing seems to apply, here's what I've tried so far:

$('.mobileheader').css("height","12px");
and
$("[dsid=mobileheader]").css('height',"12px");

can you help me solve this please?

many thanks

Andy.

[Andy Parker]

managed to change the header size as follows:

Code: Select all

  $("[dsid=mobileheader]").css('height',"12px"); 

and adding static CSS as follows:

.classHeader h1.ui-title{
margin: 1px 0;
font-size:10px;
}

but, I now need to ensure the header text and "back button" are aligned to the bottom of the header, any ideas?

Screenshot below, header text and button (back button) is at top, I need them to align to bottom.

[Kateryna Grynko]

Hi Andy,

Here is another way to do this in case someone needs it:pre[name=mobileheader]{
height:12px;
overflow:hidden;
}/pre
Please post a public link. We'll take a look.

[Andy Parker]

thanks Katya,

app is already shared with Appery Support, it's called MotorwayCamWatch.

The code in question is in the load event of the CAMWATCH page.

I've placed it there as a test.

It does check for Chrome browser at the moment, but feel free to comment out the test so the code runs regardless of browser.

All I'm trying to achieve is aligning the title text "Cam Watch" and the back button "Exit" with the bottom of the header.

many thanks again.

[Kateryna Grynko]

Andy,

Try the following:pre[name=mobilebutton]{
bottom: 0;
top: auto;
}/pre

[Andy Parker]

doesnt seem to work Katya, both title and button are still at the top of the header.

[Igor]

Hello,

1. To set size you should use this code:
   pre$("[data-role=header]", $.mobile.activePage) instead of $("[dsid=mobileheader]")/pre
2. Use next CSS code to align button at the bottom screen:
   pre
   .ui-header.ui-header-fixed .ui-btn-left.classExitButton{
   top: auto!important;
   bottom: 10px;
   }
   /pre
   where classExitButton the button "Class Name".
3. Use next CSS to align header at the bottom screen:
   pre
   .classHeader h1.ui-title{
   position: absolute;
   bottom: 5px;
   width: 100%;
   }
   /pre
   where classHeader header "Class Name"

[Andy Parker]

This is great, many thanks.

One issue though, as the code ($("[data-role=header]", $.mobile.activePage) instead of $("[dsid=mobileheader]")) runs after "page load", the rest of the screen is under the header.

The only way to overcome this is to move move to another page then back again.

Is there a way to refresh the whole layout so the rest of the page is displayed correctly?

The images below show the problem, the top image shows how it looks at load time, the second image is how it looks after I navigate to another page and return. It is the second image that I require at load time.

thanks again.

[Kateryna Grynko]

Hi Andy,

Run this code on Page Show event instead of Page Load.

[Andy Parker]

thank you again for your support.

I'm running the code from the "device ready" event, as I need to ensure I dont do anything before I get this - especially on Windows Phone.

I managed to get around the problem with a piece of code from one of your existing posts

Code: Select all

 $(".ui-page").triggerHandler('updatelayout'); 

I placed this after the resize code, and it seems to work great!

Code: Select all

 $("[data-role=header]", $.mobile.activePage).css('height',"20px"); 

thanks again.