I am creating an Android quiz game using HTML. I wants a code or technique by which the player could not go back by leaving the current page. It's an Android game. Please help me how it can be done in HTML.
Have a look at this fiddle https://jsfiddle.net/Limitlessisa/axt1Lqoz/ (click on Share and then use the browser back button) and it will give you the basis of what you need. Not a good idea to disable the browser controls - I recommend instead you show a dialog and tell the user they are leaving the game with a yes/no to continue.
<html>
<head>
<title>Back Button Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="text-align:center; padding:0;">
Share
<div class="share" style="">
<h1>Test Page</h1>
<p> Back button press please for control.</p>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$('body').on('click touch', '#share', function(e) {
$('.share').fadeIn();
});
});
// geri butonunu yakalama
window.onhashchange = function(e) {
//var oldURL = e.oldURL.split('#')[1];
//var newURL = e.newURL.split('#')[1];
if (oldURL == 'share') {
//$('.share').fadeOut();
//e.preventDefault();
//return false;
}
//console.log('old:'+oldURL+' new:'+newURL);
}
</script>
<style>
.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;
</style>
Related
I am loading some website in my android application using WebView and what I just want to do is after loading the page I want to automatically click the <button> with data-stage="premium"
here is my html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="switch-stage">
<div>
<button data-stage="normal">Normal</button>
</div>
<div>
<button data-stage="premium">Premium</button>
</div>
</div>
<script src="/js/jquery-3.3.1.min.js"></script>
<script>
$('#switch-stage button').on('click', function() {
var stage = $(this).data('stage');
});
</script>
</body>
</html>
This is what I've done in android.
webView.loadUrl("javascript:document.getElementById(\"switch-stage button\").click(\"premium\");");
but I think my loadUrl is not correct. (This is what I am seeing in different link that I've searched.)
Is it possible to do what I am asking, to automatically click the button so that the var stage will have a data.?
I hope someone will help, Thanks.
Try this:
public void onPageFinished(WebView view, String url)
{
// hide element by id LECLERC
view.loadUrl("javascript:(function() { " +
"document.getElementsById('Premium').click();"
//document.getElementById("switch-stage").children[1].click();
;})()");
}
I am currently developing an HTML kiosk presentation for iPad and Android. Issue I am having is with popup videos on Android, which works perfectly on iPad and also within Chrome on Android. I need to present this as a kiosk style application and so am using Protosee on iPad and Fully Kiosk Browser on android which I believe uses the Android Webview (Chromium) engine so should work too but doesn't.
Using FKB the video popup comes up but with a blank screen and a video icon in the centre, touching the screen again removes the popup and the video plays in the background.
Any pointers would be much appreciated.
Code is as follows
<html>
<head>
<title>BASE Charging Stand</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="logitech.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/logitech.js"></script>
</head>
<body>
<div class="main_content basechargingstand">
<div class="header">
<div class="hotspot" onclick="goBack()"></div>
<div class="hotspot"></div>
<div class="hotspot"></div>
</div>
<div class="page_navigation">
<div class="top_slot" onclick="goBack()"></div>
</div>
<div class="product_detail">
<div id="video_pop" onclick="onPopClick()"></div>
<a onclick="onVideoClick('videos/Base.mp4');">
<img src="images/play_btn_lrg.png" width="78"/>
</a>
<div class="hotspot 3col"></div>
</div>
</div>
</body>
</html>
</script>
function onVideoClick(theLink) {
document.getElementById("video_pop").innerHTML = "<video poster autoplay id=\"the_Video\"><source src=\""+theLink+"\" type=\"video/mp4\" ></video>";
document.getElementById("video_pop").style.display="block";
document.getElementById('video_pop').play();
}
function onPopClick() {
document.getElementById("video_pop").style.display="none";
document.getElementById("video_pop").innerHTML = "";
}
</script>
<style>
#video_pop {
z-index: 9999;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background: rgb(193, 198, 201) !important;
display: none;
cursor: pointer;
top: 20.7%;
}
#the_Video {
width: 100%;
position: fixed;
top: 60.5%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
Android and iOS have disabled video autoplay with purpose! Imagine browsing the web with your phone and all the video advertisements that could be playing in the background will just simply eat up all your bandwidth.
While working with hybrid HTML clients, I used this trick/workaround to start autoplaying videos: When user entered the page for the first time, then <video> element with empty src has to be created the page (hidden somewhere). Whenever user touches the screen for the first time for whatever reason, then I tried to invoke play method on the video element (this breaks the first usergesture on html video element). This will usually give a small error/warning in console but that is okay because what matters is that the first user gesture has been made, thus enabling you to use play() method whenever you want! So after the first user gesture has been made, you simply just have to use the same <video> element!
I hope this helps.
I think that you cannot Autoplay a video inside a WebView in Android. I believe Android does it for security reasons, so apps don't use too much mobile data unless the user wants it. Maybe you could try it by having the video stored locally?
I am trying to display a webpages using in-app-browser in android platform of phone gap.
window.open() opening a url webpage which can call another html pages on to the server. I am trying to close the in-app-browser on any page (i.e., on very first loaded page or on intermediate page loaded or on the last page) by clicking a close hyperlink which calls a javascript function iabClose(event)
but the in-app-browser is not closing.
Please help me if anybody knows the solution or any other better way of closing in-app-browser.
Thanks in advance
Code:
<html>
<head>
<script type="text/javascript" charset="utf-8">
var iabRef = null;
function inApp() {
iabRef = window.open('http://202.65.155.246/Real_Time_Data /SSEClient.aspx', '_blank', 'location=no');
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.addEventListener('exit', iabClose);
}
function iabLoadStop(event) {
if(event.url == "http://202.65.155.246/Real_Time_Data/CloseIAB.aspx"){
iabRef.close();
}
}
function iabClose(event) {
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('exit', iabClose);
}
</script>
<title>Hello World</title>
</head>
<body>
Click Here </br></br>
Exit
</body>
</html>
I have a PhoneGap application that uses JQuery mobile to navigate between pages.
When I navigate from the main page to a page containing a Google map, the map shows only a single tile at a time in the top left corner like this:
What can be the reason for this ?
**
Source Code:
The following script is in the head of my page
<script>
$(document).on("pageinit", "#stores", function () {
var centerLocation = new google.maps.LatLng('57.77828', '14.17200');
var myOptions = {
center: centerLocation,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
callback: function () { alert('callback'); }
};
map_element = document.getElementById("map_canvas");
map = new google.maps.Map(map_element, myOptions);
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map, 'resize');
});
</script>
My Page is like this
<!-- Home -->
<div data-role="page" id="home">
.
.
.
</div>
<div data-role="page" id="stores">
<div data-role="content" id="map_canvas"></div>
</div>
I navigate from home to the maps page like this:
Stores
Update
after applying Gajotres solution the tiles become like this
intro
Newer versions of jQuery Mobile and Google Maps v3 are a little bit special.
Your first problem was using pageinit event to the the calculation. At that point you cant get a correct page height and width. So instead use pageshow, you will find it working in my example.
Before you show the map you need to resize its content DIV. This is because content div will resize according to available inner elements. So we need to fix this manually, through javascript or CSS. I already have a answer on that question: google map not full screen after upgrade to jquerymobile 1.2 but I can also show you a working example:
Working example
Working jsFiddle example: http://jsfiddle.net/Gajotres/GHZc8/ (Javascript solution, CSS solution can be found in a bottom link).
Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
Javascript
Here's a function used to calculate correct page height:
$('#map_canvas').css('height',getRealContentHeight());
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
Another solution
There's also another solution to this problem that only uses CSS and it can be found HERE. I prefer this solution cause it don't require javascript to correctly fix the map height.
CSS:
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
One last thing
Also if page width is still incorrect just set it to 100%:
$('#map_canvas').css('width', '100%');
I have had this issue for months banging my head against the wall trying to find a solution. Even setting the style properties for the content and map-canavas divs did not solve all the problems. google.maps.event.trigger(map, "resize") did not do it either. The map was full screen now but still centered in the top left. And if you called your initialize functions on every pageshow the map would reset back to its original position each time.
I was able to come up with this called on the pageshow event and solved all my problems!
$('map-page').on("pageshow", function() {
var latLng = map.getCenter();
google.maps.event.trigger(map,'resize');
map.setCenter(latLng);
});
CSS
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.ui-page { -webkit-backface-visibility: hidden; }
</style>
Here is my content and map-canvas div.
<div data-role="content" id="mapContent" style="padding:0;position:absolute;
top:40px;right:0px;bottom:60px;left:0px; ">
<div id="map-canvas" style="width:100%;" >
</div>
</div><!-- /Content -->
It gets the current center of the map, resizes the map to the current div, then sets the map center. This way, if the user navigates away from the page and comes back, the map does not lose its position.
Hope this helps.
Robert
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);
}
});