1

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);
Elydasian
  • 2,016
  • 5
  • 23
  • 41
has19
  • 1,307
  • 16
  • 31

1 Answers1

2

M.parseMath(element) converts the $$...$$ text node inside element to a formatted (2-dimensional) mathematical expression, which changes its width. So try doing the window.scrollBy(element.scrollWidth,0); after the M.parseMath() call, not before, so that element.scrollWidth can give you the correct final element width.

Dave Barton
  • 1,429
  • 13
  • 12
  • thx for the reply i think the problem is related to the webview in android .i think there a bug or something in it as i tried the exact same code in a browser and works perfectly. awesome library by the way – has19 Apr 13 '16 at 21:29