Android 2.x and 3.x WebKit mess
Question
I'm developing an Android app, and my intention is to be able to publish it for Android 2.2+ at least. Currently, I'm limited to Android 4.0+ because of the WebView control being a mess.
The app is largely HTML+CSS+JS+jQuery based.
div.appList shows a list of apps, and when clicked the app should launch. Only there's some trouble with this; For the list to be scrollable, I have to add overflow: scroll; to its parent. This works fine in Android 3.0+. In Android 2.x the list is still not scrollable.
I said it worked fine in Android 3.0? Well, the scrolling does. Now the problem is that it doesn't register clicks. If the user taps an item in the list, the click event simply doesn't get triggered, because, I'm guessing, it's registered as the user scrolling through the list. Making the list unscrollable again makes the items clickable, but then again, the list is useless because you can only access the top few items.
Everything works fine in Android 4.0+
Any help would be hugely appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="loadingScreen">
</div>
<div id="desktop">
<div class="unity panel">
</div>
<div class="unity launcher">
<div class="launcherIcon bfb">
<img src="img/unity/launcher.bfb.png" alt="Dash Home" />
</div>
<div class="launcherApps iScroll" id="launcherApps">
</div>
<div class="launcherIcon launchTrash">
<img src="img/apps/trash.icon.png" alt="Rubbish Bin" />
</div>
</div>
<div class="window">
<div class="windowClose">
</div>
<div class="windowContent">
<div class="windowPreferences">
<p>Nothing to be seen here, yet</p>
</div>
</div>
</div>
<div class="unity dash">
<div class="dashContent">
<div class="dashApps dashPage iScroll" id="dashApps">
<div class="appList"></div>
</div>
<div class="dashFiles dashPage iScroll" id="dashFiles">
<div class="fileList"></div>
</div>
</div>
<div class="dashRibbon">
<img src="img/unity/apps.png" alt="Applications" class="activeRibbonItem ribbonApps" />
<!--<img src="img/unity/files.png" alt="Files" class="ribbonFiles" />-->
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
font-family: 'Ubuntu', 'Droid Sans';
margin: 0px;
padding: 0px;
overflow: hidden;
background: rgb(43,0,30);
}
/*# Loading screen #*/
div#loadingScreen
{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
text-align: center;
background: rgb(43,0,30) url(img/ubuntuLogo.png) center center no-repeat;
color: white;
z-index: 49;
}
/*# Desktop #*/
div#desktop
{
display: none;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgb(43,0,30) url(img/wallpaper/wartyFinal.jpg);
background-position: center center;
background-size: cover;
}
div.unity.panel
{
display: none;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 24px;
background: rgb(69,68,64) url(img/unity/panel.background.jpg);
background-repeat: repeat-x;
}
div.unity.panel.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
border-bottom: 1px solid #504E4F;
}
div.unity.launcher
{
display: none;
position: absolute;
top: 24px;
left: 0px;
bottom: 0px;
width: 0px; /* Animates to 64px */
background: transparent url(img/unity/launcher.background.png);
border-right: 1px solid #504E4F;
padding: 3px 0px 55px 0px;
}
div.unity.launcher.dashOpened
{
background: transparent url(img/unity/dashOpened.png);
}
div.launcherIcon
{
display: none;
width: 52px;
height: 52px;
margin: 4px 6px 4px 6px;
border-radius: 5px;
background: transparent url(img/unity/launcher.iconbg.png);
background-position: center;
background-size: cover;
}
div.unity.launcherIcon.dashOpened
{
background: grey !important;
opacity: 0.8;
}
div.launcherIcon.bfb
{
background-image: none;
border-radius: 0px;
}
div.launcherIcon.bfb img
{
width: 52px;
height: 52px;
margin: 0px;
}
div.launcherIcon img
{
width: 46px;
height: 46px;
margin: 3px;
}
div.launcherIcon.launchFirefox
{
background-color: rgb(247,192,48);
}
div.launcherIcon.launchTrash
{
position: absolute;
bottom: 3px;
background-color: #303030;
}
div.window
{
display: none;
position: absolute;
top: 24px;
left: 64px;
right: 0px;
bottom: 0px;
background: rgb(242,241,239);
color: black;
}
div.windowClose
{
position: fixed;
left: 0px;
top: 0px;
width: 64px;
height: 24px;
text-align: center;
background: url(img/window/close.png) center center no-repeat;
}
div.dash
{
display: none;
position: absolute;
left: 64px;
top: 24px;
bottom: 0px;
right: 0px;
background: transparent url(img/unity/dashOpened.png);
padding: 0px 12px 48px 12px;
color: white;
overflow: scroll;
}
div.dash.dashOpened
{
display: block;
}
div.dash *:link
{
color: white;
text-decoration: none;
text-shadow: 0px 0px 2px white;
}
div.dash ul li
{
padding: 5px;
}
/*# Applications #*/
div.appWindow
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
JavaScript
var bootscreenDelay = 500; // 2500 //
var appOpened = false;
var dashOpened = false;
$(document).ready
(
function ()
{
$('div#loadingScreen').delay (bootscreenDelay).fadeOut (800);
$('div#desktop').delay (bootscreenDelay + 300).fadeIn (600,
function ()
{
$('div.unity.panel').slideDown (400,
function ()
{
$('div.unity.launcher').css ('display', 'block').animate ( { width: 64 }, 600,
function ()
{
$('div.launcherIcon').each
(
function (i)
{
$(this).delay (i * 200).slideDown (400);
}
);
}
);
}
);
}
);
$('div.windowClose').click
(
function ()
{
$('div.appFirefox .appFirefoxBrowser').fadeOut (400,
function ()
{
appFirefoxNavigate ('http://start.ubuntu.com/');
}
);
$('div.appWindow.appFirefox').fadeOut (800);
$('div.window').delay (200).fadeOut (800);
appOpened = false;
}
);
/*# Dash #*/
$('div.launcherIcon.bfb').click
(
function ()
{
if (! dashOpened)
openDash ();
else
closeDash ();
}
);
/*# Trash #*/
$('div.launcherIcon.launchTrash').click
(
function ()
{
closeEverything ();
android.openInBrowser ('http://www.dafk.net/what/');
}
);
}
);
function closeEverything ()
{
$('div.windowClose').trigger ('click');
closeDash ();
}
function openDash ()
{
$('*').addClass ('dashOpened');
dashOpened = true;
var appList = android.getApplicationList ();
var pkgMan = android.getPackageManager ();
var strAppList = '<ul>';
for (var i = 0; i < appList.size (); i++)
{
var appLabel = android.getApplicationLabel (appList.get (i));
strAppList += '<li onclick="launchApp (' + i + ')">' + appLabel + '</li>';
}
strAppList += '</ul>';
$('div.appList').html (strAppList);
}
function closeDash ()
{
$('*').removeClass ('dashOpened');
dashOpened = false;
}
function launchApp (i)
{
android.launchAppFromList (i);
}
Anything that helps me get it working on an older version is appreciated. The goal is Android 2.x, but if you can help me make it work on 3.2+, I'm already very happy.
1 answers
solution1
1 ACCPTED 2013-01-21 17:57:34
overflow:scroll|auto dowsn't work properly on Android 2.X devices. This css rule equals to overflow:hidden :)
You can't fix it but you can use plugins to avoid this behaviour eg http://cubiq.org/iscroll-4
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.