jQuery mobile screen display issue...

**SoundOfFaz** · 14th April 2013

I've posted this on stack overflow and the jquery mobile forum but no solution yet so just asking in here in case anyone has a magic solution.

In a nutshell, I am new to jquery mobile so created something basic from this tutorial and thought I was getting on well until it came to adding a page with the collapsible accordion type blocks. It displayed fine but by default they were open with content visible when I loaded the page. Changing the div data-role so it said

HTML Code:

<div data-role="collapsible" data-collapsed="true">

should have worked but didn't. A lot of googling led me to believe it was down to the script I was using and indeed I then noticed this tutorial was well out of date and was using

jquery.com/jquery-1.4.3.min.js and code.jquery.com/mobile/1.0a1 so changed to the current versions which solved the collapsible blocks problem but left me with a tiny footer and content. Everything shrunk, here is a screenshot of how it looks:

new_script.png

So with the old scripts, it was the right size but collapsible didn't work and with the new scripts vice versa.

Des anyone have a clue what the issue is? Here is the full code of my page (no fancy extras now as I defaulted back to just get one page sorted first!) The header images are set to 100% width so these are ok, the list menu should fill the whole screen (it does using the older scripts)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>magnetikmedia</title>
<link rel="stylesheet" type="text/css" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>


<body>


<!-- Start of first page -->
<div data-role="page" id="home">


<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->


<div data-role="content">    
        <ul data-role="listview">
    <li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>


    <li><a href="#about">
    <div class="mobile_menu_hpage"></div>
      <div class="list-text">About Us</div>
    </a></li>


    <li><a href="#getsocial">
      <div class="mobile_menu_hpag"></div>
      <div class="list-text">Get Social</div>
    </a></li>
    
    <li><a href="#services">
      <div class="mobile_menu_hpag"></div>
      <div class="list-text">Services</div>
    </a></li>
    
    <li><a href="#portfolio">
      <div class="mobile_menu_hpag"></div>
      <div class="list-text">Portfolio</div>
    </a></li>
    
       <li><a href="#contact">
      <div class="mobile_menu_hpag"></div>
      <div class="list-text">Contact Us</div>
    </a></li>
  </ul>    
    </div><!-- /content -->


      <div data-role="footer1">
  <div id="footer1" align="center"><a href="http://www.facebook.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png"  alt="magnetikmedia on facebook" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.twitter.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png"  alt="magnetikmedia on twitter" width="30" height="30" style="margin-right:10px;" ></a><a href="http://magnetikmedia.blogspot.co.uk"><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png"  alt="magnetikmedia on blogger" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.linkedin.com/in/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png"  alt="magnetikmedia on linkedin" width="113" height="30" style="margin-right:10px;" ></a>
  </div>
 </div>
</div>
      </div><!-- /footer -->
        
      </div>
</div><!-- /page -->


</body>
</html>