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>
Social Networking Bookmarks