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
Related
im building and app for android that use google maps embed with i frame all this on intel xdi plus cordova on html5 the problem is sometimes the apk show all black and it didn't show the map or is not well centre sometimes looks all fine but is like random pls some advice so fix that
<html>
<head></head>
<body>
<style>
.wrapper {
position: relative;
padding-bottom: 165%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 93% !important;
}
</style>
<div class="wrapper">
<iframe src="http://mapbuildr.com/frame/hc0v2v" frameborder="0"></iframe> </div>
</body>
</html>
Some old android devices dont initialize height and width immediately, try loading map after Cordova deviceready event is fired, here is sample code I tested, this loads the iframe src after deviceready event is fired:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.wrapper {
position: relative;
padding-bottom: 165%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 93% !important;
}
</style>
<script src="cordova.js"></script>
<script>
document.addEventListener("deviceready", function(){
document.getElementById("map").src = "http://mapbuildr.com/frame/hc0v2v";
}, false);
</script>
</head>
<body>
<div id="mapa_2" class="upage-content vertical-col left hidden">
<div class="wrapper">
<iframe id="map" src="" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
I'm experiencing a strange problem on the stock browser on an HTC One X running Android 4.2.2.
I have a container div with overflow-x set to hidden and overflow-y set to auto, it has fixed width and height dimensions. The child content has width and height that exceeds its parent. The idea is that you should be able to scroll vertically but not horizontally. Every browser that i've seen behaves correctly and I get the desired effect. However, on this Android Stock browser I am able to scroll horizontally AND vertically freely, which is not what I want as the overflow-x: hidden is supposed to prevent horizontal scrolling.
I've created a codepen to demo the basic problem:
http://codepen.io/anon/pen/YXjZKR
Code here too:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' />
<style>
.container{
width: 300px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
}
ul.pages {
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
width: 300px;
line-height: 500px;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
text-align: left;
white-space: normal;
height: auto;
}
li.one {
background-color: red;
}
li.two {
background-color: yellow;
}
li.three {
background-color: green;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul class="pages">
<li class="one">Hello<br /><br /></li>
<li class="two">good</li>
<li class="three">bye</li>
</ul>
</div>
</body>
I have also noticed that if I shorten the height of the child content to be less than the container, then the content no longer scrolls horizontally either. Unfortunately the content will always be taller than the container.
Have spent hours trying to work out why this is happening and, more importantly, looking for a workaround but have had no luck so far.
Any help would be really appreciated.
Thanks
I'm assuming that the <li> elements are set to display: inline-block in order to hide them horizontally. If so, your issue is that the .container element is not the parent of the <li>.
The actual parent - the ul.pages - is defaulting to overflow: auto in this browser for some reason. Set that to overflow-x: hidden and you should be alright.
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!!!
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!
It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)