I make a simple application Ionic 2 but I find a problem that exists year screenshot
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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 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>
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- script home.js -->
<script src="js/home.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<ion-pane>
<!-- <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content> --><div ng-view></div>
</ion-pane>
</body>
</html>
code home.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS & Firebase Web App</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<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="cordova.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
Sign Up
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body></html>
code home.js
var app = angular.module('home', ['ionic'])
.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(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', { templateUrl : 'templates/home.html',controller: 'HomeCtrl' });
}])
app.controller('HomeCtrl', [function() {
}]);
code app.js
angular.module('myApp', ['ionic','home'])
.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();
}
});
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({ redirectTo: '/home' });
}]);
I added ngRoute in js files but same problem
Related
I have a Vue app: it is To Do List, where after adding some notes by clicking button Add Task we receive a list of items to do. On the front of each item we have button Delete and checkbox to have opportunity to mark it as done. The bug is when I for example mark one of the items in the list as checked and after that delete it-marker that it was checked goes to the other item which was not marked as checked initially. Can you please advice how it can be solved using Vue.js or any other option? Below is my code:
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox"/>
({{index+1}}) {{note}}
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
The main issue in you code is, you don't store any information about which task is checked and which one is not.let's say you checked 3rd task and then delete it, the new 3rd item from the top will be auto checked as it has no information about the task so can't differentiate between the new and the deleted task.
This can be solved many way one easy solution is, in your notes array store two types of data. One title and one is isChecked then v-model the checked value in template.
Update your addnewtask() function like this,
addnewtask() {
if (this.inputvalue !== "") {
this.notes.push({
title: this.inputvalue,
isChecked: false,
});
this.inputvalue = "";
}
},
In html use a v-modal to add a two way data binding for the note.isChecked and update note like note.title since note is currently an object now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0" ...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox" v-model="note.isChecked" />
({{index+1}}) {{note.title}}
</div>
<button class="btn danger" v-on:click="removetask(index)">
Delete
</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
Here is a vue playgroud link for your code demo.
How can I remove modal body padding? Im using BoostrapVue
<b-modal
v-model="show"
title="Modal Variants">
<b-container fluid>
</b-container>
<div slot="modal-footer" class="w-100">
<b-button size="sm" class="float-right" variant="primary" #click="show=false">Close</b-button>
</div>
</b-modal>
You can provide your own class to remove the body padding via the body-class property
(or use the bootstrap p-0 class).
new Vue({
el: '#app',
mounted () {
this.$refs.modal.show()
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/#babel/polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id='app'>
<div>
<b-modal ref="modal" id="modal1" title="BootstrapVue" body-class="p-0">
<container fluid>
content
</container>
<div slot="modal-footer">
<b-button size="sm" class="float-right" variant="primary">Close</b-button>
</div>
</b-modal>
</div>
</div>
I'm looking for a "live code" repository (e.g., jsBin, jsFiddle, CodePen, plunkr, etc.) template useful for sandboxing (i.e., "posting") Polymer questions about the firebase-collection or firebase-document.
In other words, I'm building a Polymer app using a Firebase backend and I need a template to use for posting questions to this site.
For example, here is the template I use to post Polymer questions. Is there one that anyone knows of that can also support questions about the firebase-collection or firebase-document elements? (I'm guessing this would require a firebase with public read/write access.)
http://jsbin.com/sitomotoji/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-button on-tap="_handleTap">Click Me</paper-button>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
},
_handleTap: function() {
alert('User clicked me!');
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
http://jsbin.com/xojoxubigi/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="firebase-element/firebase-collection.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<paper-button on-tap="_handleClick">Click Me</paper-button>
</p>
<!---->
<firebase-collection
location="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"></firebase-collection>
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
<div>
[[dinosaur.height]]
</div>
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
_handleClick: function() {
console.log('You clicked me!');
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
I'm trying to set a cookie in my local machine using the jquery.cookie plugin. I already downloaded the jquery files that are needed and create a html file with this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js "></script>
<script type="text/javascript" src="jquery.cookie.js "></script>
</head>
<body>
<script>
$(document).ready(function(){
$.cookie('name','value');
});
</script>
</body>
</html>
But the cookie it's not set in Google Chrome. What is wrong? Thanks.
I figured out how to do this: First the html file have to be open in the server. I already have apache configured so I open the file with the localhost. Then the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript">
if ($.cookie('backdrop')==null){
$(document).ready(function(){
$('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
$('.box').animate({'opacity':' 1.00'}, 250, "linear");
$('.backdrop , .box').css('display', 'block');
$('.close').click(function(){
close_box();
});
$('.backdrop').click( function(){
close_box();
});
});
$.cookie('backdrop','1');
}
function close_box(){
$('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
$('.backdrop , .box').css('display', 'none');
});
}
</script>
</head>
<body>
<div class="backdrop"></div>
<div class="box">
<div class="close"><img src="../img/big_close.png"></div>
<div class="contentbox">
<img src="../img/warning.jpg" id="aviso">
<h4 id="msg"> Está página está em fase de desenvolvimento</h4>
</div>
</div>
</body>
</html>
The goal of this code is to show a div with a message in front of the page content and put an opact background. But only the first time the user open the page.
I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='container'>
<h2> Tagging Functions </h2>
<div class='row'>
<div class='span5'>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script scr='bootstrap/js/bootstrap.js'></script>
<script src='js/main.js'></script>
</body>
</html>
AND JS:
// Main JS
$(document).ready(function() {
$("#myTags").tagit({
availableTags:['me', 'you']
});
});
It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.
A workaround could be to load jQuery 1.7.x and use jQuery.noConflict
This is my solution
//Save current jQuery
current_jquery = $.noConflict(true);
//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
type: 'text/javascript',
id : 'jquery_173',
src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});
//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);
//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;
//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});