How can I get all images without first class: content.slide0.
In my example I use Jsoup library, which show selectable elements in WebView.
Elements element = doc.select("HERE_SOLUTION");
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TESTING TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css?4231">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<style type="text/css" media="screen">
body {
background: #fe9600 url('images/1389219790_bg2.jpg') no-repeat fixed top center;
}
#content.slide0 {
background: url('img/1234.jpg') no-repeat scroll top left;
width: 970px;
height: 474px;
margin: 0 auto;
}
#content.slide1 {
background: url('images/1235.jpg') no-repeat scroll top left;
width: 970px;
height: 474px;
margin: 0 auto;
}
#content.slide2 {
background: url('images/1236.jpg') no-repeat scroll top left;
width: 970px;
height: 474px;
margin: 0 auto;
}
Jsoup parses HTML but not CSS. Since you are attempting to get images from CSS, you cannot use Jsoup selectors. You should probably use regular expressions.
In you '.*' regex should extract
1. 'img/1234.jpg'
2. 'images/1235.jpg'
3. 'images/1236.jpg'
4. 'images/1389219790_bg2.jpg'
Last one may be unwanted. You can remove this probably checking length of string or so.
Alternatively you can use CSS parser like this.
Hope this helps!
Related
I am trying to render an image as html in webview of android but not able to calibrate it correctly in mobile, original image gets cropped both left and right using below code. how should I fix this and how to know if it will render fine on mobile (by running in browser only) ? below is what I am doing.
image dimensions are:(624*936)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
/>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%">
<div
onclick="surface.touch()"
style="
background: url(https://image/startBackground_1)
center center fixed;
background-repeat: no-repeat;
height: 100%;
background-size: cover;
display: flex;
justify-content: flex-end;
flex-direction: column;
font-family: 'Noto Sans', sans-serif;
"
>
<div
style="margin-bottom: 100%; margin-top: 100%;"
></div>
</div>
</body>
</html>
We tries to print a webview content over google cloud print, but no matter what we do the resulted printout adds some margin.
Is there a way to remove this margin?
We tried:
<body style="margin: 0; padding: 0">
then
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
then
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
none worked...
Use the following code to remove margins when printing the WebView.
#page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
Just Use It *{margin:0px; padding:0px} Add In Your Style Sheet And Check Once
*{margin:0px; padding:0px}
body,html{padding:0px;margin:0px;}
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
By Default HTML web pages have a padding and margin of 10px; You have to set in your head section or or css file:
<style type="text/css">
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
It's work for me. Hope it will help you :)
or you can try another one:
Replace your tag with this one:
<body style='margin:0;padding:0;'>
Here's another tip for images in a webview: add a styling that fits images in the width of the screen. Works great on all screen sizes:
<style type='text/css'>
img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}
</style>
If using the css doesn't solve your issue, you can try using a TextView with fromHtml instead of using a webview:
TextView myTextView = (TextView) view.findViewById(R.id.my_textview);
Spanned textviewHtml;
//Note : fromHtml needs a display flag as second argument from API 24
if (Build.VERSION.SDK_INT >= 24) {
textviewHtml= Html.fromHtml(yourHtmlHere, Html.FROM_HTML_MODE_COMPACT);
}
else {
textviewHtml= Html.fromHtml(yourHtmlHere);
}
myTextView.setText(textviewHtml);
For more options on fromHtml you can refer to https://developer.android.com/reference/android/text/Html.html
Hope this helps! ;-)
I have a scrollLeft function on a header so it is fixed vertically but scrolls horizontally. There is a bug in chrome for android where the header scrolls horizontally twice as fast as the rest of the page.
If I view this example in chrome for android it works as it should.
jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#header {
height: 40px;
width: 900px;
background-color: red;
position: fixed;
z-index: 2; }
#content {
height: 1000px;
width: 900px;
background-color: blue;
top: 50px;
position: absolute;
z-index: 1; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
$('#header').css('left', 8 - $(this).scrollLeft());
});
});//]]>
</script>
</head>
<body>
<div id="header">This is a fixed header that scrolls horizontally</div>
<div id="content">This is blah blah blah blah</div>
</body>
</html>
When I implement the code on a basic page as this page, the bug appears.
simple jsfiddle page
Somehow jsfiddle gets around the bug.
Changing
$('#header').css('left', 8 - $(this).scrollLeft());
to
$('#header').css('margin-left', 8 - $(this).scrollLeft());
and setting the fixed element to left:auto !important;
has resolved the issue!!!
Check out the following demo on an Android device:
Scrolling Demo
There is a red box that is slightly off screen. When the vertical spacer is not present, you can't drag the page around in any direction. When the spacer is present and taking up more vertical space than the window, you can drag the page down (as expected) however, now you can also drag horizontally.
This only seems to happen on Android browsers. Any clues on what's going on here? I'd like to prevent the horizontal scrolling altogether while retaining vertical scrolling.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="viewportMobile" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="test.css" />
<style>
html,body {
overflow: hidden;
}
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: visible;
overflow-x: hidden;
}
.offscreen {
position: absolute;
right: -20px;
background-color: #ed0021;
padding: 20px 20px 20px 20px;
}
</style>
<script>
var showSpacer=true;
function toggleSpacer() {
showSpacer = !showSpacer;
var spacer = document.getElementById('spacer');
spacer.style.display = showSpacer ? 'block' : 'none';
}
</script>
</head>
<body>
<div class="toggle-button" onClick="toggleSpacer()">Toggle Spacer</div>
<div class="offscreen"></div>
<div id="spacer" style="width:50px; height:2000px; background-color:#444">
</div>
</body>
</html>
Removing the overflow properties and changing the position to relative for the body element worked for me. It should look like this:
body {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
edit: bad copy/paste
edit 2: updated answer
I use the below html.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
<title>Sample</title>
</head>
<body>
<div style="width: 250px; height: 50px; background: green;">250px</div>
<div style="width: 500px; height: 50px; background: yellow;">500px</div>
<div style="width: 1000px; height: 50px; background: red;">1000px</div>
</body>
</html>
I set UseWideViewPort to true
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
From what I understand, the div with the 1000px should occupy the entire width, the one with 500px should scale to half the width and the one with 250px should occupy one-fourth the width.
But what really happens is the one with 500px and 1000px goes beyond the screen size. I have attached the screenshot for clarity. I also tried changing user-scalable=no with no effect.
How should I fix this?
What is happening is that since you have the
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
and you specify the width in your divs, then an actual value of, say, 1000 pixels is being applied to the div. According to documentation:
When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used.
If you want to achieve divs with widths in respect to one another, an easier ruote would be using percentages, something like:
<body>
<div style="width: 25%; height: 50px; background: green;">25%</div>
<div style="width: 50%; height: 50px; background: yellow;">50%</div>
<div style="width: 100%; height: 50px; background: red;">100%</div>
</body>
If you aim to have a 'wide' viewport, like a desktop, you should pass true and not specify a meta tag as mentioned:
If the page does not contain the tag or does not provide a width, then a wide viewport will be used.