Develop Reference

Ionic Angular Google maps javascript API works on Browser and Ios but not on Android

I'm having real trouble trying to figure out why my code runs easily on both web and ios but shows a blank div on Android without any errors.
I'm using Ionic Angular and I've already triple checked Api keys.
My guess is that it has something to do with shadow-root but I failed in every attempt to fix it.
I'd be super gratefull for any insight I might be missing, Thanks in advance!
HTML:
<ion-content fullscreen class="mapContent">
<ion-grid class="container mapContent">
<ion-row class="mapContent">
<div #map id="map" class="map"></div>
</ion-row>
</ion-grid>
</ion-content>
TS:
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(
private geolocation: Geolocation,
) {}
ionViewDidEnter() {
this.loadGoogleMaps();
}
loadGoogleMaps(){
window['mapInit'] = () => {
this.initMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
document.body.appendChild(script);
}
initMap(){
this.mapInitialised = true;
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.addListener("click", (e) => {
this.placeMarker(e.latLng, this.map);
});
});
}
CSS:
ion-content.mapContent {
--background: transparent !important;
}
ion-grid.mapContent {
--background: transparent !important;
}
ion-row.mapContent {
--background: transparent !important;
}
.map {
margin: 10px 5px 20px;
border-radius: 20px;
width: 100%;
height: 200px;
}

How to get native app feeling in Navigation drawer (Menu) in ionic application

Is there any way to get the native look and feeling in Navigation drawer(Menu) in ionic v1 application rather than pushing the center content?
I want to get the Android native look and feel in ionic application like above picture.

Though this is an old question and Ionic v2+ is currently available with this native Navigation drawer features (<ion-menu>). I just thought to share some code that shows how to implement this feature in Ionic v1 app. I think it will help to those who are still using Ionic v1 in their mobile app. Also Ionic v2+ implementation could be found at the end of this post.
Ionic v1
I just created a sample Ionic v1 app using their ready-made sidemenu app template.
ionic start myApp sidemenu --type ionic1
Then I created the following nativeSideMenu.js file inside js folder.
(function () {
'use strict';
angular.module('ionic.contrib.NativeDrawer', ['ionic'])
.controller('drawerCtrl', ['$rootScope', '$scope', '$element', '$attrs', '$ionicGesture', '$ionicBody', '$document', function ($rootScope, $scope, $element, $attr, $ionicGesture, $ionicBody, $document) {
var el = document.querySelectorAll("drawer")[0];
var mainContent = angular.element(document.querySelectorAll("ion-pane")[0]);
var dragging = false;
var startX, lastX, offsetX, newX, startY, lastY, offsetY, newY;
var side;
var isOpen = false;
var primaryScrollAxis = null;
mainContent.addClass('drawer-content');
// How far to drag before triggering
var thresholdX = 10;
// How far from edge before triggering
var edgeX = 40;
// Width of drawer set in css
var drawerWidth = 270;
var LEFT = 0;
var RIGHT = 1;
var isTargetDrag = false;
var isContentDrag = false;
var width = $element[0].clientWidth;
var height = $element[0].clientHeight;
var enableAnimation = function () {
angular.element(el).addClass('animate');
};
var disableAnimation = function () {
angular.element(el).removeClass('animate');
};
// Check if this is on target or not
var isTarget = function (el) {
while (el) {
if (el === $element[0]) {
return true;
}
el = el.parentNode;
}
};
var startDrag = function (e) {
disableAnimation();
dragging = true;
offsetX = lastX - startX;
offsetY = lastY - startY;
$ionicBody.addClass('drawer-open');
};
var startTargetDrag = function (e) {
disableAnimation();
dragging = true;
isTargetDrag = true;
offsetX = lastX - startX;
offsetY = lastY - startY;
};
var doEndDrag = function (e) {
startX = null;
lastX = null;
offsetX = null;
startY = null;
lastY = null;
offsetY = null;
isTargetDrag = false;
if (!dragging) {
return;
}
dragging = false;
enableAnimation();
if (isOpen && newX < (-width / 3)) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + (-width - 5) + 'px, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
} else if (newX < (-width / 1.5)) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + (-width - 5) + 'px, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(0px, 0, 0)';
$ionicBody.addClass('drawer-open');
isOpen = true;
}
};
var doEndContentDrag = function (e) {
if (startX > lastX) {
startX = null;
lastX = null;
offsetX = null;
startY = null;
lastY = null;
offsetY = null;
isTargetDrag = false;
isContentDrag = false;
if (!dragging) {
return;
}
dragging = false;
enableAnimation();
el.style.transform = el.style.webkitTransform = 'translate3d(-101%, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
}
else {
el.style.transform = el.style.webkitTransform = 'translate3d(0 0, 0)';
}
};
var doDrag = function (e) {
if (e.defaultPrevented) {
return;
}
if (!lastX) {
startX = e.gesture.touches[0].pageX;
}
if (!lastY) {
startY = e.gesture.touches[0].pageY;
}
lastX = e.gesture.touches[0].pageX;
lastY = e.gesture.touches[0].pageY;
if (!dragging) {
// Dragged 15 pixels and finger is by edge
if (Math.abs(lastX - startX) > thresholdX) {
if (isTarget(e.target)) {
startTargetDrag(e);
} else if (startX < edgeX) {
startDrag(e);
}
}
// Closing from outside of drawer
else if (isOpen && startX > width) {
disableAnimation();
dragging = true;
isContentDrag = true;
}
} else {
newX = Math.min(0, (-width + (lastX - offsetX)));
newY = Math.min(0, (-height + (lastY - offsetY)));
var absX = Math.abs(lastX - startX);
var absY = Math.abs(lastY - startY);
if (isContentDrag && lastX < startX) {
var drawerOffsetX = lastX - drawerWidth;
el.style.transform = el.style.webkitTransform = 'translate3d(' + -absX + 'px, 0, 0)';
}
else if (isTargetDrag && absX > absY + 5) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
}
}
if (dragging) {
e.gesture.srcEvent.preventDefault();
}
};
side = $attr.side == 'left' ? LEFT : RIGHT;
var dragFunction = function (e) {
if (el.attributes.candrag) {
doDrag(e);
}
};
var dragEndFunction = function (e) {
if (el.attributes.candrag) {
doEndDrag(e);
}
};
var onContentDrag = function (e) {
if (isOpen) {
doDrag(e);
}
};
var onContentTap = function (e) {
if (isOpen) {
closeDrawer();
e.gesture.srcEvent.preventDefault();
}
};
var contentDragEndFunction = function (e) {
if (isOpen) {
doEndContentDrag(e);
e.gesture.srcEvent.preventDefault();
}
};
var openDrawer = function () {
enableAnimation();
el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
$ionicBody.addClass('drawer-open');
isOpen = true;
};
var closeDrawer = function () {
enableAnimation();
el.style.transform = el.style.webkitTransform = 'translate3d(-101%, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
};
var toggleDrawer = function () {
if (isOpen) {
closeDrawer();
} else {
openDrawer();
}
};
this.close = function () {
closeDrawer();
};
$rootScope.toggleDrawerRoot = function () {
toggleDrawer();
};
this.open = function () {
openDrawer();
};
this.toggle = function () {
toggleDrawer();
};
$ionicGesture.on('drag', function (e) {
doDrag(e);
}, $document);
$ionicGesture.on('dragend', function (e) {
doEndDrag(e);
}, $document);
var dragGesture = $ionicGesture.on('drag', dragFunction, $document);
var dragEndGesture = $ionicGesture.on('dragend', dragEndFunction, $document);
var contentTapGesture = $ionicGesture.on('tap', onContentTap, mainContent);
var contentDragGesture = $ionicGesture.on('drag', onContentDrag, mainContent);
var contentDragEndGesture = $ionicGesture.on('dragend', contentDragEndFunction, mainContent);
$scope.$on('$destroy', function () {
$ionicGesture.off(dragGesture, 'drag', dragFunction);
$ionicGesture.off(dragEndGesture, 'dragend', dragEndFunction);
$ionicGesture.off(contentTapGesture, 'tap', onContentTap);
$ionicGesture.off(contentDragGesture, 'drag', onContentDrag);
$ionicGesture.off(contentDragEndGesture, 'dragend', contentDragEndFunction);
});
}])
.directive('drawer', ['$rootScope', '$ionicGesture', function ($rootScope, $ionicGesture) {
return {
restrict: 'E',
controller: 'drawerCtrl',
link: function ($scope, $element, $attr, ctrl) {
$element.addClass($attr.side);
$scope.openDrawer = function () {
ctrl.open();
};
$scope.closeDrawer = function () {
ctrl.close();
};
$scope.toggleDrawer = function () {
ctrl.toggle();
};
}
}
}])
.directive('menuAndDrawerToggle', ['$rootScope', '$ionicGesture', function ($rootScope, $ionicGesture) {
return {
controller: '',
link: function ($scope, $element, $attr) {
$element.bind('click', function () {
$rootScope.toggleDrawerRoot();
});
}
};
}])
.directive('menuAndDrawerClose', ['$ionicViewService', function ($ionicViewService) {
return {
restrict: 'AC',
require: '^drawer',
link: function ($scope, $element, $attr, ctrl) {
$element.bind('click', function () {
ctrl.close();
});
}
};
}]);
})();
And also created the following nativeSideMenu.css file inside css folder
drawer {
display: block;
position: fixed;
width: 270px;
height: 100%;
z-index: 100;
background-color:white;
}
drawer .header-menu{
margin-top:0px;
padding-top:0px;
}
drawer .header-menu ion-list .list{
padding-top:0px;
}
drawer.animate {
-webkit-transition: all ease-in-out 400ms;
transition: all ease-in-out 400ms;
}
drawer.left {
-webkit-transform: translate3d(-101%, 0, 0);
transform: translate3d(-101%, 0, 0);
box-shadow: 1px 5px 10px rgba(0,0,0,0.3);
}
drawer.right {
right: 0;
top: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.drawer-open .drawer-content .pane, .drawer-open .drawer-content .scroll-content {
pointer-events: none;
opacity:0.2;
}
drawer .item-icon-left .icon{
font-size: 24px;
padding-bottom: 2px;
}
ion-side-menu .current a.item-content,ion-side-menu .clickable.current, drawer .current a.item-content, drawer .clickable.current {
color:#343434 !important;
}
drawer a.item-content, drawer .clickable{
color: #858585;
font-size:20px;
}
drawer .item-complex .item-content{
padding-top:16px;
padding-bottom:16px;
font-size:20px;
}
/*This section would normally have .platform-android at the front */
.platform-android4_0 drawer.left{
box-shadow: none;
border-left:0px;
border-right:0px;
}
.header-menu{
top:0px;
bottom:44px;
}
.menu .scroll-content {
top: 42px;
}
.menu-content{
box-shadow: none;
}
.drawer-open ion-pane.pane{
background-color: rgb(0,0,0);
}
.drawer-open view{
background-color: rgb(0,0,0);
}
.ion-view.pane{
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.menu-open ion-view.pane, .drawer-open ion-view.pane{
/* opacity:0.4;
*/
}
.bar .title.no-nav{
text-align: left;
left: 0px !important;
}
.bar .button-icon.ion-navicon{
margin-left: -20px;
padding-right: 20px;
}
.bar .title{
text-align: left;
left: 16px !important;
}
.modal-wrapper .bar .title{
text-align: center;
left: 0px !important;
}
.bar .title.title-center{
text-align: center;
left: 0px !important;
right: 0px !important;
}
.ion-ios7-arrow-back:before{
content:"\f2ca";
}
.bar .button.button-icon.ion-ios7-arrow-back:before{
font-size: 17px;
line-height: 32px;
padding-right: 100px;
}
After that I added reference links to index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/nativeSideMenu.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/nativeSideMenu.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Then I included the ionic.contrib.NativeDrawer in angular.module in app.js file.
angular.module('starter', ['ionic', 'starter.controllers','ionic.contrib.NativeDrawer'])
After that I updated the code of menu.html file inside templates folder like below.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-positive-900">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-and-drawer-toggle>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-pane drawer-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-pane>
</ion-side-menu-content>
<drawer side="left">
<ion-content>
<ion-list>
<ion-item menu-and-drawer-close ng-click="login()">
Login
</ion-item>
<ion-item menu-and-drawer-close href="#/app/search">
Search
</ion-item>
<ion-item menu-and-drawer-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-and-drawer-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</drawer>
</ion-side-menus>
Now just run the ionic serve and have the native feeling in Navigation drawer.
Use bellow reference links for more details
Ref. 1
Ref. 2
Ref. 3
Ionic v2+
We do not have that much of work to do in Ionic v2+ because by default it is giving the native feeling of the Navigation drawer. But we could change that behavior by passing the value to type on the <ion-menu>
<ion-menu type="overlay" [content]="mycontent">...</ion-menu>
According to DOC type details as bellow.
The display type of the menu. Default varies based on the mode, see
the menuType in the config. Available options: "overlay", "reveal",
"push".
Hope this will help to someone else!

Google Maps not working using AngularJS and Bootstrap in Android

I am developing a Hybrid mobile application using IBM Worklight 6.2.0 on Android and iOS.
I am using AngularJS with BootstrapUI.
It runs on a browser and on iOS devices, but I am facing issues with Google Maps integration on Android devices.
I have tried many possible solutions but none worked.
Below is my code:
<style>
#content,#map_canvas {
padding: 0;
position: absolute !important;
top: 40px !important;
right: 0;
bottom: 40px !important;
left: 0 !important;
}
</style>
<script>
var map, currentLocation, currentLocationMarker;
function loadMapScript() {
alert("Loading map plz wait : ");
var script = document.createElement("script");
script.type = "text/javascript";
script.id = "googleMaps"
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap";
document.body.appendChild(script);
}
function initializeMap() {
var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude,
currentLocation.coords.longitude);
var mapOptions = {
center : myLatlng,
zoom : 18,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
updateCurrentLocationMarker();
}
function updateCurrentLocationMarker() {
var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude,
currentLocation.coords.longitude);
if (currentLocationMarker) {
currentLocationMarker.setMap(null);
} else {
currentLocationMarker = new google.maps.Marker({
position : myLatlng,
animation : google.maps.Animation.DROP,
title : "You!",
map : map
});
}
}
function onSuccess(position) {
alert("onSuccess called : ");
currentLocation = position;
if (!map) {
loadMapScript();
}
}
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
function onDeviceReady() {
alert("onDeviceReady called : ");
if (navigator && navigator.geolocation) {
alert("everthing is fine");
//navigator.geolocation.getCurrentPosition(onSuccess, onError);
WL.Device.Geo.acquirePosition(onSuccess, onError);
} else {
alert("issue");
}
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<div id="content">
<div id="map_canvas"
style="padding: 0; position: absolute !important; top: 1px !important; right: 0; bottom: 1px !important; left: 0 !important;"></div>
</div>

The URL was blocked by my whitelist in config.xml.Adding ; to config.xml in my native folder worked.:)

Horizontal Scrolling in html5 for dynamically created <li>

I am using Phonegap + jQueryMobile + Android. When I create my <li> static it is working fine, but dynamically it is not working like static. Please check what mistake I did in the code shown below:
In jquery:-
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: processSuccess,
error: processError
});
}
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
$('#cat_list').append('<li><span>'+title+'</span></li>');
});
}
function processError(data)
{
alert("error");
}
$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});
In css:-
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 300px;
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* removing default styling */
margin: 0;
background: url('navigation.png');
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* display: none; */
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
}
/* Here are styles for the back button, don't look at them */
#back {
display: block;
width: 500px;
text-align: center;
color: #003469;
font-size: 16px;
}
In Html5:-
<div data-role="page" data-theme="b" id="jqm-home">
<div class="categories">
<ul id="cat_list"></ul>
</div>
</div>

Try jqMobile + iScrollView + Infinite Scrolling.
For more details please check : Infinite Scrolling
And also You can see a demo here at the plugin site https://github.com/watusi/jquery-mobile-iscrollview

Refresh your ul list
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
$('#cat_list').append('<li><span>'+title+'</span></li>');
});
$('#cat_list').listview('refresh');
}
OR
$('#cat_list').append('<li><span>'+title+'</span></li>').listview('refresh');
EDIT:
function processSuccess(data) {
var data="";
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
data+='<li><span>'+title+'</span></li>';
});
$("#cat_list").html(data).listview('refresh');
}

Try $('#mylist').listview(); to enforce rendering.

Finally i got the answer of these
In HTML5:-
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="footer" data-position="fixed" data-theme="c">
<div class="categories" id="cat">
<ul id="cat_list" class="cat_list_class"></ul>
</div>
</div>
</div>
In jquery:-
var step = 1;
var current = 0;
var maximum = 0;
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul a").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
});
$(document).unbind('click').bind('click', function () {
scroll();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: processSuccess,
error: processError
});
}
var scripts ="";
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
scripts = scripts+'<a class="ids_cat" data-role="button" data-transition="slide" data-inline="true" >' +title+ '</a>';
});
$('#cat_list').append(scripts);
$('#cat_list').trigger('create');
maximum = $(".categories ul a").size();
}
function processError(data)
{
alert("error");
}
function scroll(){
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(event){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
}

Play HTML5 video in fullscreen if the command from server is play

I have a database field which has different commands set to it. For e.g play, pause and stop. The client webpage loops for the command to be play. If the command is play it calls another function call playVideo() and should play a video in full screen. playVideo() function by itself works fine if I call it from onClick event of video tag but does not work as expected when it is called from the server response code. Have a look at the code. I need that working on Chrome Desktop and Chrome mobile browser.
<!DOCTYPE HTML>
<html>
<head>
<title>Demo: HTML5 video controls with JavaScript</title>
<style media="screen" type="text/css">
div.container {
background-color: #ddd;
margin: 0 0 20px;
padding: 1px 1px 0;
width: 1280px;
height: 720px;
}
p {
font: 14px/1.3 Verdana, sans-serif;
}
p.back {
bottom: 20px;
left: 10px;
position: absolute;
}
ul, li, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
overflow: hidden;
padding: 10px 0;
width: 100%;
}
li {
float: left;
}
li.play_pause {
padding-left: 10px;
width: 40px;
}
li.time {
text-align: center;
width: 160px;
}
li.volume {
padding-right: 10px;
width: 100px;
}
.control {
color: red;
cursor: pointer;
}
</style>
<!-- <script src="test_scripts/video.js" type="text/javascript"></script> -->
<script>
//var video = document.getElementById('video');
//video.addEventListener('click', function() {
//video.play();
//}, false);
//init();
window.onload = function() {
var pElement = document.getElementById("video");
pElement.load();
};
/*
var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
*/
function createObject() {
var request_type;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
var nocache = 0;
/*
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width + screen.height);
}, false);*/
window.setInterval(function() {
waitForCommand();
}, 3000);
//waitForCommand();
function init() {
alert("init");
var element = document.getElementById('video');
element.load();
};
function waitForCommand() {
nocache = Math.random();
http.open('get', 'serverside/getcommand.php');
http.onreadystatechange = insertReply;
http.send(null);
}
var statusplay = 0;
function insertReply() {
if (http.readyState == 4) {
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
//alert(response);
if (response == "play" && statusplay == 0) {
alert("asddasd");
statusplay = 1;
var element = document.getElementById('video');
//element.click();
playVideo();
}
}
}
function playVideo() {
alert("123");
//document.getElementById('myvideo').play();
var element = document.getElementById("video");
//element.webkitEnterFullScreen();
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
document.mozRequestFullScreen();
alert("1212");
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
//element.webkitRequestFullScreen();
//document.webkitRequestFullScreen();
alert("1313");
} else {
alert("1414");
element.webkitEnterFullScreen();
}
//element.load();
//element.addEventListener("loaded", doSomething, true);
element.play();
//$('#video').attr({'autoplay':'true'});
}
function doSomething() {
//your redirect code here
alert("12321");
var element = document.getElementById('video');
element.play();
//playVideo();
}
</script>
</head>
<body>
<!--video id="video" src="http://tinyvid.tv/file/12lx2x62kr9io.ogg"></video-->
<div class="container" id="mydiv">
Contact
<style type="text/css">
.video_player {
width: 100%;
height: 100%;
display: block;
}
</style>
<video class="video_player" id="video" name="video" autobuffer onclick="playVideo()" poster="images/video-pc.jpg">
<source src="videos/BigBuck.m4v"> </source>
<source src="videos/BigBuck.webm" type="video/webm"> </source>
<source src="videos/BigBuck.theora.ogv" type="video/ogg"> </source>
</video>
<ul class="controls">
<li class="play_pause">
<p class="control" id="play">
Play
</p>
</li>
<li class="time">
<p>
<span id="timer">1</span>' of <span id="duration">0</span>'
</p>
</li>
<li class="volume">
<p>
Vol: <span class="control" id="v-dn" title="Volume down">-</span> / <span class="control" id="v-up" title="Volume up">+</span><span id="volume">10</span>
</p>
</li>
</ul>
</div>
<!--p><strong>NB:</strong> The video doesn't seem to work in Chrome for Mac/Linux; please use an alternative browser until I can resolve this problem.</p-->
<p class="back">
Back to post: Building HTML5 video controls with JavaScript
</p>
</body>
</html>

Got my answer,
requestFullscreen() can not be called automatically is because of security reasons (at least in Chrome). Therefore it can only be called by:
click (button, link...)
key (keydown, keypress...)
allowfullscreen attribute of the HTML element*
* W3 Spec:
"...To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen..."
Read more: W3 Spec on Fullscreen