All geek questions in one place

Layering inside HTML inside webview


I have html resources that show thanks to web browsing in android. It displays well with current browsers, but with older browsers such as Android 2.1, what you see in the images goes.

First image of my appFail


I put the code in case someone wants to see it.
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Documento sin título</title> <script> function show(divactual,textactual) { if(document.getElementById(divactual).style.display == "block"){ document.getElementById(divactual).style.display = "none"; document.getElementById(textactual).innerHTML = "show details..."; } else if(document.getElementById(divactual).style.display == "none"){ document.getElementById(divactual).style.display = "block"; document.getElementById(textactual).innerHTML = "hidden details..."; } } </script> <style type="text/css"> body{ background-color:transparent; font-family: Verdana, Geneva, sans-serif; font-size: 1.0em; font-style: normal; color:#999999; margin:10px; } body a{ color:#0CF; text-decoration:none; } #bg { z-index: -14; width: 100%; } #letrapequena { font-family: Verdana, Geneva, sans-serif; font-size: 0.6em; color: #00537c; } #tituloseccion{ font-family: Verdana, Geneva, sans-serif; font-size: 1.5em; font-style: normal; font-weight: bold; color:#7AB800; } #headtwo{ font-family: Verdana, Geneva, sans-serif; font-size: 1.2em; font-style: normal; font-weight: bold; color:#7AB800; } #headthree{ font-size: 1.1em; font-style: normal; font-weight:bold; color:#00537C; } #container{ background-color:#D8F7FE; margin:10px 0; color:#00537c; font-weight:bold; } </style> </head> <body style="background-color:transparent;"> <div id="tituloseccion"> Titleone </div> <hr align="left" width="90%" size="0.1em" color="#999999"> <div id="headtwo">titletwo</div> <div id="bigcontainer" style="display:block;"> <div id="headthree">titlethree</div> <div id="generalcont" style="display:block;"> <div id="container" style="display:block;"> <div style="display:inline">parrone&nbsp;&nbsp;&nbsp;</div> <div style="display:inline;"> <a href="javascript:show('info1','text1');" id="text1">show datails...</a> </div> </div> <div id="info1" style="display:none;" > text text text text text text text text </div> </div> <div id="generalcont" style="display:block;"> <div id="container" style="display:block;"> <div style="display:inline">parrtwo&nbsp;&nbsp;&nbsp;&nbsp;</div> <div style="display:inline;"> <a href="javascript:show('info2','text2');" id="text2">show details...</a> </div> </div> <div id="info2" style="display:none;" > text text text text text text text </div> </div> </div> <div id="letrapequena" style="display:block;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </body> </html>


Java

  package es.ibys.prueba.webview; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.webkit.WebView; public class PruebawebviewActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); WebView myWview = (WebView) findViewById(R.id.webview); String miurl = "file:///android_asset/index2.htm"; myWview.getSettings().setJavaScriptEnabled(true); myWview.setBackgroundColor(Color.TRANSPARENT); myWview.loadUrl(miurl); } }


I do not know how to fix this. I tried changing the layer, css, div, styles ... everything that happened to me. Has anyone happened? How did you manage? Please, help

+6
source share
1 answer

Are you sure this is not a problem with your JS?

Here is the script with your code in it: http://jsfiddle.net/8wsvu/

Is the show() function in pure JS an Android function, or should it be JS? I am not big enough, but in JS to find out if this is there, but googling does not bring any results, since this is a JS function.

My second assumption about why this wrong bundle is that div are in absolute order on top of each other.

If you can use jQuery to show and hide elements on the page, it will be much easier.

0
source

Source: https://habr.com/ru/post/917890/

More articles:


All Articles