Skip to content

Instantly share code, notes, and snippets.

@patik

patik/jQueryMobile Blackberry 6 collapsible content bug

Created February 10, 2011 21:09
Show Gist options
  • Save patik/821346 to your computer and use it in GitHub Desktop.
Save patik/821346 to your computer and use it in GitHub Desktop.
Download ZIP
On a Blackberry Bold 9650 running OS 6, collapsible elements do not expand/collapse properly. This workaround adds an event listener with a `setTimeout` of zero milliseconds.
Raw
jQueryMobile Blackberry 6 collapsible content bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BB6 Collapsible</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function() {
if (/blackberry/i.test(navigator.platform)) {
setTimeout(function () {
$('.ui-collapsible-heading').tap(function() {
var $collapsible = $(this);
if ($collapsible.is('.ui-collapsible-heading-collapsed')) {
$collapsible.trigger('expand');
}
else {
$collapsible.trigger('collapse');
}
});
},0); // end of setTimeout()
}
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<!-- /roles -->
<div data-role="page" data-theme="b">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Page Title</h1>
</div>
<!-- /content -->
<div data-role="content">
<div data-role="collapsible" data-collapsed="true" data-theme="c">
<h3>I'm closed at the start</h3>
<p>You won't be able to see this when the page loads.</p>
</div>
<div data-role="collapsible" data-theme="c">
<h3>I'm open at the start</h3>
<p>You should be able to see this when the page loads.</p>
</div>
<p>Some other content on the page.</p>
</div>
<div data-role="footer" data-theme="b">
<h4>Page Footer</h4>
</div>
</div>
<!-- Roles [End] -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment