In my application when I move from index1.html to index2.html,It shows black screen while retriving large amount of data from the server, stored in local database and retrieving the data from local database in onload of index2.html.How to show the progress bar when the black screen is appeared or how to remove that black screen?.
update
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Login</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
function submit()
{
alert("welcome");
window.open("index2.html");//while loading index2.html i need the progress bar
}
</script>
<style type="text/css">
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body >
<input type="button" style="width:80%" value="Submit" onClick="submit()"/>
</body>
</html>
Android code
public class MobilyzerActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}
If you are using frameworks like JQueryMobile then you have the option of showing loading dialog.
showing
$.mobile.showPageLoadingMsg()
hiding
$.mobile.hidePageLoadingMsg()
Are you using plain HTML?? any framework??
Related
I'm trying to Create Android PhoneGap using Polymer ,it is worked very well on browser http://192.168.1.2:8080/ , But don't work on the phone
code Polymer Starter Kit
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Polymer Starter Kit">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<meta name="description" content="My App description">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true,
};
// Load webcomponentsjs polyfill if browser does not support native
// Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
/src/my-app.html:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
<a name="new-view" href="/view">New View</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view name="view"></my-view>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
},
observers: [
'_routePageChanged(routeData.page)',
],
_routePageChanged: function(page) {
this.page = page || 'view1';
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
});
</script>
</dom-module>
Please help me.
This has to do with using absolute paths vs relative paths & is kind of a complicated issue (see https://github.com/PolymerElements/polymer-starter-kit/issues/919 as an entry point for more details).
To just get things working you should be able to change this line in your index file:
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
to
script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
However you'll possibly then need some changes to your app routing when running on Cordova, but see if this gets you started.
I think its my html / css problem . I already got my web view correctly its from
My webView activity shows blank
Below are my html and css part
index.html
<!DOCTYPE html>
<html>
<head>
<title>Collection</title>
<link rel="stylesheet" type="text/css" href="insert.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="maindiv">
<!--HTML Form -->
<div class="form_div">
<div class="title">
<h2>Insert Data In Database .</h2>
</div>
<form action="insert.php" method="post">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label>Name:</label>
<input class="input" name="name" type="text" value="">
<label>Number:</label>
<input class="input" name="number" type="text" value="">
<label>Shop:</label>
<input class="input" name="shop" type="text" value="">
<label>item:</label>
<input class="input" name="item" type="text" value="">
<label>Collection:</label>
<textarea cols="25" name="collection" type="textarea" value="" rows="5"></textarea><br>
<input class="submit" name="submit" type="submit" value="Insert">
</form>
</div>
</div>
</body>
</html>
insert.css
.maindiv {
margin:30px auto;
width:980px;
height:500px;
background:#fff;
padding-top:20px;
font-family:'Droid Serif',serif;
font-size:14px
}
.title {
width:500px;
height:70px;
text-shadow:2px 2px 2px #cfcfcf;
font-size:16px;
text-align:center
}
.form_div {
width:70%;
float:left
}
form {
width:300px;
border:1px dashed #aaa;
padding:10px 30px 40px;
margin-left:70px;
background-color:#f0f8ff
}
form h2 {
text-align:center;
text-shadow:2px 2px 2px #cfcfcf
}
textarea {
width:100%;
height:60px;
border-radius:1px;
box-shadow:0 0 1px 2px #123456;
margin-top:10px;
padding:7px;
border:none
}
.input {
width:100%;
height:30px;
border-radius:2px;
box-shadow:0 0 1px 2px #123456;
margin-top:10px;
padding:7px;
border:none;
margin-bottom:20px
}
.submit {
color:#fff;
border-radius:3px;
background:#1F8DD6;
padding:5px;
margin-top:40px;
border:none;
width:100%;
height:30px;
box-shadow:0 0 1px 2px #123456;
font-size:18px
}
p {
color:red;
text-align:center
}
span {
text-align:center;
color:green
}
Am attaching screenshot I got like this in app i would like to change permanent without scroll in my app what can i do any one help .?
You have to add meta Viewport and check for screen density. You can find more detail here and here.
For a school project I've to do a PhoneGap application. I want to do a div with a map, and after makes interest points. But it's impossible to have it in my android emulator, got the error "referenceError can't find variable google". I tried a lot of solution I've found and the only thing I can do it's to show a little piece of map on the top of my application, but only on an internet browser.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
}
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKh2nx6OdT6pdPi-KtPNH_6Lc7Aj9z7d4&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
</head>
<body>
If someone have a piece of code working on his computer, or find an error on mine i would be very happy.
Thanks.
The following works for me in my Nexus 4 emulator. Taken mostly from Google Maps JavaScript API:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script scr="jquery.js></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I am new to HTML5. I am not able to drag and drop inside eclipse. This function is working in browser.
Please some one help me. Thanks in Advance.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="ic_launcher.png" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
google map v3 is not fully displayed in html5, phonegap.
This map is drag-able, here is JavaScript code(main.js)
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);
var myOptions = {
center: myLatlng,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarker(myLatlng);
setMarker(myLatlng2);
}
function setMarker(p)
{
marker = new google.maps.Marker({
position: p,
title:"Hello World 2!"
});
marker.setMap(map);
}
initialize();
and here is my html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/jquery.mobile.css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/tabs.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>
<script type="text/javascript" src="jquery.ui.map/jquery.ui.map.services.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</head>
<body>
<div id="page-id" data-role="page" >
<div id="map-container"><div id="map_canvas" style="height:600px; width:600px;"></div> </div>
</div>
</body>
</html>
css
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map_canvas {
width: 600px;
height: 400px;
}
Please suggest me solution where is the problem if I inspect it in firebug it loads completely and show a complete map in div.
We had the same problem and we solved it by setting "max-width: none" on the map . But I don't remember why. :(
Looking at your screenshot it seems that the mapcontrol takes up the desired space but the actual map-area isn't large enough. Try to move your call to initialize(); so that it executes when the rest of the page has loaded and see if it helps.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);
var myOptions = {
center: myLatlng,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarker(myLatlng);
setMarker(myLatlng2);
}
function setMarker(p)
{
marker = new google.maps.Marker({
position: p,
title:"Hello World 2!"
});
marker.setMap(map);
}
$(document).ready(function() {
initialize();
});
Another solution might be to call the resize event and have the map control remeasure itself after everything has loaded, that is done by calling google.maps.event.trigger(map, "resize"); (and call initialize() outside of the ready-function as before).
$(document).ready(function() {
google.maps.event.trigger(map, "resize");
});
Pls check the following :
<div id="mapa" style="width: 350px; height: 350px"></div>
Above is the div for map to be listed.
var map = new google.maps.Map(
document.getElementById('mapa'), {
center: new google.maps.LatLng(9.295680287227711, 76.87921151518822),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I tried all the above wont work any so had done a trick like this which give desired result.
I write a mouse over function and call the below code
(1) Modify
<div id="mapa" onmouseover="show_sidebar()" style="width: 350px; height: 350px"></div>
(2)
function show_sidebar(){
google.maps.event.trigger(map, 'resize');
}
I've had this issue in the past and posted my solution to a similar question.
The following fixed it:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
Waiting for the map's idle state (i.e. it's finished loading itself) and then telling it to resize itself.