I have some buttons in my android xml layout once I press one of the buttons I called a javascript function to append some text to a 'p' html element in a webview but once the width of the p element becomes wider than the screen width of webview I called the code below to scroll to the end of the p element.
window.scrollBy(document.getElementById("myp").scrollWidth,0)
But sometimes this code doesn't work properly as it seems that document.getElementById("myp").scrollWidth is getting me the wrong width and I debug the code by using console.log to check the width and it seems that sometimes it is stucking in the same width and not updating with respect to the new text I am adding to the p element.
I also tried using $(document).width() and sometimes also it gets me the wrong width.
This is my javascript function included in javascript1.js file which I call:
function append(input){
var element=$('#myp')[0];
element.innerHTML="$$" + input + "$$";
window.scrollBy(element.scrollWidth,0);
M.parseMath(element) ;
}
The M.parseMath() is a function I call from a jqmath library for displaying math formulas which works fine as expected.
And the html code is (includes a jquery and jqmath library)
<html><head>
<link rel='stylesheet' href='mathscribe/jqmath-0.4.3.css'>
<link rel='stylesheet' href='mathscribe/mystyle.css'>
<meta name="viewport" content="width=device-width, user-
scalable=no" />
<script src='mathscribe/jquery-1.4.3.min.js'></script>
<script src='mathscribe/jqmath-etc-0.4.3.min.js'></script>
<script src='mathscribe/javascript1.js'></script>"
<script src='mathscribe/jquery.js'></script>"
</head>
<body id='mybody'>
<p id='myp'></p>
</body>
</html>
And this is the xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/webView"
android:focusableInTouchMode="true"
android:layout_weight="0.5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="insert"
android:id="@+id/insertnewtext"
android:onClick="clickme"
android:layout_gravity="center_horizontal" />
<LinearLayout/>
And this is the java code for setting up the webview:
WebView webView= (WebView) getActivity().findViewById(R.id.webView);
WebSettings mWebSettings = webView.getSettings();
mWebSettings.setJavaScriptEnabled(true);
M.parseMath(element)converts the$$...$$text node insideelementto a formatted (2-dimensional) mathematical expression, which changes its width. So try doing thewindow.scrollBy(element.scrollWidth,0);after theM.parseMath()call, not before, so thatelement.scrollWidthcan give you the correct final element width.