I has a problem with the new implementation of webview for android 4.4+.
My HTML code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.videos.globo.com/p2/j/api.min.js" type="text/javascript"></script>
<style type="text/css" media="all">
#player-wrapper, #image-wrapper {
width: 100% !important;
height: 100% !important;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#image-wrapper {
z-index: 999;
background-color: white;
}
</style>
</head>
<body>
<div id="player-wrapper"></div>
<img id="image-wrapper">
<script type="text/javascript">
var element = document.getElementById('player-wrapper');
var image = document.getElementById('image-wrapper');
var player = new WM.Player({
autoPlay: true,
width: 640,
height: 360
});
player.attachTo(element);
image.onclick = function() {
player.playVideo();
image.style.visibility = 'hidden';
};
</script>
</body>
But the rule width: 100% is not working, the # player-wrapper is getting bigger than the webview. Strange that only the #player is being affected, #image are right.
Can anyone help me with this?
The problem lies in the WM.player constructor, which sets the width of the player to 640px, which is probably bigger than your viewport. There is no parameter for max-width in the WM.Player constructor, so you'll have to use a meta tag. Trying adding <meta name="viewport" content="width=640px"> in the head section of your HTML so that the viewport is sized to fit the 640px width set in the WM.Player constructor.
This html tag might be useful.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Related
I have a 1513x1079 image which resizes great when I resize my desktop browser.
However, when I open the same webpage on my android phone, everything shows up great, except the image. The whole page resizes properly, but there is no picture. There is only a tiny picture icon in the upper left corner.
Is there some upper limit to image dimensions for phones?
If so, why is there such a limit?
Does image responsiveness have some sort of dimension limit?
HTML Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name = "viewport" content = "width=device-width, initial-scale = 1"/>
<title>Projects web page</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="jQuery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6" id = "picture">
<img src="R1lr_cut.jpg" alt = "R1 Engine" class = "responsive"/>
</div>
<div class = "col-md-6" id = "home_text">
<h1>Inline 4 Engines</h1>
<ul id = "links">
<li>Home</li>
<li>Details</li>
<li>Calculate</li>
<li>About</li>
</ul>
<div id = "filler_text">
<h4>Historic information</h4>
<p>
The first across-the-frame 4-cylinder motorcycle was the 1939 racer Gilera 500 Rondine, it also had double-over-head camshafts, forced-inducting supercharger and was liquid-cooled.
</p>
<p>
Modern inline-four motorcycle engines first became popular with Honda's SOHC CB750 introduced in 1969, and others followed in the 1970s.
Since then, the inline-four has become one of the most common engine configurations in street bikes.
</p>
<p>
Outside of the cruiser category, the inline-four is the most common configuration because of its relatively high performance-to-cost ratio.
</p>
<p>
The success of the Honda CB750 and the Kawasaki Z1 got the attention of the Germans over at BMW. The Honda especially had been an industry game changer.
BMW’s motorcycle engine at that time was a horizontally opposed “boxer” twin cylinder engine that the company had settled on when they reverse engineered a British Douglas motorcycle with a boxer engine mounted longitudinally in the frame at the end of the First World War.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code :
body {
background-color: #000000;
}
.responsive {
width:100%;
height: auto;
}
#picture {
padding-right: -10%;
padding-top: 3%;
width: 100%;
}
#links li{
list-style-type: none;
float:left;
/*outline : 1px solid yellow;*/
width: 14%;
margin-right: 11%;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#links{
/*outline: 1px solid red;*/
width: 100%;
padding-left: 0.5%;
}
a {
/*outline :1px solid green;*/
display: block;
text-align: center;
padding: 3%;
color: #666666;
}
a:hover {
background-color: #333333;
color:#66ccff;
}
#home_text {
background-color: black;
padding-top: 8%;
color: #FFFFFF;
padding-left: 0%;
}
#home_text h1 {
margin-left: 5%;
/*outline: 1px solid purple*/
}
#filler_text {
padding-top: 12%;
margin-left: 5%;
}
Make sure your image size is set in percents, not in pixels or anything else.
Example:
<img src="yourimage.png">
<style>
img{width: 100%; /*100 can be any, but will fit 100% of the block*/}
</style>
You can also make your image a block background: `
myimg{background-image: url(“pic.jpg”); background-size: cover;}
Sorry if syntax is wrong, just typing from my phone. Also you can try doing like this instead of making it a block:
img{display: inline-block;}
`
If this doesn’t help change inline-block to block.
I do not work with intel XDK long. I'm making a game and I want the canvas was stretched across the screen on any phone. I tried this
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
In the emulator, it was fine. But on my Android (Nexus 7 G) was only the page background. Canvas disappeared!
Try initializing canvas inside after DeviceReady is fired, the width and height may not be initialized before the intel.xdk.device.ready is fired.
Here is the modified code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); margin:0; padding:0; }
input, textarea { -webkit-user-select:text; }
html, body { background-color:red; color:black; width:100%; height:100%;}
canvas{background-color: #f00; position: relative; display:block;}
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
initCanvas();
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function initCanvas(){
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
</script>
</head>
<body>
<canvas id="game"></canvas>
</body>
</html>
With Intel XDK, having the <canvas id="game"></canvas> is optional, you can access the canvas object directly via intel.xdk.canvas.
Moreover, the canvas is always fullscreen, you don't need to stretch it yourself.
So, your problem might be related to something else, and you have to show us a sample of your code so we can help you.
I'm trying to use PhoneGap and LeafLet in Android.
I read tutorial about LeafLet and I've chosen to start with mobile example
My problem with this gray area.. Why this gray area appearing ?
There is no gray area on browser. I didn't change anything except file path.
How can i make map full screen ?
Update Note : I'm working 10" tablet landscape mode, now I tried this example in 3,2" phone and there is no problem with 3.2" screen. Problem with 10" screen-landscape mode
MainActivity.java
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
appView= (CordovaWebView) findViewById(R.id.tutorialView);
appView.loadUrl("file:///android_asset/www/main.html");
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<org.apache.cordova.CordovaWebView
android:id="#+id/tutorialView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
main.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet mobile example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet.ie.css" /><![endif]-->
<script src="leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade'
}).addTo(map);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
</body>
</html>
Leaflet doesn't always correctly infer the dimensions of maps without explicit dimensions. As a general solution to this kind of problem with Leaflet, try adding this to the end your javascript:
setTimeout(map.invalidateSize.bind(map));
This will cause Leaflet to recalculate the dimensions of the map, and hopefully fix the gray tiles you're seeing.
Occasionally, it may also be necessary to delay the recalculation further, with something like setTimeout(map.invalidateSize.bind(map),200); this may fix gray tiles under unusual browser loading conditions.
Setting position:absolute for #map element helped me. Try this style:
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
I have created the project having Listview with default theme. My configuration goes as explained below.
index.html file where all the imports to css, js files are done including cordova-2.0.0.js and other stuffs that are needed. Index.html file contains my Login Page.
Now, After login I go to home.html page where i have list view configured as below :
<div data-role="header" data-theme="b">
<h1>Home Screen</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li><img src="images/profile.png" alt="Profile">My Profile</li>
<li><img src="images/courses.jpg" width="189" height="189" alt="Courses">My Courses</li>
<li><img src="images/contact.jpg" width="160" height="160" alt="Contacts">My Contacts</li>
<li><img src="images/map.png" width="215" height="215" alt="Map">My Map</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>© 2012.</h4>
</div>
Note that I have not included the header file here. and only this much code is there in home.html file. (Note here since it is HTML i am not able show my Parent div tag where i have configured data-role="page")
Now, all the themes are getting applied only the arrow is not coming instead a Gray Spot is coming as in below Pic.
Can any one explain why it goes like this?? I have checked the other project and I have all the imports as it is.
Below is my index.html imports :
<link rel="stylesheet" href="styles/custom.css" />
<link rel="stylesheet" href="styles/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.3.min.js"></script>
<!-- <script src="js/jquery-mobile-1.2.0.min.js"></script> -->
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
EDIT
my CSS custom.css goes as below
/* CSS Document */
#container0 {
width: 100%;
height: 100%;
position: relative;
overflow-x:hidden;
border: 1px solid black;
}
#div0 {
width: 100%;
height: 100%;
position: absolute;
}
#div1 {
width: 100%;
position: absolute;
left: 100%;
height: 100%;
}
/*#footer {
margin-top:'10px';
}*/
button {
display:block;
text-align:center;
margin:0 auto;
width:100%;
height:2em;
}
.loginBtn {
width:100%;
}
.info {
border:1px solid black;
background:#eeeeff;
margin:5px;
padding:5px;
}
/* Map CSS Start */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
width:520px;
height: 900px;
}
/*#media print {*/
#media all and (orientation: landscape) {
html, body {
height: auto;
}
#map_canvas {
width: 950px;
height: 480px;
}
}
/* Map CSS End */
.ui-content h2 {
text-align:left;
padding:0px;
padding-left:10px;
margin-bottom:10px;
}
.ui-content h4 {
padding: 0px;
padding-left:10px;
margin-bottom: 5px;
}
Use above jquery files on proper places and try this after anchor tag
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
Try with this:
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
EDIT :
I got it solved for local jquery.mobile-1.2.0.min.css file.
First copy this image from this link Arrow Icon
You will get image named icons-18-white.png.
Save this image into www/images/icons-18-white.png path.
That's it.
It works for me.
Thanks.
Developing an android app in html5(phonegap) and I had to use a scrollView. Could find anything in html5 as we have in Java so I'm trying to use the library iScroll which served the purpose of scrolling but as I scroll down it bounces back to top, I suppose it is called rubber-band-effect. How do I handle this glitch? Plus as I scroll down by dragging I get a warning in Logcat:
W/webview(2795): Miss a drag as we are waiting for WebCore's response for touch down.
Check my following code in which the list items are getting dynamically added which should not be the issue, the problem IMO lies in html itself.
<!DOCTYPE html>
<html>
<head>
<title>Storage Example </title>
<link rel="stylesheet" type="text/css" href="indexCss.css" />
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
</style>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script src="index.js" type="text/javascript" charset="utf-8" >
</script>
</head>
<body>
<header>
<input type="text" id="name" placeholder="enter name" />
<input type="button" value="Add" onclick='Add();' />
</header>
<div id="wrapper">
<div id="scroll-content">
<div id="result"></div>
</div>
</div>
<footer>
Some Footer Content
</footer>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', scroll, true);
</script>
</body>
</html>
I had this problem solved, removing the height:100%; property from my wrapper.
bottom:0; made sure the wrapper stretched all the way to the bottom of the screen.
Try this:
scroll = new iScroll(this, {
useTransform: false,
useTransition: true
});
If does not work, go through this:
https://groups.google.com/forum/#!topic/iscroll/CMB9d_e5d4Y
This problem occurs when you have a container div for your wrapper The fix for this is to set the height of the container to 99%.
Following is the CSS which finally fixed this issue for me:
#productsScreen{ /* my container */
height: 99%;
z-index: 1;
top: 0px;
left: 0;
overflow: auto;
}
#productListWrapper{
background:transparent;
position:absolute;
z-index:1;
top: 88px;
bottom:49px;
left:0;
width:100%;
overflow:auto;
}
#productsListScroller {
position:absolute; z-index:1;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Hope that helps!
Had the same issue and after sweet midnight debugging fount that my wrapper was resizing for some reason to height way bigger than the phone screen. Im using jquery mobile paging and somehow it was messing with the iScroll. Here is how i solved it:
HTML
<div id="screen" data-role="page">
<div data-role="content">
<div id="list-wrapper">
<ul>
...
</ul>
</div>
</div>
<div data-role="footer">
...
</div>
</div>
JS
// the iScroll should be initialized after the page is visible
// to prevent bug with display:none. If you are not using
// jQuery mobile paging this can be skipped.
$('#screen').on('pageshow', function() {
// calculate the expected height of the real content wrapper and set it
var screenHeight = $('#screen').height();
var footerHeight = $('#screen [data-role="footer"]').height();
var realContentHeight = screenHeight - footerHeight;
$('#list-wrapper').css({'height': realContentHeight + 'px'});
// create or refresh the iScroll after resizing the wrapper
if (myScrollFunction != null ) {
setTimeout(function () {
myScrollFunction .refresh();
}, 100);
} else {
setTimeout(function () {
myScrollFunction = new iScroll('list-wrapper');
}, 100);
}
});