I want to enable touch input in fullCalendar and make a fullcalendar website to work in Android ADB and localhost as well. I can access my site in ADB and in localhost, but I can't touch in calendar boxes in android ADB.
I try to include in site header the jQuery UI Touch Punch (punch.js), without success.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/punch.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css.map">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<link rel="stylesheet" type="text/css" href="css/fullcalendar.print.css" media="print">
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.js"></script>
<script type="text/javascript" src="js/script.js"></script>
The script.js contains my calendar and i declare it that way:
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
defaultView: 'month',
editable: true,
selectable: true,
allDaySlot: false,
displayEventTime: true,
slotDuration: '03:00:00',
contentHeight: 'auto',
Then I use functions like:
eventClick: function (event, jsEvent, view) {
endtime = $.fullCalendar.moment(event.end).format('h:mm');
starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
},
I also use Bootstrap style in HTML Declaration:
<div class ="row">
<!-- add calander in this div -->
<div class="container">
<div id="calendar">
</div>
</div>
</div>
In PC Web browser this work as expected, but in android web browser won't react when I touch on calendar event boxes.
Is there any way to make my site to recognize touch on the calendar event boxes?
UPDATE: Drag And Drop Works when I update to latest chrome version in Android 7.0 ADB, but the event clicks and click on blank boxes to add events not work.
To trigger the "select" callback (in order to select an empty space), you must press down on the empty slot on the calendar for 1 second, not just tap. You can adjust the selectLongPressDelay setting if you want to alter that, e.g.
selectLongPressDelay: 25
Meanwhile, eventClick should just work on touch devices without any further adjustment. Here is a demo which illustrates that.
See https://fullcalendar.io/docs/touch for more details.
Related
in an empty HTML page,i try to display a banner including the link of my app
I used this as tutorial:
http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android
For the moment, i just try to make it work locally, in an empty page. This is my page:
<html>
<head>
<title>Hulu Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Hulu LLC">
<meta name="google-play-app" content="app-id=MyAppIdIsHere">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function () {
$.smartbanner({
title: 'Audience Opinion',
author: 'Dunn Solutions Group'
});
})
</script>
</head>
<body>
</body>
</html>
My html page and the js/css files are located in the same folder. there is no problem of path.
Does anyone know why this code does not work ?
Thanks in advance!
The default option is to only display the bar on a either an Android or iOS device. If you open the page on a desktop, nothing appears. You can set the 'force' option to 'windows' in order to have it appear on your desktop.
$(function () { $.smartbanner({ daysHidden: 0, daysReminder: 0, title:'Hulu', force:'windows' }) })
All of the other options can be found on the github page: https://github.com/jasny/jquery.smartbanner
Hi In my android phonegap app,i have used jquery autocomplete feature.I need to get the keyvalue pair in autocomplete
Here is my example code:
var Person = [{"Prateek":"hello"},{"James":"android"}];
$(".searchbox").autocomplete(Person);
When i type 'j' in the textbox i need to get android instead of james in the autocomplete textbox.But i am getting error and result is not shown in textbox.And i am using autocomplete js which can be used also in asp.net
Please guide me where i am wrong.Thanks In Advance
make sure you have the following links, the ordering does matter
<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-ui-1.9.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
then use autocomplete like this
$(".searchbox").autocomplete(source: Person)
jquery ui can be download here http://jqueryui.com/download/
EDIT:
you can also look at listviews at jquery mobile docs
I am new one Android..i created one project in Html...it is running perfectly what i want..i want to run this html project in android emulator..i dont know what is the reason..... Design is came in Android emulator....but drag and drop is only not working in android Emulator.. i have used phonegap to run the html code..if u know pls tel me..Thanks in advance..
This is my Html(jquery code)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by scaillerie</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
});//]]>
</script>
</head>
<body>
<div class="component">Element 1</div>
<div class="component">Element 2</div>
<div class="ui-layout-center"> </div>
</body>
</html>
Unfortunately, jQuery UI doesn't work properly with touch events. There are, however, a number of plugins to enable touch in jQuery UI, Touch Punch is one: http://touchpunch.furf.com/
You should also consider updating the version of jQuery you're using...v1.4.4 is 3 years old now.
When trying to use jqplot in my Android PhoneGap application I get this error:
Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'jqplot' at file:
The graph is supposed to show after pressing a button.
I have exactly the same code running properly on a webpage in Chrome, which shows that the code is correct.
The link below has the same problem but nobody has answered it, so I thought i'd see if anyone has since found a work around.
How to plot jqplot chart inside phonegap app for Android
Includes:
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/jqplot.canvasTextRenderer.js"></script>
jqplot code:
function makegraph() {
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
}
HTML:
<div id="chartdiv" style="height:400px;width:300px; "></div>
Thanks
Found the answer:
put data-ajax="false" in the href tag to force a page reload and the jqplot script will be loaded.
Otherwise put the jqplot script and css files after the data-role="page" tag and the script will be loaded each page transition.
I've got a Phonegap (Cordova 2.0.0) app, built for Android, running with jQuery Mobile + Backbone.js. When I test it on the emulator, it works correctly (runs as in the browser, CSS and JS appear, etc).
When I sign it and install it on a non-debug device, it runs but without the CSS and JS (so basically shows an unstyled HTML document which doesn't run the JS).
The body of my app is as follows:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="libraries/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<script type="text/javascript" charset="utf-8" src="libraries/cordova-2.0.0-ios.js"></script>
<script src="libraries/jquery-1.7.2.min.js"></script>
<script src="libraries/underscore.js"></script>
<script src="libraries/backbone-min.js"></script>
<script src="libraries/backbone.localStorage-min.js"></script>
<script src="libraries/detect.js"></script>
<script type="text/javascript" src="libraries/sha1.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var jqmReady = $.Deferred();
var deviceReady = $.Deferred();
/**
* on load - manages dependency between jquery mobile and phonegap
*/
function onBodyLoad()
{
// get device
$.os = {};
$.os.android = navigator.platform.indexOf("android")>=0;
$.os.ios = navigator.platform.indexOf("iPhone")>=0 || navigator.platform.indexOf("iPad")>=0;
// listen to device ready
if ($.os.android || $.os.ios) {
document.addEventListener("deviceready", deviceReady.resolve, false);
}
else {
// must be in a browser, so immediately resolve
deviceReady.resolve();
}
}
$(document).bind("mobileinit", jqmReady.resolve);
$(document).bind("mobileinit", function() { console.log('mobileinit'); });
$(document).bind('pageinit', function() { console.log('pageinit'); });
// when jquery mobile and device ready, then fire
$.when(jqmReady, deviceReady).then(function() {
console.log('Ready');
// disable push state: http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html
$.mobile.pushStateEnabled = false;
App.init();
});
onBodyLoad();
</script>
</head>
<body onload="" data-lat="" data-lng="">
Has anyone come across this before? I was wondering if it's something to do with the relative paths (rather than absolute?) or how I package it together in Eclipse. Also, on an iPhone it works fine.
Thanks.