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";
Related
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>
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 am using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
I am using AngularJS for the very first time and I am writing down the HTML script of the page over here:
<!DOCTYPE html>
<html>
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
alert("india");
function questionController($scope) {
$scope.queList = ['a', 'b'];
alert("India");
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
</script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;"><h1>Stack Overflow</h1></div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'"/>
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'"/>
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'"/>
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
<div class="metapost">
<h4 class="headertitle">Hot Meta Post</h4>
<div class="sidebarinnerdiv">Is it useful to edit a question I will vote to close? </div>
<div class="sidebarinnerdiv">Rewriting a Waffle question</div>
</div>
<div class="networkquestions">
<h4>Hot Network Questions</h4>
<div class="sidebarinnerdiv">How to pronounce the English alphabet? (A, B, C, ...)</div>
<div class="sidebarinnerdiv">Why does the Black Lives Matter movement organize protests while the incident they're protesting is still under investigation?</div>
</div>
</div>
</div>
<!-- Always at the end of the page -->
<footer>
Copyright 2016, Stack Overflow
</footer>
</body>
</html>
It is not working and I am seeing {{question}} on the page. I am not able to trace down the source of the error. Please help me make my page work.
You forgot to add ng-app="queApp"
function questionController($scope) {
$scope.queList = ['a', 'b'];
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
<!DOCTYPE html>
<html ng-app="queApp">
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;">
<h1>Stack Overflow</h1>
</div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'" />
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'" />
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'" />
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'" />
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'" />
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'" />
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
First of all you need 'ng-app="queApp"' in order to use AngularJS (Basics AngularJS)
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>