so i have added 2 ion-scroll on my page.
example code is here: http://codepen.io/anon/pen/QNNExR
the first ion-scroll works properly, i can scroll left-right.
for the second ion-scroll, where there are lots of 'test' paragraphs.I cant scroll vertically (top - bottom). It always bounces back once i scorll a bit further than the screen height.
note: i didnt set height to the ion-scroll or the content inside the ion-scroll as the height is not fixed (eg: ion-scroll height depends on screen size, should fill the rest of screen height and content height depends on content length)
what did i do wrong? thanks.
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic vertical and horizontal Scroll</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic vertical and horizontal Scroll</h1>
</ion-header-bar>
<ion-pane>
<ion-content>
<div>
<ion-scroll zooming="false" direction="x" scrollbar-x="false" scrollbar-y="false" has-bouncing="true" style="width: 100%;">
123
</ion-scroll>
</div>
<div>
<ion-scroll zooming="false" direction="y" style="width: 100%; height: 100%">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</ion-scroll>
</div>
</ion-content>
</ion-pane>
</body>
</html>
added this in your controller with $ionicScrollDelegate, $timeout injector:
$timeout(function(){
//return false; // <--- comment this to "fix" the problem
var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
$timeout(function(){
//return false; // <--- comment this to "fix" the problem
var sv = $ionicScrollDelegate.$getByHandle('horizontal2').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
Related
I'm trying to make the map move inside it, dragging the map to the side, so I can get around the map.
But this is only being possible onmousedown on map1, when choosing map2 the map does not move, it is not possible to drag it.
When clicking on the map1 button the map appears and it is possible to move within it, but after I click on the map2 button it is no longer possible to move within the map.
Follow the code of what is happening.
How could this be fixed?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div style="margin: 10px">
<button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
</div>
<div style="margin: 10px">
<button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
</div>
<div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>
<script>
function maps(location) {
var container = L.DomUtil.get('mapid');
if(container != null){
container._leaflet_id = null;
}
var map = L.map( 'mapid', {
center: [location[1], location[2]],
minZoom: 2,
zoom: 13
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])
}
</script>
</body>
</html>
I found the problem, I needed to change the way the map was initialized, follow the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div style="margin: 10px">
<button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
</div>
<div style="margin: 10px">
<button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
</div>
<div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>
<script>
var map = null; //added
function maps(location) {
//var container = L.DomUtil.get('mapid'); //removed
//if(container != null){ //removed
// container._leaflet_id = null; //removed
//}
if (map !== undefined && map !== null) { map.remove(); }//added
map = L.map( 'mapid', { //alterated
center: [location[1], location[2]],
minZoom: 2,
zoom: 13
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])
}
</script>
</body>
</html>
I am playing with JSSOR slider, it works perfect in fullwidth modal until we used GoTo() method to go to the specifed slide. For example, when slideshow initialised at slide (0) (no GoTo()), ScaleSlider() works. But when we tryin to force show slide (22), slider is showing within default boundaries (960x640). Maybe this is due to the use of LazyLoad ()? But by default (without GoTo()) it works fine with LazyLoad.
I use almost everything by default, no changes in the main code, even in options, only added strings
var jssor_slider_go = new $JssorSlider$("jssor_1");
jssor_slider_go.$GoTo(22);
after jssor container to force GoTo() method. BTW, The method works fine.
...
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jssor.slider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: 0,
$Idle: 2000,
$SlideEasing: $Jease$.$InOutSine,
$DragOrientation: 3,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
jssor_1_slider.$Elmt.style.margin = "";
var MAX_WIDTH = 10000;
var MAX_HEIGHT = 10000;
var MAX_BLEEDING = 0.1;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var originalWidth = jssor_1_slider.$OriginalWidth();
var originalHeight = jssor_1_slider.$OriginalHeight();
var containerHeight = containerElement.clientHeight || originalHeight;
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
var expectedHeight = Math.min(MAX_HEIGHT || containerHeight, containerHeight);
jssor_1_slider.$ScaleSize(expectedWidth, expectedHeight, MAX_BLEEDING);
jssor_1_slider.$Elmt.style.top = ((containerHeight - expectedHeight) / 2) + "px";
jssor_1_slider.$Elmt.style.left = ((containerWidth - expectedWidth) / 2) + "px";
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
function OnOrientationChange() {
ScaleSlider();
window.setTimeout(ScaleSlider, 800);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", OnOrientationChange);
});
</script>
<style>
html, body {
position:absolute;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.jssorb064 {position:absolute;}
.jssorb064 .i {position:absolute;cursor:pointer;}
.jssorb064 .i .b {fill:#000;fill-opacity:.5;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
.jssorb064 .i:hover .b {fill-opacity:.8;}
.jssorb064 .iav .b {fill:#ffe200;fill-opacity:1;stroke:#ffaa00;stroke-opacity:.7;stroke-width:2000;}
.jssorb064 .iav:hover .b {fill-opacity:.6;}
.jssorb064 .i.idn {opacity:.3;}
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}
</style>
<div style="position:relative;top:0;left:0;width:100%;height:100%;overflow:hidden;">
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:960px;height:640px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;margin:0 auto; width:960px; height:640px; overflow:hidden;">
<div>
<img data-u="image" data-src2="/images/gallery424/20190724123946_20.jpg">
</div>
<div>
<img data-u="image" data-src2="/images/gallery424/20190724123946_19.jpg">
</div>
<div>
<img data-u="image" data-src2="/images/gallery424/20190724123945_18.jpg">
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
</svg>
</div>
<div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
</svg>
</div>
</div>
</div>
</div>
<script>
var jssor_slider_go = new $JssorSlider$("jssor_1");
jssor_slider_go.$GoTo(22);
</script>
...
for some reason, the var jssor_slider_go = new $JssorSlider$("jssor_1");, initializes in delay mode. That's to say, `jssor_slider_go.$GoTo(22);' can't work before initialiation of jssor slider.
Use one of the following ways as workaround,
var jssor_1_options = { $StartIndex: 22 };
var jssor_slider_go = new $JssorSlider$("jssor_1", jssor_1_options);
See https://www.jssor.com/development/api-options.html
use setTimeout to run jssor_slider_go.$GoTo(22);
Good one:
var jssor_1_options = {
$StartIndex: 14,
$AutoPlay: 0,
$Idle: 2000,
$SlideEasing: $Jease$.$InOutSine,
$DragOrientation: 3,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
And then:
var MAX_WIDTH = 10000;
var MAX_HEIGHT = 10000;
var MAX_BLEEDING = 0;
Hi I have Date picker on select Date Month & Year it will show all Date in that Moth it working Fine
Now I want to add a Slider On that so that i used Owl Curasol after adding Curasol Date picker Stopped Working.
My Full code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css">
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html='';
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
html += '<div class="datediv">div-'+i+'<br>'+n+'</div>';
}
$('#datecontent').html(html);
}
});
$(document).ready(function() {
$(document).live('click', '.datediv', function() { alert("hello"); });});
});
</script>
Html Code
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" id="owl-demo">
</div>
Owl Script
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/assets/js/jquery-1.9.1.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
</script>
I got This error TypeError: $(...).datepicker is not a function
How to fix this issue. I think because of Jquery Conflict Only
How to over come on this??
Hope this helps!
You should use the add method in carousel to append items inside carousel.Also use refresh to run the slider after appending.
owl.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']).trigger('refresh.owl.carousel');
use remove method to remove items from carousel before appending new items.
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
$(document).ready(function() {
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
owl
.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>'])
.trigger('refresh.owl.carousel');
}
}
});
$(document).on('click', '.datediv', function() { alert("hello"); });
var owl = $(".owl-demo");
owl.owlCarousel({
margin: 20,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
.owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" class="owl-demo">
</div>
I am trying to develop a mobile application with Ionic framework. It works in the web application, but when it is installed in smartphone, it does not work any more.
code index.html
<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.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="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAXp19GmxccWT5A5vVgtQK5NHCaZDb_W0I">
</script>
</head>
<body ng-app="phonegp">
<div class="tabs tabs-icon-top">
<a class="tab-item" ui-sref="actualite">
<i class="icon ion-document-text"></i>
Actualité
</a>
<a class="tab-item" ui-sref="contact">
<i class="icon ion-star"></i>
Contact
</a>
<a class="tab-item" ui-sref="geo">
<i class="icon ion-location"></i>
Géo Localisation
</a>
<a class="tab-item" ui-sref="config">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="actualite">Actualite</ion-item>
<ion-item menu-close ui-sref="contact">Contact</ion-item>
<ion-item menu-close ui-sref="geo">Géo Localisation</ion-item>
<ion-item menu-close ui-sref="config">Settings</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
code app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
app = angular.module('phonegp', ['ionic','ngCordova','ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("actualite",{
url : "/actualite",
templateUrl : "templates/actualite.html",
controller:"getactualites"
});
$stateProvider.state("infoActualite",{
url : "/infoAlite",
templateUrl : "templates/infoActualite.html",
controller:"infoActualiteCtrl"
});
$stateProvider.state("contact",{
url : "/contact",
templateUrl : "templates/contact.html"
});
$stateProvider.state("geo",{
url : "/geo",
templateUrl : "templates/geo.html",
controller:"GeoCtrl"
});
$stateProvider.state("config",{
url : "/config",
templateUrl : "templates/config.html"
});
//pour afficher page index
$urlRouterProvider.otherwise("actualite");
})
app.factory("StorageService",function($localStorage){
$localStorage = $localStorage.$default({
trajet: []
});
return {
savePosition:function(pos) {
$localStorage.trajet.push(pos);
},
getAllPositions:function(){
return $localStorage.trajet;
}
}
});
app.controller("getactualites",function($scope,$http,$stateParams){
$http.get('http://192.168.1.4/pfe/web/app_dev.php/api/users')
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});
app.controller("infoActualiteCtrl",function($scope,$http){
});
app.controller("GeoCtrl",function($scope,$cordovaGeolocation,StorageService){
var counter;
var currentLatitude;
var currentLongitude;
var markers = [];
var options = {
timeout:10000,
enableHighAccuracy:true
};
$cordovaGeolocation.getCurrentPosition(options)
.then(function(position){
currentLatitude = position.coords.latitude;
currentLongitude = position.longitude;
$scope.position = position;
var latLng= new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById('map'),mapOptions);
$scope.map=theMap;
$scope.newMarker(position,theMap);
$scope.watchPosition(theMap);
},
function(err) { console.log(err); }
);
$scope.watchPosition=function(theMap){
var watchOptions = {
timeout: 2000,
enableHighAccuracy: true
};
watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
//console.log(err);
},
function(position){
//console.log(position);
if ((position.coords.longitude!=currentLongitude) &&
(position.coords.latitude!=currentLatitude)){
$scope.position = position;
$scope.newMarker(position,theMap);
}
}
);
}
$scope.newMarker=function(position,theMap){
latLng= new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);
marker = new google.maps.Marker({
position:latLng,
title: "Position"+(++counter),
label: "H"
});
marker.setMap(theMap);
markers.push(marker);
StorageService.savePosition({
lat:position.coords.latitude,
lng: position.coords.longitude
});
}
$scope.showMarker=function(p){
latLng = new google.maps.LatLng(p.lat, p.lng);
marker = new google.maps.Marker({
position:latLng,
label: "H"
});
marker.setMap($scope.map);
markers.push(marker);
}
$scope.hideMarkers=function(){
markers.forEach(function(m){
m.setMap(null);
})
}
$scope.showTrajet= function () {
traj =StorageService.getAllPositions();
traj.forEach(function(p){
$scope.showMarker(p);
});
}
});
code style.css
.contact h5 {
font-weight: bold;
color:#444;
margin-left: 30px;
padding: 8px;
}
.image img {
margin:30px 0 0 40px;
border-radius: 50%;
width:150px;
height:150px;
padding: 10px;
}
.scroll {
height: 100%;
}
#map {
width:100%; height: 100%;
}
.icon {
text-align: center;
padding: 10px;
}
.icon img {
margin-right: 10px;
}
this is screenshot of problemes
enter image description here
Is yout plugins folder in your app's root/main (Same directory as WWW) if not
keep plugins folder in your app's Root directory then create platform with
ionic platform add android
and later app with
ionic build android
try this out
note: replace android with ios in above commands according to your requirement
We have been playing around with the canvas element, but are encountering sluggishness on Mobile Safari whereas the app works smoothly on the desktop.
The test app is very primitive. It just lets the user draw a line using the mouse on a desktop or a finger on smart phones.
In Mobile Safari, the drawing of the line is often very jerky. The first bit of a line will render in real-time, but the rest won't render until after the finger is lifted from the screen.
Any ideas why?
Code below.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' />
<script src='http://code.jquery.com/jquery-1.6.4.min.js'></script>
<script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script>
<style type='text/css'>
#canvas { border:1px solid red }
</style>
</head>
<body>
<div id='draw_page' data-role='page'>
<canvas id="canvas" width="500" height="350"></canvas>
</div>
<script type="text/javascript">
$('#draw_page').live('pageinit', function() {
prep_canvas();
});
</script>
</body>
</html>
JavaScript:
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var canvas;
var context;
function prep_canvas() {
canvas = $('#canvas')[0];
context = canvas.getContext("2d");
}
$('#canvas').live('vmousedown', function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').live('vmousemove', function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').live('vmouseup', function(e){
paint = false;
});
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "black";
context.lineJoin = "round";
context.lineWidth = 2;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
I followed this: http://dev.opera.com/articles/view/html5-canvas-painting/ and it works fluidly on the phone (you'll see a commented out line for img_update() which is used in the two canvas method mentioned by BumbleB2na...but I wasn't using any shapes, just lines, so left it out)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="startup-iphone.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Untitled Document</title>
<style type="text/css">
body {background:#ccc; margin:0; padding:0}
html {margin:0; padding:0;}
#container { position: relative; margin:0; padding:0px; }
#canvas { border: 1px solid #000; background-color:#FFF; position:relative; width:298px; margin-left:11px; margin-top:5px; }
</style>
</head>
<body onload="listen()">
<div id="container">
<canvas id="canvas" width="298" height="298">
</canvas><br/>
<button onclick="clearImage()">Clear</button>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
if(canvas){var context= canvas.getContext('2d');}
var tool;
tool = new tool_pencil();
document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false);
function listen(){
canvas = document.getElementById('canvas');
if(canvas){
context= canvas.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, canvas.width, canvas.height);
iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if(iphone||ipad){
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchend', ev_canvas, false);
canvas.addEventListener('touchmove', ev_canvas, false);
}
else{
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
}
}
function tool_pencil () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
//img_update();
}
};
this.touchstart = function (ev) {
ev.preventDefault();
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.touchmove = function (ev) {
ev.preventDefault();
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.touchend = function (ev) {
ev.preventDefault();
if (tool.started) {
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse position relative to the canvas element.
function ev_canvas (ev) {
iphone = ((window.navigator.userAgent.match('iPhone'))||(window.navigator.userAgent.match('iPod')))?true:false;
ipad = (window.navigator.userAgent.match('iPad'))?true:false;
if (((iphone)||(ipad))&&(ev.touches[0])){ //iPad
ev._x = ev.touches[0].clientX;
ev._y = ev.touches[0].clientY;
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
function clearImage(){
var yes=confirm('Clear drawing?');
if(yes){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
</script>
</html>