Hello,
I could not find a solution in the forum, so i ask here:
I load a html file which contains javascript via webview.loadurl. The javascript defines a mouseover or hover effect on <a> tags:
The javascript: inside openbook.htm:
When the user hovers over a chapter number, a short summary of this chapter is shown in a popup window.
In the main html, the chapters are referred in <a> tags - I tried 2 ways: not working !
The strange thing: when the app starts, it's working - but after one click event, the mouseover is not working any more, even after reloading the url into the webview.
I understand that wvsettings.setLightTouchEnabled(wvSlide,True) is depreciated.
To use CSS would be an alternative, but then had to rewrite the whole structure with many books each with many chapters.
I hope that is not totally confusing - maybe someone else had a similar problem.
Thanks,
Chris
I could not find a solution in the forum, so i ask here:
I load a html file which contains javascript via webview.loadurl. The javascript defines a mouseover or hover effect on <a> tags:
B4X:
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout")
wvSlide.initialize("wvSlide")
pnlSlide.AddView(wvSlide,5dip,5dip,98%x, 95%y)
wvSlide.ZoomEnabled = False
wvSlide.JavaScriptEnabled = True
wvx.addWebChromeClient( wvSlide, "wvx")
wvx.addJavascriptInterface(wvSlide,"B4A")
wvsettings.setLightTouchEnabled(wvSlide,True) <== no effect !
End Sub
Sub Button1_Click
xui.MsgboxAsync("Start", "Open Book")
Log("setting: "& wvsettings.getLightTouchEnabled(wvSlide)) <== shows always FALSE
wvSlide.Loadurl("file:///android_asset/openbook.htm")
End SubThe javascript: inside openbook.htm:
B4X:
<html>
<head>
<title>Book Browser</title>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8" />
<style>#body,#foot{max-width:600px}
</style>
<script>
document.addEventListener('DOMContentLoaded', init, false);
var $id, $minX, $bookLength, $eWidth, $currentChapter;
function init()
{
document.body.addEventListener('mouseover', doOver, false);
document.body.addEventListener('mouseout', doOut, false);
}
function doOver(e)
{
e = e || window.event;
var $target = e.target || e.srcElement;
$id = $target.id;
if (!$id || typeof $h[$id] == 'undefined') return;
$minX = getOffset($target, 'offsetLeft');
$bookLength = $h[$id].length;
$eWidth = $target.clientWidth;
getById($target).addEventListener('mousemove', doMove, false);
var $hPar = getById('h');
$hPar.style.display = 'block';
$hPar.style.top = (getOffset($target, 'offsetTop') + $target.clientHeight) + 'px';
var $bodyWidth = document.body.clientWidth;
if ($bodyWidth - $minX - $hPar.clientWidth < 0)
{
$hPar.style.left = null;
$hPar.style.right = 0;
}
else
{
$hPar.style.left = $minX + 'px';
$hPar.style.right = null;
}
doMove(e);
}When the user hovers over a chapter number, a short summary of this chapter is shown in a popup window.
In the main html, the chapters are referred in <a> tags - I tried 2 ways: not working !
B4X:
<a id="book1" href="Gen+1" onClick = "event.preventDefault(); B4A.CallSub('gotoBook',false,id,( this.getAttribute('href')))">book1</a>
<a id="book2" href="https://www.xxxxxxxxx/?search=book2+1">book2</a>The strange thing: when the app starts, it's working - but after one click event, the mouseover is not working any more, even after reloading the url into the webview.
I understand that wvsettings.setLightTouchEnabled(wvSlide,True) is depreciated.
To use CSS would be an alternative, but then had to rewrite the whole structure with many books each with many chapters.
I hope that is not totally confusing - maybe someone else had a similar problem.
Thanks,
Chris