Android: jQuery slider not shown correctly in WebView

Question

Hi I programmed a RSS reader for Android. Sometimes the feed includes a jQuery slider (RoyalSlider http://dimsemenov.com/plugins/royal-slider/) and this one is not shown in my webview.

My webview is initialized like this:

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    // Initialize views after the activity is created
    TextView title = (TextView) getView().findViewById(R.id.title);
    TextView author = (TextView) getView().findViewById(R.id.author);
    TextView date = (TextView) getView().findViewById(R.id.date);
    WebView wv = (WebView) getView().findViewById(R.id.desc);

    // Enable the vertical fading edge (by default it is disabled)
    ScrollView sv = (ScrollView) getView().findViewById(R.id.sv);
    sv.setVerticalFadingEdgeEnabled(true);


    // Set webview properties
    WebSettings ws = wv.getSettings();
    //to show only one column, so that picture is always scaled correctly
    ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    ws.setJavaScriptEnabled(true);
    ws.setAllowFileAccess(true);
    ws.setAllowContentAccess(true); 

    wv.setWebChromeClient(new WebChromeClient());

    Log.d("debug","In ItemDetailFragment mit Position: "+fPos+"und Feed: "+fFeed);

    //put in data
    title.setText(fFeed.getItem(fPos).getTitle());
    author.setText(fFeed.getItem(fPos).getAuthor());
    date.setText(fFeed.getItem(fPos).getDate());
    wv.loadDataWithBaseURL("file:///android_asset/jquery-1.10.2.min.js", fFeed
            .getItem(fPos).getDescription(), "text/html", "UTF-8", null);

}

The slider in the RSS feed looks like this (just replaced the links to the images):

<p><div id="royalslider-77" class="royalSlider default" style="width:620px; height:340px;"><ul class="royalSlidesContainer"><li data-src="http://www.test.de/1.jpg" class="royalSlide"></li><li data-src="http://www.test.de/2.jpg" class="royalSlide"></li><li data-src="http://www.test.de/3.jpg" class="royalSlide"></li><li data-src="http://www.test.de/4.jpg" class="royalSlide"></li><li data-src="http://www.test.de/5.jpg" class="royalSlide"></li></ul></div><script type="text/javascript">jQuery(document).ready(function() {jQuery("#royalslider-77").royalSlider({"width":620,"height":340,"skin":"default","preloadSkin":false,"lazyLoading":true,"preloadNearbyImages":true,"slideshowEnabled":false,"slideshowDelay":5000,"slideshowPauseOnHover":true,"slideshowAutoStart":true,"keyboardNavEnabled":false,"dragUsingMouse":true,"slideSpacing":0,"startSlideIndex":0,"imageAlignCenter":true,"imageScaleMode":"fit","autoScaleSlider":false,"autoScaleSliderWidth":620,"autoScaleSliderHeight":700,"slideTransitionType":"move","slideTransitionSpeed":400,"slideTransitionEasing":"easeInOutSine","directionNavEnabled":true,"directionNavAutoHide":false,"hideArrowOnLastSlide":true,"controlNavigationType":"none","auto-generate-images":false,"auto-generate-thumbs":false,"thumb-width":60,"thumb-height":60,"captionAnimationEnabled":true,"captionShowFadeEffect":true,"captionShowMoveEffect":"movetop","captionMoveOffset":20,"captionShowSpeed":400,"captionShowEasing":"easeInOutSine","captionShowDelay":200,"controlNavEnabled":false,"captionShowEffects":["fade","movetop"]});});</script><br />

It looks like this in my webview, first the text and the slider is only represented as these four dots:

Anyone an idea where my mistake is?

Answer 1

http://www.test.de/1.jpg link is broken - gives a 404

Check if all the other referenced URLs are rendering.

Unless the URL is working I see the list bullets that you are receiving is as expected.

Answer 2

// set web chrome client by adding this in ur on create    
wv.setWebChromeClient(new CustomWebViewChromeClient());

  // this is web chrome client implemetation. it works. Any issues please put comments. i got   working
private class CustomWebViewClient extends WebViewClient
{
  public boolean shouldOverrideUrlLoading(WebView view, String url) 
  {
    // TODO Auto-generated method stub

        return false;
  } 

  @Override
  public void onPageStarted(WebView view, String url, Bitmap favicon) 
 {
   // TODO Auto-generated method stub
   super.onPageStarted(view, url, favicon);
  }

@Override
public void onPageFinished(WebView view, String url) 
{
    // TODO Auto-generated method stub
   super.onPageFinished(view, url);
 }

   @TargetApi(11)
   @Override
   public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
   Log.d("shouldInterceptRequest", url);

    InputStream stream = inputStreamForAndroidResource(url);
    if (stream != null) {
       return new WebResourceResponse("text/javascript", "utf-8", stream);
   }
   return super.shouldInterceptRequest(view, url);
}

private InputStream inputStreamForAndroidResource(String url) {
   final String ANDROID_ASSET = "file:///android_asset/";

   if (url.contains(ANDROID_ASSET)) {
       url = url.replaceFirst(ANDROID_ASSET, "");
       try {
           AssetManager assets = getAssets();
           Uri uri = Uri.parse(url);
           return assets
                   .open(uri.getPath(), AssetManager.ACCESS_STREAMING);
       } catch (IOException e) {
           e.printStackTrace();
       }
   }
   return null;
}
}