I have the following web page where I added:
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
This keeps the page from moving but disables my ability to scroll through timepicker options.
I added the following to stop propagation but it doesn't see to work:
function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('timepicker')
for(let i = 0; i< tp.length; i++){
tp[i].addEventListener("touchmove", allowBehavior, {passive: false});
}
<!DOCTYPE html>
<html >
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/header.css">
<link rel="icon" type="image/png" href="https://sailwbob.com/lagin/favicon.png">
<script src="https://sailwbob.com/lagin/public/js/header.js" type="text/javascript"></script>
</head>
<body>
<div class='container'>
<img id='swb' src="https://sailwbob.com/lagin/public/images/swb.png" alt="SwB">
<div class='img-container'>
<img class='lround small' src="https://sailwbob.com/lagin/public/images/img-1.png" alt="img-1">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-2.png" alt="img-2">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-3.png" alt="img-3">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-4.png" alt="img-4">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-5.png" alt="img-5">
<img class='rround small' src="https://sailwbob.com/lagin/public/images/img-6.png" alt="img-6">
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/test.css">
<div id='res'>
<div id='left' class='cols'>
<p class='narrow'>Date</p>
<p class='bold'>May 11</p>
<p class='narrow'> </p>
<p class='narrow'>Reservation</p>
<p class='narrow'>Sail Time</p>
<p class='narrow'>Crew Time</p>
</div>
<div id='center' class='cols'>
<p class='narrow'>Skipper</p>
<p class='bold'>Bob Smith</p>
<p class='narrow'>Start Time</p>
<p class='narrow bold'>09:00 AM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeStart' class='timepicker' type='text' name='startTime' readonly>
<p id='w0' class='warning'>enter availability</p>
</div>
</div>
<div id='right' class='cols'>
<p class='narrow'>Boat</p>
<p class='bold'>Syrena 40</p>
<p class='narrow'>End Time</p>
<p class='narrow bold'>09:00 PM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeEnd' class='timepicker' type='text' name='startTime' readonly>
<p id='w1' class='warning'>end time > start time</p>
</div>
</div>
</div>
<div id='bottom'>
<p id='bottomLeft' class='narrow'>Crew Status</p>
<p id="bottomRight" class='narrow bold'>OUT</p>
</div>
<div id='submit'>
<div id='spacer'> </div>
<div id='update'>
<a style="text-decoration:none;" href="#" onclick="window.location='mailto:abc#gmail.com ?subject=Note to Skipper'; return false;">
<img src="https://sailwbob.com/lagin/public/images/email-48.png" style="width:48px;height:48px;border:0;">
</a>
<input type='submit' value='update' />
<a style="text-decoration:none" href="tel:(617) 943-5457">
<img src="https://sailwbob.com/lagin/public/images/phone-48.png" style="width:48px;height:48px;border:0;">
</a>
</div>
</div>
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/timepicker/jquery.timepicker133.min.css">
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery-3.6.0.js"></script>
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery.timepicker134.min.js"></script>
<script src="https://sailwbob.com/lagin/public/js/test.js"></script>
<script>
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('timepicker')
for(let i = 0; i< tp.length; i++){
tp[i].addEventListener("touchmove", allowBehavior, {passive: false});
}
</script>
</body>
</html>
The way to fix this is to target the <ul> and not the <input>
<!DOCTYPE html>
<html >
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/header.css">
<link rel="icon" type="image/png" href="https://sailwbob.com/lagin/favicon.png">
<script src="https://sailwbob.com/lagin/public/js/header.js" type="text/javascript"></script>
</head>
<body>
<div class='container'>
<img id='swb' src="https://sailwbob.com/lagin/public/images/swb.png" alt="SwB">
<div class='img-container'>
<img class='lround small' src="https://sailwbob.com/lagin/public/images/img-1.png" alt="img-1">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-2.png" alt="img-2">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-3.png" alt="img-3">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-4.png" alt="img-4">
<img class='small' src="https://sailwbob.com/lagin/public/images/img-5.png" alt="img-5">
<img class='rround small' src="https://sailwbob.com/lagin/public/images/img-6.png" alt="img-6">
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/test.css">
<div id='res'>
<div id='left' class='cols'>
<p class='narrow'>Date</p>
<p class='bold'>May 11</p>
<p class='narrow'> </p>
<p class='narrow'>Reservation</p>
<p class='narrow'>Sail Time</p>
<p class='narrow'>Crew Time</p>
</div>
<div id='center' class='cols'>
<p class='narrow'>Skipper</p>
<p class='bold'>Bob Smith</p>
<p class='narrow'>Start Time</p>
<p class='narrow bold'>09:00 AM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeStart' class='timepicker' type='text' name='startTime' readonly>
<p id='w0' class='warning'>enter availability</p>
</div>
</div>
<div id='right' class='cols'>
<p class='narrow'>Boat</p>
<p class='bold'>Syrena 40</p>
<p class='narrow'>End Time</p>
<p class='narrow bold'>09:00 PM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeEnd' class='timepicker' type='text' name='startTime' readonly>
<p id='w1' class='warning'>end time > start time</p>
</div>
</div>
</div>
<div id='bottom'>
<p id='bottomLeft' class='narrow'>Crew Status</p>
<p id="bottomRight" class='narrow bold'>OUT</p>
</div>
<div id='submit'>
<div id='spacer'> </div>
<div id='update'>
<a style="text-decoration:none;" href="#" onclick="window.location='mailto:abc#gmail.com ?subject=Note to Skipper'; return false;">
<img src="https://sailwbob.com/lagin/public/images/email-48.png" style="width:48px;height:48px;border:0;">
</a>
<input type='submit' value='update' />
<a style="text-decoration:none" href="tel:(617) 943-5457">
<img src="https://sailwbob.com/lagin/public/images/phone-48.png" style="width:48px;height:48px;border:0;">
</a>
</div>
</div>
</div>
<link rel="stylesheet" href="https://sailwbob.com/lagin/public/css/timepicker/jquery.timepicker133.min.css">
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery-3.6.0.js"></script>
<script src="https://sailwbob.com/lagin/public/js/timepicker/jquery.timepicker134.min.js"></script>
<script src="https://sailwbob.com/lagin/public/js/test.js"></script>
<script>
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('ui-timepicker-viewport')
for(let i = 0; i< tp.length; i++){
tp[i].addEventListener("touchmove", allowBehavior, {passive: false});
}
</script>
</body>
</html>
Related
I am trying to do three things:
prevent auto focus of input on mobile
prevent the webpage from moving on mobile
allow touch movement on <ul>
To prevent auto focus of input on mobile:
a) add readonly to input tags
b) add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
To prevent the webpage from moving on mobile:
a) function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
To allow touch movement on <ul> on mobile:
a) function allowBehavior(e){
e.stopPropagation()
}
let tp = document.getElementsByClassName('ui-timepicker-viewport')
tp[0].addEventListener("touchmove", allowBehavior);
This all seems to work most of the time. Occasionally, when scrolling the the <li> elements the entire screen moves. How do I stop that behavior?
NOTE: inputs with class='timepicker' are used by the js timepicker library that places a dropdown with li elements. See link and use on a mobile device to duplicate behavior.
Here's a link to the page https://sailwbob.com/lagin/views/test_form.html
<head>
<title>Reservation</title>
<link rel="stylesheet" href="../public/css/header.css">
<link rel="icon" type="image/png" href="../favicon.png">
<script src="../public/js/header.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:45%;-webkit-width:35vw; }
</style>
</head>
<body style="margin-top:0px;">
<div class='container'>
<img id='swb' src="../public/images/swb.png" alt="SwB">
<div class='img-container'>
<img class='lround small' src="../public/images/img-1.png" alt="img-1">
<img class='small' src="../public/images/img-2.png" alt="img-2">
<img class='small' src="../public/images/img-3.png" alt="img-3">
<img class='small' src="../public/images/img-4.png" alt="img-4">
<img class='small' src="../public/images/img-5.png" alt="img-5">
<img class='rround small' src="../public/images/img-6.png" alt="img-6">
</div>
<link rel="stylesheet" href="../public/css/test.css">
<div id='res'>
<div id='left' class='cols'>
<p class='narrow'>Date</p>
<p class='bold'>May 11</p>
<p class='narrow'> </p>
<p class='narrow'>Reservation</p>
<p class='narrow'>Sail Time</p>
<p class='narrow'>Crew Time</p>
</div>
<div id='center' class='cols'>
<p class='narrow'>Skipper</p>
<p class='bold'>Bob Smith</p>
<p class='narrow'>Start Time</p>
<p class='narrow bold'>09:00 AM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeStart' class='timepicker' type='text' name='startTime' readonly>
<p id='w0' class='warning'>enter availability</p>
</div>
</div>
<div id='right' class='cols'>
<p class='narrow'>Boat</p>
<p class='bold'>Syrena 40</p>
<p class='narrow'>End Time</p>
<p class='narrow bold'>09:00 PM</p>
<p class='narrow bold'>TBD</p>
<div class='inputWrapper'>
<input id='timeEnd' class='timepicker' type='text' name='startTime' readonly>
<p id='w1' class='warning'>end time > start time</p>
</div>
</div>
</div>
<div id='bottom'>
<p id='bottomLeft' class='narrow'>Crew Status</p>
<p id="bottomRight" class='narrow bold'>OUT</p>
</div>
<div id='submit'>
<div id='spacer'> </div>
<div id='update'>
<a style="text-decoration:none;" href="#" onclick="window.location='mailto:rslotpole#gmail.com ?subject=Note to Skipper'; return false;">
<img src="../public/images/email-48.png" style="width:48px;height:48px;border:0;">
</a>
<input type='submit' value='update' />
<a style="text-decoration:none" href="tel:(617) 943-5119">
<img src="../public/images/phone-48.png" style="width:48px;height:48px;border:0;">
</a>
</div>
</div>
</div>
<link rel="stylesheet" href="../public/css/timepicker/jquery.timepicker133.min.css">
<script src="../public/js/timepicker/jquery-3.6.0.js"></script>
<script src="../public/js/timepicker/jquery.timepicker134.min.js"></script>
<script src="../public/js/test.js"></script>
<script>
function preventBehavior(e) {
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, {passive: false});
function allowBehavior(e){
console.log(e.target)
e.stopPropagation()
}
let tp = document.getElementsByClassName('ui-timepicker-viewport')
tp[0].addEventListener("touchmove", allowBehavior);
</script>
</body>
Try using the css:
.ui-timepicker-viewport {
overscroll-behavior: none
}
body {
overscroll-behavior: none
}
or the javascript:
[...document.getElementsByClassName('ui-timepicker-viewport')].forEach(element => element.style.overscrollBehavior = "none");
document.body.style.overscrollBehavior = "none";
I am doing ReactJS using MaterializeCSS for my UI and
I have a script in JS that looks like one below for MaterializeCSS so that I could use modal class.
$(document).ready(
function () { initializeMaterialize() }
);
function getUUID()
{
return (Math.random().toString(36).substring(2)+(new
Date()).getTime().toString(36));
}
function initializeMaterialize() {
$('.modal').modal();
$('select').material_select();
$('select[required]').css({display: 'inline',height: 0,padding: 0,width: 0});
}
In my main index.html I called the following as per suggestion from Materialize website:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/readable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
I was able to use modal and all for Materialize CSS with no problem until I clicked a link from below:
<div className="row">
<div className="row readable-list-card z-depth-4">
<div className="float-date">{postDate}</div><br/>
{/* Title here */}
<div className="row">
{/* Once I click the below link */}
<a href={url} onClick={this.handleFetchComments}>
<div name="title" ref="myTitle" className="card-title truncate"><strong>Title : </strong>{post.title}</div>
</a>
</div>
{/* Author */}
<div className="row">
<div>By : {post.author}</div>
</div>
{/* Vote, Comments, Edit, Delete */}
<div className="row readable-list-card-bar col s12">
<div className="col s6">
<div className="chip"><strong className="bold">Vote : </strong><span className="chip-color">{post.voteScore}</span></div>
<div className="chip"><strong className="bold">Comment : </strong><span className="chip-color">{post.commentCount}</span></div>
</div>
<div className="col s4">
<a className="tooltip2" href="" onClick={this.handleVotePost}><span className="tooltiptext">Vote up</span><i className="material-icons" id="upVote">thumb_up</i></a><span> </span>
<a className="tooltip2" href="" onClick={this.handleVotePost}><span className="tooltiptext">Vote down</span><i className="material-icons" id="downVote">thumb_down</i></a>
</div>
<div className="col s2">
<a className="tooltip2 modal-trigger" href="#edit-post" onClick={this.handlePassPost}><span className="tooltiptext">Edit post</span><i className="material-icons">edit</i></a>
<a className="tooltip2" href="" onClick={this.handleDeletePost}><span className="tooltiptext">Delete post</span><i className="material-icons">delete</i></a>
</div>
<div><input type="text" name="postid" style={{display:'none'}} ref={input => this.postid = input} value={post.id}/></div>
</div>
</div>
</div>
And then click Home my JavaScript that I declared earlier is no longer accessible.
What could have gone wrong?
I tried to declare my JS on my component using Helmet still to no avail.
<Helmet>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/readable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</Helmet>
I have just started with learning AngularJS and everthing works great before I started to write some easy controller method and method doesn't work even i include ng-contoller I tried to include it as separated js file but that also doens't work I am new to angularJS so I would appreciate any help I also tried with notped++ to do the same but doesn't work this is my code;
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container" data-ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search"/>
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg" >
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show" >
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
<script>
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
</script>
</body>
</html>
You have to define a module before instantiate your controller:
angular
.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg">
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show">
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
</body>
</html>
You have not defined the module anywhere in the code,
In View:
<html ng-app="myApp">
In JS:
var app = angular.module("myApp", []);
Working Sample
You need to include the angular module. Angular works with modules.
Controllers are part of module.
Try something like this:
app = angular.module("myApp", []);
app. Controller(...);
And use this module in your html like
<html ng-app="myApp">
Also,
The controller declaration you are using is old.
Try this:
app.controller('controllerName', ['$scope', function($scope){...}]);
I have a form set up that takes values and saves them into an object in a firebase array. I used ng-repeat to display each object in that array in a "dashboard" page. I want to be able to alter the specific object that gets created via checkboxes. I cannot figure out how to get the specific object.
var app = angular.module('app', ['ngRoute','firebase','ngMaterial']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/second', {
templateUrl: 'templates/second.html',
controller: 'homeCTRL'
})
.when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'homeCTRL'
})
.when('/vehicles', {
templateUrl: 'templates/vehicles.html',
controller: 'homeCTRL'
})
.otherwise({
redirectTo: '/dashboard'
});
}]);
//controllers
app.controller('homeCTRL', ['$scope', '$log','$firebaseArray', function($scope,$log,$firebaseArray) {
var ref = new Firebase("https://asgtodo.firebaseio.com");
$scope.newItem = '';
$scope.FBproject= $firebaseArray(ref.child('project'));
$scope.FBhistory = $firebaseArray(ref.child('history'));
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
$scope.pipeCompleted = false;
$scope.addItem = function() {
$scope.FBproject.$add({
projectName: $scope.projectName,
dateStart: $scope.dateStart,
dateEnd: $scope.dateEnd,
signChecked: $scope.signChecked,
paintChecked: $scope.paintChecked,
blastChecked: $scope.blastChecked,
labelChecked: $scope.labelChecked,
yellowMacro: $scope.yellowMacro,
redMacro: $scope.redMacro,
otherPaint: $scope.otherPaint,
pipeFootage: $scope.pipeFootage,
maxHeight: $scope.maxHeight,
liftSmall: $scope.liftSmall,
liftLarge: $scope.liftLarge,
liftBoom: $scope.liftBoom,
pipeCompleted: $scope.pipeCompleted
});
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
};
$scope.changePipe = function(x){
$scope.index = $scope.FBproject.indexOf(x);
};
$scope.rmList = function(item) {
//get index of displayHold
$scope.index = $scope.FBproject.indexOf(item);
//add it to historylist
$scope.FBhistory.$add($scope.FBproject[$scope.index]);
$scope.FBproject.$remove($scope.FBproject[$scope.index]);
};
$scope.modalItem = function(item){
return null;
};
}]);
app.controller('secondCTRL', ['$scope', function($scope) {
}]);
Here is the html
<!-- MODAL BUTTON -->
<div style="margin-top: 6em;">
<div class="row animated shake">
<div class="col s6 m5 l5">
<center>
<a class="btn-floating btn-large waves-effect waves-dark blue modal-trigger" id="modal" href="#modal1">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
</div>
<!-- MODAL -->
<div id="modal1" class="modal bottom-sheet white" style="height: 100%; opacity: 0.8">
<div class="modal-content white blue-text">
<div class="row">
<form>
<div class="row animated rollIn">
<div class="input-field col s12 m6 l6">
<input id="projName" type="text" ng-model="projectName">
<label id="projNameLabel">Project Name</label>
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">Start Date</label>
<input id="projDate" type="date" class="datepicker " ng-model="dateStart">
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">End Date</label>
<input id="projDate" type="date" class="datepicker" ng-model="dateEnd">
</div>
</div>
<div class="row">
<div class="col s12 m2 l2">
<center>
<form action="#">
<p class="padBoxes">
<input type="checkbox" id="Signs" class="Materialize.showStaggeredList('#test')" ng-model="signChecked"/>
<label for="Signs">Signs</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Paint" ng-model="paintChecked"/>
<label for="Paint">Paint</label>
</p>
<p ng-show="paintChecked" style="margin-left: 15px;" class="padBoxes">
<input type="checkbox" id="Blast" ng-model="blastChecked"/>
<label for="Blast">Blast</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Labels" ng-model="labelChecked"/>
<label for="Labels">Labels</label>
</p>
</form>
</center>
</div>
<div class="col s12 m3 l3 z-depth-5" style="margin-right: 10px;" ng-show="paintChecked">
<center class="animated fadeIn">
<form action="#">
<div class="indigo z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Paint</h5>
</p>
</div>
<p class="range-field padBoxes">
<label for="Labels">Yellow 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="yellowMacro"/>
</p>
<p class="range-field padBoxes">
<label for="Labels">Red 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="redMacro"/>
</p>
<p class="input-field padBoxes">
<input id="projName" type="text" ng-model="otherPaint">
<label>Other</label>
</p>
</form>
</center>
</div>
<div class="col s12 m2 l3 z-depth-3" style="margin-right: 10px;" ng-show="signChecked">
<form action="#">
<div class="col s12 animated fadeIn">
<center>
<div class="red z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Signs</h5>
</p>
</div>
<p class="input-field">
<input id="projName padBoxes" type="text" ng-model="pipeFootage">
<label>Pipe Footage</label>
</p>
<p class="range-field padBoxes">
<label for="Labels ">Max Height</label>
<input type="range" id="test5" min="0" max="50" ng-model="maxHeight"/>
</p>
</center>
</div>
</form>
</div>
<div class="col s12 m2 l2 " style="margin-right: 10px;" ng-show="signChecked || labelChecked">
<center>
<p >
<input type="checkbox" id="liftSmall" ng-model="liftSmall"/>
<label for="liftSmall">Lift 3246</label>
</p>
<p >
<input type="checkbox" id="liftLarge" ng-model="liftLarge"/>
<label for="liftLarge">Lift 4069</label>
</p>
<p >
<input type="checkbox" id="liftBoom" ng-model="liftBoom"/>
<label for="liftBoom">Lift BOOM!</label>
</p>
</center>
</div>
</div>
</div>
</form>
</div>
<div class="input-field col s12 m2 l2 padBoxes" style="margin: -50px;">
<center>
<a href="#!" class="modal-action modal-close waves-effect waves-dark btn-flat z-depth-2">
<i class="material-icons" style="font-size: 3em;">close</i>
</a>
<a class="btn-floating btn-large waves-effect waves-dark blue z-depth-2" onclick="Materialize.toast('Project Added', 4000)" ng-click="addItem()">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
<!-- FBproject -->
<div class="container row" style="margin-top: 4em; ">
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="x in FBproject track by $index">
<div class="collapsible-header waves-effect waves-dark">
<div class="col s2 m2 l1">
<center>
<i class="material-icons">folder-open</i>
</center>
</div>
<div class="col s5 m2 l2">
{{x.projectName}}
</div>
<div class="col s12 m5 l4">
<center>
<div class="chip">Signs</div>
<div class="chip">Paint</div>
<div class="chip">Labels</div>
</center>
</div>
</div>
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="{{}}" />
<label for="pipe">Pipe Ordered</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="hotel">Hotel</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="lifts">
<h7>lifts</h7>
</label>
</p>
<a class="btn-floating btn-large waves-effect waves-dark red" ng-click="rmList(x)">
<i class="material-icons">delete_forever</i>
</a>
</form>
</center>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.collapsible').collapsible({accordion: false});
$('.modal-trigger').leanModal({dismissible: true, opacity: .50, in_duration: 300, out_duration: 200});
$('.datepicker').pickadate({selectMonths: true, selectYears: 15, container: 'body'});
$('select').material_select({container: 'body'});
$(".button-collapse").sideNav();
});
</script>
index.html
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="main.css"/>
</head>
<body ng-cloak>
<div>
<div class="fixed-action-btn horizontal click-to-toggle" style="top: 5px; center: 24px;">
<a class="btn-floating waves-effect waves-dark btn-large">
<i class="material-icons">menu</i>
</a>
<ul>
<li>
<a href="#/dashboard" class="btn-floating waves-effect waves-dark btn-large yellow darken-1">
<i class="material-icons">dashboard</i>
</a>
</li>
<li>
<a href="#/second" class="btn-floating waves-effect waves-dark blue btn-large green darken-1">
<i class="material-icons">find_in_page</i>
</a>
</li>
<li>
<a href="#/vehicles" class="btn-floating waves-effect waves-dark btn-large red darken-1">
<i class="material-icons">directions_car</i>
</a>
</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
section is question?
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="x.pipeCompleted{{index}}"/> <!-- what do I put here ?? to get the specific object-->
<label for="pipe">Pipe Ordered</label>
</p>
<p>
Try this:
<input type="checkbox" ng-model="pipeCompleted[$index]"/>
My app is running Cordova with AngularJS routing. I need the InAppBrowser plugin to view pdfs. However, since ngroute calls an html on a route change InAppBrowser is called.
I only need it to run on button click not everytime.
-- edit --
When I have the Cordova InAppBrowser plugin installed I get a white screen and a message regarding a white list issue regarding my inital route "index.html":
$routeProvider
.when('/', { //load home at start
controller: 'HomeController as homeSlides',
templateUrl: 'content/home.html',
resolve: {
// I will cause a 1 second delay
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
var dl = document.getElementById('door-left');
var dr = document.getElementById('door-right');
dl.classList.remove('open');
dr.classList.remove('open');
return delay.promise;
}
}
})
If I uninstall the plugin the issue is resolved.
-- edit --
This is the error I'm getting:
HTML1300: Navigation occurred.
[object Object]
APPHOST9623: The app couldn’t resolve ms-appx://25052ninjadrew.nanosales/www/[object Object] because of this error: RESOURCE_NOT_FOUND.
APPHOST9613: The app couldn’t navigate to ms-appx://25052ninjadrew.nanosales/www/[object Object] because of this error: 80004005.
new transaction is waiting for open operation
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".
[object Object] (1,1)
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
index.html
-- edit --
For client reasons I can't show too much of my html but...
<!DOCTYPE html>
<html ng-app="nanoApp" class="test">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<script src="js/winstore-jscompat.js"></script>
<script src="js/min/iscroll-min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-sanitize.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/database.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body class="{{bodyclass}}">
<div id="door-left" style="background-image:url('img/trans-left.png');" class="loading door-left" ></div>
<div id="door-right"style="background-image:url('img/trans-right.png');" class="loading door-right" ></div>
<div id="nav">
<ul>
<li><span id="menu-cls" class="ion-close-round"></span></li>
<li><div class="ion-grid"></div>Home</li>
<li><div class="ion-grid"></div>Products</li>
<li><div class="ion-grid"></div>Installations</li>
<li><div class="ion-grid"></div>Videos</li>
<li><div class="ion-grid"></div>Favorites</li>
<li><div class="ion-grid"></div>Marketing Materials</li>
</ul>
</div>
<div id="head">
<div id="left-head">
<div id="menu-btn"></div>
<img src="img/header-left-x2.png" />
<div class="filler"></div>
</div>
<div id="middle-head">
<a style="display:block;" href="#/"><div id="logo"></div></a>
</div>
<div id="right-head">
<img src="img/header-right-x2.png" />
</div>
<div class="swipe-indicator"><span class="ion-chevron-left three"></span><span class="ion-chevron-left two"></span><span class="ion-chevron-left one"></span> Swipe <span class="ion-chevron-right one"></span><span class="ion-chevron-right two"></span><span class="ion-chevron-right three"></span></div>
</div>
<div id="content" class="scroller" ng-view>
</div>
<div id="footer">
<ul id="footer-btns">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="filler"></div>
<img src="img/bottom-bar-x2.png" class="bottom-bar" />
</div>
<!-- gallery popup -->
<div id="gallery-container" ng-show="openGallery">
<div class="ion-close-round close-gallery" ng-click="closeGallery()"></div>
<div id="left-arrow" class="arrow" ng-click="prevSlide()" ng-show="galleryCount > 1"></div>
<div id="slide-container">
<div id="slides">
<div class="slide" ng-repeat="slide in gallery" ng-switch on="galleryType" video-setup>
<!-- image template-->
<img ng-src="{{slide.file}}" ng-switch-when="image" />
<!-- video template-->
<video class="video" style="width:845px;height:635px;" controls autoplay ng-switch-when="video">
<source ng-src="{{slide.file}}" type='video/mp4' />
</video>
</div>
</div>
</div>
<div id="slide-marker-container" ng-show="galleryCount > 1">
<ul id="slide-markers">
<li ng-repeat="marker in galleryMarkers(galleryCount) track by $index" marker-setup>
<div ng-click="scrollToSlide({{$index}})"></div>
</li>
</ul>
</div>
<div id="right-arrow" class="arrow" ng-click="nextSlide()" ng-show="galleryCount > 1"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/stellar.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
home.html:
<div id="home" set-iscroll home-setup class="container paralax">
<a href="#/productslist/0" class="section">
<div style="background-image:url('img/home/slim-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/slim-title.png');" class="element layer1" data-stellar-ratio="1.3"></div>
<div id="slim-holt-top" class="indicator"><div style="background-image:url('img/home/slim-holt-top.png');" class="element title" data-stellar-ratio="1.3"></div></div>
<div id="slim-lv-top" class="indicator"><div style="background-image:url('img/home/slim-lv-top.png');" class="element layer2" data-stellar-ratio="1.7" data-stellar-ratio="2"></div></div>
<div id="slim-mel-top" class="indicator"><div style="background-image:url('img/home/slim-mel-top.png');" class="element layer3" data-stellar-ratio="1.3"></div></div>
<div id="slim-avyve-top" class="indicator"><div style="background-image:url('img/home/slim-avyve-top.png');" class="element layer4" data-stellar-ratio="1.2"></div></div>
</a>
<a href="#/productslist/1" class="section">
<div style="background-image:url('img/home/curve-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/curve-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="curve-aig-top" class="indicator"><div style="background-image:url('img/home/curve-aig-top.png');" class="element layer1" data-stellar-ratio="1.7"></div></div>
<div id="curve-illy-top" class="indicator"><div style="background-image:url('img/home/curve-illy-top.png');" class="element layer2" data-stellar-ratio="1.5" data-stellar-ratio="2"></div></div>
<div id="curve-minn-top" class="indicator"><div style="background-image:url('img/home/curve-minn-top.png');" class="element layer3" data-stellar-ratio="1.2"></div></div>
</a>
<a href="#/productslist/2" class="section">
<div style="background-image:url('img/home/clear-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/clear-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="clear-top" class="indicator"><div style="background-image:url('img/home/clear-top.png');" class="element layer1" data-stellar-ratio="1.5"></div></div>
</a>
<a href="#/productslist/3" class="section">
<div style="background-image:url('img/home/wrap-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/wrap-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="wrap-eaton-top" class="indicator"><div style="background-image:url('img/home/wrap-eaton-top.png');" class="element layer2" data-stellar-ratio="1.2"></div></div>
<div id="wrap-gte-top" class="indicator"><div style="background-image:url('img/home/wrap-gte-top.png');" class="element layer3" data-stellar-ratio="1.5"></div></div>
</a>
<a href="#/productslist/4" class="section">
<div style="background-image:url('img/home/slimengage-home-bkg.jpg');" class="bkg"></div>
<div style="background-image:url('img/home/slimengage-title.png');" class="element title" data-stellar-ratio="1.3"></div>
<div id="slimengage-screen" class="indicator"><div style="background-image:url('img/home/slimengage-screen.png');" class="element layer1" data-stellar-ratio="1.1"></div></div>
<div id="slimengage-blueppl" class="indicator"><div style="background-image:url('img/home/slimengage-blueppl.png');" class="element layer2" data-stellar-ratio="1"></div></div>
<div id="slimengage-colorppl" class="indicator"><div style="background-image:url('img/home/slimengage-colorppl.png');" class="element layer3" data-stellar-ratio="1.5"></div></div>
</a>
</div>