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.
Related
In my testing so far Chrome with mobile inspector or actual Android phone (my Pixel 6) both are experiencing incorrect dragging behavior if there is an overlapping element that has pointer-events: none on it. Amazingly it's working as expected in iOS.
Here's a quick code sandbox I made that shows the issue, you can toggle the overlay on and off and feel how the dragging behavior changes.
https://codesandbox.io/s/brave-violet-bnn8xo
Issue tested on Mac/Chrome and Android Pixel 6 Chrome latest.
Anyone else have this experience?
Edit: to be clear, the issue is that you can't interrupt a throw in progress, like immediately changing your swipe direction after you swipe one way, it gets stuck, doesn't snap, and you need to lift your finger off and reapply to get it working again.
function Main() {
return (
<div className="App">
<p>The blue transparent overlay has pointer-events: none.</p>
<p>Try to interrupt a throw in progress it will bug out</p>
<section className={"testSection"}>
<div className={"testSectionInner"}>
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
</div>
</section>
<div className={"testOverlay"} />
<p>Without overlay.</p>
<p>Try to interrupt a throw in progress it will work as expected</p>
<section className={"testSection"}>
<div className={"testSectionInner"}>
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
<div className={"testItem"} />
</div>
</section>
</div>
);
}
class App extends React.Component {
render() {
return (
<Main />
);
}
}
// Render it
ReactDOM.render(
<App />,
document.getElementById("root")
);
.App {
font-family: sans-serif;
text-align: center;
}
.testSection {
max-width: 100vw;
}
.testSectionInner {
overflow: scroll hidden;
padding-left: 1.25rem;
display: flex;
flex-flow: row nowrap;
scroll-snap-type: x mandatory;
}
.testItem {
scroll-snap-align: center;
flex: 0 0 calc(81.6591%);
background-color: red;
height: 200px;
margin-right: 4%;
pointer-events: auto;
}
.testOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background-color: blue;
opacity: 0.2;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
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 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">
Hi I am developing a native android application in phone-gap ,in that application I want to upload a image file through chose file button when I click the button I want to open the device gallery but the gallery window is not opening.I can open the gallery windows when I load through browser in device but cant make it natively for android,so please help me find solution for this.
Will the phone gap scripting file changes for various platform or it needs any plugin files to be added for various platforms in phone gap or I need to add any cordova.js files to root files(like WWW).
I have doubt that any kind of version compatibility issues in phone gap or device so please help me.
for further details i will add my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/jquery/plugins/jqtransform/jqtransform.css" />
<title> Mobile</title>
<script src="js/jquery/jquery162min.js" type="text/javascript"></script>
<script src="js/jquery/plugins/accordion/jqueryui1814custommin.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/plugins/jqtransform/jqtransform.js" ></script>
<script src="js/mgeneral.js" type="text/javascript"></script>
<script src="../js/pl/plupload.js" type="text/javascript"></script>
<script src="../js/pl/plupload.html5.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
/*Set skin for select, options and checkbox*/
$('.skinnable').jqTransform({ imgPath: 'img/' });
$('#apply-to-selection-2').click(function (e) {
e.preventDefault();
Logout();
if (RTNCODE)
window.location = "index.html";
});
/*table row select*/
$("table.grid thead tr th.col-row-select input").click(function () {
if (!$(this).is(":checked")) {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", true);
$(this).change();
});
}
else {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", false);
$(this).change();
});
}
});
/*END table row select*/
/*Create accordion*/
$(".accordion").accordion({
header: ".accordion-tab",
collapsible: true,
active: 0,
autoHeight: false
});
});
</script>
<script type="text/javascript">
$(function () { //image loader
var uploaderimage = new plupload.Uploader({
// General settings
runtimes: 'html5',
container: 'imagecontainer',
browse_button: 'pickfiles',
url: '/imageupload.ashx?mobile=true',
multi_selection: false,
max_file_size: '10mb',
//chunk_size: '1mb',
multipart: true,
urlstream_upload: true,
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" }
]
});
uploaderimage.init();
uploaderimage.bind('FilesAdded', function (up, files) {
// showmodalmask();
uploaderimage.start();
$('.imgpre').show();
$('.imgcpl').hide();
});
uploaderimage.bind('FileUploaded', function (up, file) {
if (uploaderimage.total.uploaded == uploaderimage.files.length) {
// $('.btnrefresh').click();
$('.imgcpl').show();
$('.imgpre').hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="frame">
<div class="frame-border-top"></div>
<div class="frame-border-middle">
<div class="cute" style="">
<h1 class="header" style="color:transparent; width:270px; height:20px;">
</h1></div>
<!-- MENU START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<div id="tabs-2" style="background-color:Black; border:1px solid #363636;">
<div style="margin-left:-15px; margin-top:-6px;">
<div class="form-row padding-lr-5" style="text-align:center;">
<div id="imagecontainer" >
<div id="filelist"></div>
<br />
<a id="pickfiles" href="#" style="background-color: #447cd1; color: white; border: 2px solid #113b7c; border-radius: 12px; padding: 6px 10px; font-size: 12pt; text-decoration: none">Select file</a>
</div>
<br />
<div class="holderloderp imgpre" style="display:none"><img src="../images/pnl-preloader2.gif" width="25" height="25" alt="" class="pnl-preloader2" /></div>
<div class="imgcpl" style="color: green; display: none" >Complete</div>
</div>
<div class="clear" style="height:25px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to use the FileTransfer object of the phonegap API which will do the upload to your server using any server side script file handler.
Look at this link
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);
}
});