Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Regular Contributor
yamafarooq
Posts: 65
Registered: ‎01-03-2013
My Device: 9810
Accepted Solution

JQuery Mobile Fixed Footer Bar disappears when orientation change

i am developing mobile application using JQuery Mobile, in the main page which is home page everything is fine but when moving to next page and change ths orientation footer disapers completely, however the code i am using for all the pages are same


here is the code i am using for the foooter

 

   

  <div data-role="footer">
        <div class="separator"></div>
        <div data-role="navbar" data-iconpos="top" class="line" id="line">
          <ul>
            <li><a href="#home_pg" id="tab1" data-transition="none">
                <img src="image/home-broadcast-icon.png" />
            </a></li>
            <!--<li><a href="#email_pg" id="tab2" data-transition="none">
                                <img src="image/nav-2.png" />
                            </a></li>-->
            <li><a href="#plugin_pg" id="tab3" data-transition="none">
                <img src="image/nav-3.png" />
            </a></li>
            <li><a href="#help_pg" id="tab4" data-transition="none">
                <img src="image/nav-4.png" />
            </a></li>

          </ul>
        </div>

      </div>

 please help

 

with regards

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: JQuery Mobile Fixed Footer Bar disappears when orientation change

I noticed this kind of thing for a different reason recently on one of my apps

 

It you haven't switched the zoom stuff off (user-scalable + initial-scale etc) what I've seen it do is alter the scale factor which has some wierd side effects

 

If the size of your content is changing size when changing orientation the footer will be off-screen in some orientations

 

Setting the Metas as recommended in the KB fixed things for me (BB10) and stopped the scaling

 

    <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);
   </script>




Click the like button if you find my posts useful!
Regular Contributor
yamafarooq
Posts: 65
Registered: ‎01-03-2013
My Device: 9810

Re: JQuery Mobile Fixed Footer Bar disappears when orientation change

i am using BB 7 and it doesn't work

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: JQuery Mobile Fixed Footer Bar disappears when orientation change

The standard meta should work just as well for BB7 as it (should) stop scaling

 

<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-height,width=device-height">




Click the like button if you find my posts useful!
Regular Contributor
yamafarooq
Posts: 65
Registered: ‎01-03-2013
My Device: 9810

Re: JQuery Mobile Fixed Footer Bar disappears when orientation change

Thanks for repling, i the problem solved ,

 

 

i just add

data-position="fixed"

and it solved the problem

 

so now the correct code is

 

<div data-role="footer" data-position="fixed">
<!-- 
       add all footer elements in here it 
-->
</div>

 :Clap:

-----
Please press the like button to thank the user that helped you.
Accept as a solution if it solved the problem.
Cheers