Here is my code for fullcalendar and i am trying to open calendar events in a dialog in Android. I tried all the ways and suggestions but failed. Can anyone suggest who has tried this in android ? Currently it is opening up in a browser in android onClick of event, i want to show in dialog. Thanks in advance
<html>
<head>
<script src='../jquery/jquery-1.9.1.min.js'></script>
<script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src="../jquery/jquery.ui.touch-punch.min.js"></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../fullcalendar/gcal.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// US Holidays
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
},
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
});
</script>
<style>
body {
margin-top: 25px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
font-size: 9px;
}
#calendar {
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading' style='display:none'>Please Wait....Loading....</div>
<div id='calendar'></div>
</body>
</html>
I ran into the same problem, and here is how to get around it.
The problem arises because in Adam Shaw's most excellent FullCalendar plugin (v1), he is attaching event handlers to the calendar events lazily, on the event container mouseover. The problem is that Android does not implement the mouseover event properly, so the click handler doesn't get initialized.
One workaround is either to change the code in his plugin around line 1707 from:
container.unbind('mouseover').mouseover(function(ev) {
to
container.unbind('click').click(function(ev) {
However, this will require you to click on an event to initialize any other events, so if you have hover events on the calendar event (which I guess you wouldn't since you're doing mobile dev), this method won't work.
The alternative, which I do, but defeats his lazy event initialization, is to add the following to your calendar initialization options:
eventAfterAllRender: function(){
// hack to trigger event binding on android chrome, which doesn't trigger mouseover events
$('.fc-event').each(function(i, element){
$(element).trigger('mouseover', {});
})
}
What this does is immediately trigger the mouseover event on all events in the calendar, thereby triggering the attachHandler on all calendar events.
Related
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>
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 debugged the css used with version 2 player.js (0002/player.js) and found the css below for the RED Overlay i want to remove from my default receiver.
from player.css
#player[type="video"][state="idle"]:after {
content: "SAMPLE";
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
text-align: center;
font-size: 50px;
margin-top: -150px;
opacity: 0.1;
color: red;
}
As the default player.js cycles thru states [IDLE PLAY BUFFER] the red , transparent overlay, "SAMPLE" is displayed.
I want to get rid of that feature when i play my own mp4s.
So, I removed the offending css above and i hosted the new css file without the red sample.
I went to the dev console for "Google Cast SDK" and changed the custom style to the URL for my hosted CSS file.
I wait 4 hours.
I reboot the chromecast device.
I manually reload the window in the debugger console for the device.
And , i still see the old CSS with the red SAMPLE.
What do i have to change to get rid of that CSS on the player.js used with the default receiver?
Below is the html loaded in the debugger for the chromecast device by my android app.
<html><head>
<title>Cast Media Player</title>
<link rel="stylesheet" href="0002/player.css">
<script type="text/javascript" src="0002/player.js"></script><link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gtv-videos-bucket/receivers/f742e4109ea711e3a5e20800200c9a66/style.css">
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/0.3.0/media_player.js"></script>
</head>
<body>
<div id="player" class="gcpa" type="video" state="playing"><div class="background"></div><div class="gcpb" style=""><video style="background-image: none;" src="http://....0685/fade0569-bd5b-4cc2-a05d-85cb24860c56-20140430101403.mp4"></video><div class="logo"></div><div class="gcpr"></div><div class="splash"></div><div class="watermark"></div><div class="gcpc"></div><div class="gcpd"><div class="gcph"><div class="gcpg" style="background-image: url(http://.....ecb7c32-me1563624197.jpg);"></div><div class="gcpf"><div class="gcpi">the light the Divinity t</div><div class="gcpj"><div><span>robrowntree</span></div><div><span>the light the Divinity the absolute poise Aaron rumpled beds at morning </span></div></div></div></div><div class="gcpk"><span class="gcpl"></span><span class="gcpp">00:08</span><span class="gcpq">00:10</span><div class="gcpm"><div class="gcpn progressBar" style="width: 80%;"></div><div class="gcpo" style="left: 80%;"></div></div></div></div></div><div class="message"></div></div>
<script>
var playerDiv = document.querySelector("#player");
new castplayer.CastPlayer(playerDiv).start();
</script>
</body></html>
If you use the applicationId "CC1AD845", then the SAMPLE is removed.
This is the default application ID and defined by constant CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID.
I am not clear what the issue is here. If you use the "Default Receiver" or your own Styled Receiver, there will be no SAMPLE watermark at all; if you use the receiver that CastVideos app is using, you'll see that big red watermarking (which you will not be able to remove).
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);
}
});
I have an Android app using webview to load and display html pages.
But when a new page has just been loaded into the webview, there is sometimes a element which is already hovered. For example the element with id "imhovered" is already hovered and has the blue background of the div (see code below). This happens quite randomly depending on the element structure of the current page and the position of the touch from the user in the previous page.
html code:
<body>
<a href="link1" class="menu">
<div class="qlink">here is div1</div>
</a>
<a href="link2" class="menu">
<div class="qlink"> here is div2 </div>
</a>
<a id="imhovered" href="link3" class="menu">
<div class="qlink">here is div3</div>
</a>
</body>
and the styles:
.menu {
color: red;
text-decoration:none;
font-family:sans-serif;
font-size: 28px;
}
.menu:hover {
color: red;
background-color: green;
}
.qlink {
padding-left: 84px;
padding-top: 24px;
padding-bottom: 20px;
background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlink:hover {
background-color:blue;
}
My question is how to remove this wrong hovered state of the element ?
I have tried to find a solution for a while with researching and own experimenting but still have no success. Following are what i find out during my experiments:
webview.clearFocus() -> not work
javascript/jquery when dom is ready:
$(document).ready(function () {
alert($("*:hover").attr("id"));--> result:undefined
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
});
this means that when the dom is ready, there is no focused or hovered element.
javascript/jquery in body onload (when page is loaded):
alert($("*:hover").attr("id")); --> result:imhovered
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
this means that the hovered state has just appeared now as the page has just been loaded. Is it now too late to do any style modification because the wrong hovered background is already displayed? Is it a bug of webkit/android? I hope you guys can give me any advice to solve this. Thanks in advance!
i finally find out that when the loading process is quick enough, user will not see the style modification, so i do the following style modification and it solves my problem:
window.onload =
function() {
var imhovered = $("*:hover");
var children = imhovered.children();
children.removeClass("qlink").addClass("qlinkNoHover");
imhovered.bind('touchstart touchend', function() {
$(this).children().toggleClass('qlinkFixHovered');
});
}
.qlinkNoHover {
background-color:transparent;
padding-left: 84px;
padding-top: 24px;
padding-bottom: 20px;
background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlinkFixHovered {
background-color:blue !important;
}
i hope this could help someone who has the same problem.