Skip navigation
Currently Being Moderated

phonegap not displaying properly in later versions on android

Nov 5, 2013 7:23 AM

Hi Guys,

 

I have created an app in dreamweaver cc and uploaded it through the phonegap build service. It utilises the <div dat-role id="page"> to go to different areas of the page.

 

It works fine on my phone running android 2.3.7 (don't laugh!), but when I try running it on a htc sensation android 4.0.3 or Nexus running 4.3 it just displays as one long scrolling page.

 

Does anyone know how to sort this out or am I missing something?

 

Greg

 
Replies
  • Currently Being Moderated
    Nov 5, 2013 10:46 AM   in reply to alienblood

    Is "dat-role" a typo in your post, or are you actually using that in your app code?

     

    Here is a simple jQuery Mobile page structure:

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>JQM Site 1</title>

    <link href="jquery.mobile-1.3.2/jquery.mobile.theme-1.3.2.css" rel="stylesheet" type="text/css">

    <link href="jquery.mobile-1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css">

    <script src="jquery.mobile-1.3.2/jquery.js" type="text/javascript"></script>

    <script src="jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

    </head>

     

    <body>

    <div data-role="page" id="Home">

      <div data-role="header">

        <h1>Header</h1>

      </div>

      <div data-role="content">

        <ul data-role="listview">

          <li><a href="#page2">Page Two</a></li>

          <li><a href="#page3">Page Three</a></li>

          <li><a href="#page4">Page Four</a></li>

        </ul>

      </div>

      <div data-role="footer">

        <h4>Footer</h4>

      </div>

    </div>

    <div data-role="page" id="page2">

      <div data-role="header"><a href="#Home" data-role="button" data-icon="arrow-l" data-rel="back" data-iconpos="notext">Back</a>

        <h1>Header</h1>

      </div>

      <div data-role="content">Content</div>

      <div data-role="footer">

        <h4>Footer</h4>

      </div>

    </div>

    <div data-role="page" id="page3">

      <div data-role="header"><a href="#Home" data-role="button" data-icon="arrow-l" data-rel="back" data-iconpos="notext">Back</a>

        <h1>Header</h1>

      </div>

      <div data-role="content">Content</div>

      <div data-role="footer">

        <h4>Footer</h4>

      </div>

    </div>

    <div data-role="page" id="page4">

      <div data-role="header"><a href="#Home" data-role="button" data-icon="arrow-l" data-rel="back" data-iconpos="notext">Back</a>

        <h1>Header</h1>

      </div>

      <div data-role="content">Content</div>

      <div data-role="footer">

        <h4>Footer</h4>

      </div>

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 13, 2013 10:59 AM   in reply to alienblood

    I haven't tried adding two different versions of jQuery to one of my mobile apps, but it very well could be causing a conflict. I know for sure you are using an old version of jQuery Mobile, so the 1.6.4 version of jQuery might be better for your app. Have you tried removing the third 1.10.2 script line?

     

    Any reason why you're not using the latest version of jQuery Mobile?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points