I'm developing a multi-platform app using Ionic v1.
The problem is with CSS, this is the page that I want to perform in graphical purpose:
In particular I want to center vertically the input list in the red circle: I want to align them with the caption to the left.
I want also to center vertically the text in the second circle, aligning with the red button.
This is the html and CSS code of that page:
app.controller('Wallet_management_Ctrl',['$scope','$http','Lang', function($scope,$http,Lang) {
var binance = localStorage.getItem("binance");
binance = (binance) ? JSON.parse(binance) : [];
$scope.binance = binance;
var coinmarketcapsymbol = localStorage.getItem("Coinmarketcap");
coinmarketcapsymbol = (coinmarketcapsymbol) ? JSON.parse(coinmarketcapsymbol) : [];
$scope.coinmarketcapsymbol = coinmarketcapsymbol;
var symbolsBitfinex = localStorage.getItem("symbolsBitfinex");
symbolsBitfinex = (symbolsBitfinex) ? JSON.parse(symbolsBitfinex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBitfinex = symbolsBitfinex;
var symbolsBittrex = localStorage.getItem("Bittrex");
symbolsBittrex = (symbolsBittrex) ? JSON.parse(symbolsBittrex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsBittrex = symbolsBittrex;
var symbolsPoloniex = localStorage.getItem("Poloniex");
symbolsPoloniex = (symbolsPoloniex) ? JSON.parse(symbolsPoloniex) : [];
//console.log(symbolsBitfinex);
$scope.symbolsPoloniex = symbolsPoloniex;
var symbolsCryptopia = localStorage.getItem("Cryptopia");
symbolsCryptopia = (symbolsCryptopia) ? JSON.parse(symbolsCryptopia) : [];
//console.log(symbolsBitfinex);
$scope.symbolsCryptopia = symbolsCryptopia;
var language = Lang.getlang();
$scope.showlang = language;
if (language=="ita"){
$scope.title= "Gestione Wallet"
}
if (language=="en"){
$scope.title= "Wallet management"
}
var weblist = ["Binance","Bitfinex","Bitstamp","Bittrex", "Coinmarketcap","Cryptopia","Poloniex"];
var BitstampList = ["bch", "btc", "eth", "ltc", "xrp"];
$scope.weblist = weblist;
$scope.symbolsBitstamp = BitstampList;
var walletlist = localStorage.getItem("walletlist");
walletlist = (walletlist) ? JSON.parse(walletlist) : [];
// console.log(walletlist);
var item = [];
if (walletlist === null)
var walletlist = [];
$scope.walletlist = walletlist;
$scope.add = function() {
if($scope.site == null || $scope.currency == null || $scope.amount == null || $scope.price == null){
if (language=="ita"){
alert("Devi riempire tutti i campi");
};
if (language=="en"){
alert("Fill in all the labels");
};
}
else{
if ($scope.amount == 0 || $scope.price == 0){
if (language=="ita"){
alert("La quantità o il prezzo non possono essere nulli");
};
if (language=="en"){
alert("The amount or the price can't be null");
};
}
else{
item = [$scope.site,$scope.currency,$scope.amount, $scope.price];
walletlist.push(item);
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
$scope.site = null;
$scope.currency = null;
$scope.amount == null;
$scope.price == null;
}
}
};
$scope.delete = function(item) {
var index = walletlist.indexOf(item);
if (index > -1) {
walletlist.splice(index, 1);
}
window.localStorage.removeItem("walletlist");
window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
//location.reload();
};
$scope.showBitfinex = function() {
if ($scope.site == "Bitfinex"){
return true;
}
else
return false;
};
$scope.showBinance = function() {
if ($scope.site == "Binance"){
return true;
}
else
return false;
};
$scope.showCoinmarketcap = function() {
if ($scope.site == "Coinmarketcap"){
return true;
}
else
return false;
};
$scope.showBittrex = function() {
if ($scope.site == "Bittrex"){
return true;
}
else
return false;
};
$scope.showPoloniex = function() {
if ($scope.site == "Poloniex"){
return true;
}
else
return false;
};
$scope.showCryptopia = function() {
if ($scope.site == "Cryptopia"){
return true;
}
else
return false;
};
$scope.showBitstamp = function() {
if ($scope.site == "Bitstamp"){
return true;
}
else
return false;
};
$scope.$on('$ionicView.leave', function() {
location.reload();
});
}]);
/* Empty. Add your own CSS if you like */
/* Utilities */
* {
font-family: 'Comfortaa';
}
.pane {
background-color: #E8EAF6;
}
/*menu laterale img in alto*/
.menu .bar.bar-header.expanded {
background-image: url('../img/menu.jpg');
background-size: 120%;
background-position: 0%;
transition: all .5s ease-in-out;
}
/*menu laterale img in alto*/
.menu.menu-left * {
background-color: #303F9F;
font-weight: bold;
font-family: 'Comfortaa';
font-size: 1.05em;
color: white;
}
.nav-bar-block,
.bar {
background-color: #303F9F !important;
font-family: 'Comfortaa';
font-weight: bold;
}
.link {
color: #116262;
font-weight: bold;
}
h4 {
color: #283593;
font-size: 1.875em;
margin-bottom: 16px;
}
h4:first-child {
border-top: none;
padding-top: initial;
}
h3 {
color: #283593;
font-size: 1.4em;
margin-bottom: 16px;
}
h3:first-child {
border-top: none;
padding-top: initial;
}
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.no-border {
border: none;
}
.static {
position: static;
}
.bold {
font-weight: bold;
}
.border-top {
border-top: solid 1px #ccc;
padding-top: 30px;
}
.blue-grey-900 {
background-color: #263238 !important;
color: #fff;
}
/* Menu */
.menu.menu-left * {
font-weight: bold;
}
.item-radio input:checked~.item-content {
background: transparent;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
.item.item-radio .radio-icon {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.item.item-radio:active .radio-icon {
opacity: 0;
transform: scale(1.6);
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.directions.button-bar {
margin: 0 auto;
width: 33.333%;
}
.directions.button-bar button {
line-height: 26px;
}
.ion-arrow-right-c.top-left:before {
transform: rotate(-135deg);
}
.ion-arrow-right-c.top-right:before {
transform: rotate(-45deg);
}
.ion-arrow-right-c.bottom-left:before {
transform: rotate(-225deg);
}
.ion-arrow-right-c.bottom-right:before {
transform: rotate(45deg);
}
#modal {
background-color: #ef4e3a;
border-radius: 100%;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.2);
position: fixed;
height: 50%;
bottom: 0;
opacity: 0;
width: 700px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.expand #modal {
background-color: #DBDBDB;
border-radius: 0;
border-top: solid 4px #ef4e3a;
opacity: 1;
z-index: 9;
}
/* CODE */
.code {
color: #333;
font-family: monospace;
padding: 10px;
white-space: pre;
}
.code-wrapper {
padding-bottom: 30px;
padding-top: 15px;
}
.code-wrapper::before {
color: #1B5E20;
font-family: "Ionicons";
speak: none;
font-size: 18px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: '\f216 ';
}
.code-wrapper.active::before {
content: '\f207 ';
}
.code-wrapper .toggle {
color: #4CAF50;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: bold;
padding: 10px 8px;
text-decoration: underline;
}
.code-wrapper .code {
opacity: 0;
margin-top: -20px;
height: 0;
overflow: hidden;
position: absolute;
transition: 0.1s all ease-in-out;
z-index: 9999999999;
}
.code-wrapper.code-wrapper-last .code {
position: relative;
}
.code-wrapper.active .code {
background: #f9f9f9;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
left: 16px;
height: initial;
margin-top: 15px;
padding: 15px;
right: 16px;
opacity: 1;
transition: 0.3s all ease-in-out;
width: initial;
}
.popover {
left: initial !important;
right: 16px !important;
top: 16px !important;
}
.platform-android .popover {
margin-top: 10px;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
div.relative {
position: relative;
left: -30px;
}
.round-button {
width: 25%;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
border: 10px solid #cfdcec;
overflow: hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #30588e;
}
.round-button a {
display: block;
float: left;
width: 100%;
padding-top: 50%;
padding-bottom: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #e2eaf3;
font-family: Verdana;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
}
/* SlideShow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
/* Select styles */
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<ion-view ng-model="title" view-title={{title}}>
<ion-content ng-controller="Wallet_management_Ctrl">
<br /><br /><br />
<label class="item item-input notIE item-select">
<div ng-if="showlang == 'en'" class="input-label" ng-model="weblist">Site</div>
<div ng-if="showlang == 'ita'" class="input-label" ng-model="weblist">Sito</div>
<select ng-model ="site">
<option ng-repeat="item in weblist" >{{item}}</option>
</select>
</label>
<label class="item item-input item-select">
<div ng-if="showlang == 'en'" class="input-label" >Currency</div>
<div ng-if="showlang == 'ita'" class="input-label" >Valuta</div>
<select ng-model="currency" >
<option ng-if = "showBitfinex()" ng-repeat="item in symbolsBitfinex" >{{item}}</option>
<option ng-if = "showBinance()" ng-repeat="item in binance" >{{item}}</option>
<option ng-if = "showCoinmarketcap()" ng-repeat="item in coinmarketcapsymbol" >{{item.symbol}}</option>
<option ng-if = "showBittrex()" ng-repeat="item in symbolsBittrex" >{{item}}</option>
<option ng-if = "showPoloniex()" ng-repeat="item in symbolsPoloniex" >{{item}}</option>
<option ng-if = "showCryptopia()" ng-repeat="item in symbolsCryptopia" >{{item}}</option>
<option ng-if = "showBitstamp()" ng-repeat="item in symbolsBitstamp" >{{item}}</option>
</select>
</label>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Amount</span>
<span ng-show="showlang == 'ita'" class="input-label">Quantità</span>
<input ng-show="showlang == 'en'" type="number" placeholder="Amount" min="0" ng-model="amount">
<input ng-show="showlang == 'ita'" type="number" placeholder="Quantità" min="0" ng-model="amount">
</label>
</div>
<div class="list">
<label class="item item-input">
<span ng-show="showlang == 'en'" class="input-label">Price in $ </span>
<span ng-show="showlang == 'ita'" class="input-label">Prezzo in $ </span>
<input ng-show="showlang == 'en'" type="number" step="0.01" placeholder="Price in $" min="0" ng-model="price">
<input ng-show="showlang == 'ita'" type="number" step="0.01" placeholder="Prezzo in $" min="0" ng-model="price">
</label>
</div>
<div class="col text-center">
<button ng-show="showlang == 'en'" class="button button-block button-positive" ng-click="add()">Add</button>
<button ng-show="showlang == 'ita'" class="button button-block button-positive" ng-click="add()">Aggiungi</button>
</div>
<ion-item-group>
<ion-divider color=#9FA8DA>
<ion-item ng-if="showlang == 'en'" class="row">
<h3 class="col" align="center">Site</h3>
<h3 class="col" align="center">Currency</h3>
<h3 class="col" align="center">Amount</h3>
<h3 class="col" align="center">Purch. P. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item ng-if="showlang == 'ita'" class="row">
<h3></h3>
<h3 class="col" align="center">Sito</h3>
<h3 class="col" align="center">Valuta</h3>
<h3 class="col" align="center">Qnt.</h3>
<h3 class="col" align="center">P. Acq. </h3>
<h3 class="col" align="center"></h3>
</ion-item>
<ion-item class="row" ng-model="walletlist" ng-repeat="item in walletlist">
<div class="col" align="center">{{item[0]}} </div>
<div class="col" align="center">{{item[1]}} </div>
<div class="col" align="center">{{item[2]}} </div>
<div class="col" align="center">{{item[3]}} </div>
<div class="col" align="center"><button class="button button-assertive button-small, ion-ios-trash" ng-click="delete(item)"></button></div>
</ion-item>
</ion-divider>
</ion-item-group>
</ion-content>
</ion-view>
A think that I should modify CSS file, but I don't know how I can do! I tried with some similar mistakes solved, but I didn't solve the problem
Related
I need help with some text blocks that have to be able to be saved and loaded again by choice in a dropdown menu. I've tried it with JS but somehow it doesn't go. What to do?
I've tried it with JS but somehow it doesn't go.
var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();
function templateOne(a) {
a = event || window.event;
$('.mail-template').val(firstTemplate);
$('button#template-choice').html("Template 1");
return true;
}
function templateTwo(b) {
b = event || window.event;
$('.mail-template').val(secondTemplate);
$('button#template-choice').html("Template 2");
return true;
}
function templateThree(c) {
c = event || window.event;
$('.mail-template').val(thirdTemplate);
$('button#template-choice').html("Template 3");
return true;
}
function save(s) {
c = event || window.event;
if ($('#template>a:first-child').clicked == true) {
firstTemplate = $('.mail-template').val();
return true;
} else if ($('#template>a:nth-child(2)').clicked == true) {
secondTemplate = $('.mail-template').val();
return true;
} else if ($('#template>a:nth-child(3)').clicked == true) {
thirdTemplate = $('.mail-template').val();
return true;
}
}
.bg-text h1 {
margin-top: 20px;
font-size: 30px;
}
a.invisible-link {
color: unset;
text-decoration: none;
padding: 0 3px;
}
a.invisible-link:hover {
color: #788bb6;
}
p.sprachen a.invisible-link:hover {
color: #fcaf17;
}
.spalte {
display: inline-block;
}
span.current-language {
color: #fcaf17;
padding: 0 3px;
}
p.sprachen {
font-family: "univers_47", Arial, sans-serif;
font-size: 20px;
}
button.send-quote {
text-decoration: underline;
}
input {
font-family: "univers_47", Arial, sans-serif;
font-size: 14px !important;
}
input[type="file"] {
visibility: hidden;
width: 100px;
transform: translateY(-20px);
}
label.upload-button {
/* background: #788bb6;
color: #fff;*/
padding-top: 18px;
border-radius: 3px;
position: relative;
transition: 300ms;
display: inline-block;
}
img[src*="upload.png"]:hover {
cursor: pointer;
transform: translateY(-5px);
transition: 300ms;
}
img[src*="upload.png"]:not(:hover) {
transition: 300ms;
}
img[src*="enter.png"]:hover {
transform: translateX(5px);
transition: 300ms;
}
img[src*="enter.png"]:not(:hover) {
transition: 300ms;
}
img[src*="download.png"]:hover {
cursor: pointer;
transform: translateY(5px);
transition: 300ms;
}
img[src*="download.png"]:not(:hover) {
transition: 300ms;
}
.download:disabled img {
opacity: 0.7;
}
div.quote-form-content p {
margin-bottom: 10px;
}
.form textarea.mail-template {
height: 150px;
width: 600px;
border-color: #2c3459;
border-radius: 3px;
font-family: "Courier New", serif;
}
/* Dropdown Button */
.dropbtn {
background-color: #788bb6;
color: white;
padding: 10px 15px;
font-size: 13px;
cursor: pointer;
border: none;
border-radius: 3px;
}
/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
background-color: #2C3459;
} */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000;
padding: 10px 15px;
text-decoration: none;
display: block;
font-size: 13px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #788bb6;
color: #fff;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
label.checkbox {
font-size: 13px;
border: none;
}
div.checkboxes {
margin-top: 15px;
display: none;
}
h4#kriterium {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
<div id="Template" class="dropdown-content">
Template 1
Template 2
Template 3
</div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
<textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
<button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>
The entered text is not loaded the next time and obviously it's not saved. So what is wrong?
What i understand is that your text area is not saving. In your save function you are not getting the text area data because of the if you implement. I have commented that code and its getting data and updating the fields. I hope this will work for you.
var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();
function templateOne(a) {
a = event || window.event;
$('.mail-template').val(firstTemplate);
$('button#template-choice').html("Template 1");
return true;
}
function templateTwo(b) {
b = event || window.event;
$('.mail-template').val(secondTemplate);
$('button#template-choice').html("Template 2");
return true;
}
function templateThree(c) {
c = event || window.event;
$('.mail-template').val(thirdTemplate);
$('button#template-choice').html("Template 3");
return true;
}
function save(s) {
debugger
c = event || window.event;
//if ($('#template>a:first-child').clicked == true) {
firstTemplate = $('.mail-template').val();
return true;
//} else if ($('#template>a:nth-child(2)').clicked == true) {
//secondTemplate = $('.mail-template').val();
//return true;
//} else if ($('#template>a:nth-child(3)').clicked == true) {
//thirdTemplate = $('.mail-template').val();
//return true;
//}
}
.bg-text h1 {
margin-top: 20px;
font-size: 30px;
}
a.invisible-link {
color: unset;
text-decoration: none;
padding: 0 3px;
}
a.invisible-link:hover {
color: #788bb6;
}
p.sprachen a.invisible-link:hover {
color: #fcaf17;
}
.spalte {
display: inline-block;
}
span.current-language {
color: #fcaf17;
padding: 0 3px;
}
p.sprachen {
font-family: "univers_47", Arial, sans-serif;
font-size: 20px;
}
button.send-quote {
text-decoration: underline;
}
input {
font-family: "univers_47", Arial, sans-serif;
font-size: 14px !important;
}
input[type="file"] {
visibility: hidden;
width: 100px;
transform: translateY(-20px);
}
label.upload-button {
/* background: #788bb6;
color: #fff;*/
padding-top: 18px;
border-radius: 3px;
position: relative;
transition: 300ms;
display: inline-block;
}
img[src*="upload.png"]:hover {
cursor: pointer;
transform: translateY(-5px);
transition: 300ms;
}
img[src*="upload.png"]:not(:hover) {
transition: 300ms;
}
img[src*="enter.png"]:hover {
transform: translateX(5px);
transition: 300ms;
}
img[src*="enter.png"]:not(:hover) {
transition: 300ms;
}
img[src*="download.png"]:hover {
cursor: pointer;
transform: translateY(5px);
transition: 300ms;
}
img[src*="download.png"]:not(:hover) {
transition: 300ms;
}
.download:disabled img {
opacity: 0.7;
}
div.quote-form-content p {
margin-bottom: 10px;
}
.form textarea.mail-template {
height: 150px;
width: 600px;
border-color: #2c3459;
border-radius: 3px;
font-family: "Courier New", serif;
}
/* Dropdown Button */
.dropbtn {
background-color: #788bb6;
color: white;
padding: 10px 15px;
font-size: 13px;
cursor: pointer;
border: none;
border-radius: 3px;
}
/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
background-color: #2C3459;
} */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000;
padding: 10px 15px;
text-decoration: none;
display: block;
font-size: 13px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #788bb6;
color: #fff;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
label.checkbox {
font-size: 13px;
border: none;
}
div.checkboxes {
margin-top: 15px;
display: none;
}
h4#kriterium {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
<div id="Template" class="dropdown-content">
Template 1
Template 2
Template 3
</div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
<textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
<button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>
I have an application with a form and 2 inputs (a dropdown list and a checkbox).
These two inputs are required to be able to click on the submit button (a javascript function do the job)
the button is currently red with some CSS, even if disabled and i would like it be grey when disabled and red otherwise.
the job seems simple, but i have a problem with javascript, it doesn't work.
I tried this:
var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
if(sbt_btn.disabled == true){
sbt_btn.style.background = 'grey';
}
else {
sbt_btn.style.background = 'red';
}
}
but it doesn't work.
I also tried this:
var sbt_btn_att = document.querySelector('button#submit_button').getAttribute('disabled');
var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
if(sbt_btn_att.disabled == true){
sbt_btn.style.background = 'grey';
}
else {
sbt_btn.style.background = 'red';
}
}
console don't inform about some error or other.
If someone can help me
Here is the code pen with all javascript and CSS used.
CodePen
thanks in advance
/* => prerequisites: JQuery library 2.1.3 */
/* variable declaration */
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();
var openMenu = function() {
document.querySelector('.burger').classList.toggle('burger--active');
/*equivalent: burger.classList.toggle('burger--active');*/
document.querySelector('.nav__list').classList.toggle('nav__list--active');
/*equivalent: menu.classList.toggle('nav__list--active');*/
};
/* reveal content of first panel by default*/
panel.eq(0).find('.panel__content').addClass('panel__content--active');
var scrollFx = function() {
var ds = doc.scrollTop();
var of = vh / 4;
/* if the panel is in the viewport, reveal the content, if not, hide it.*/
for (var i = 0; i < panel.length; i++) {
if (panel.eq(i).offset().top < ds + of ) {
panel
.eq(i)
.find('.panel__content')
.addClass('panel__content--active');
} else {
panel
.eq(i)
.find('.panel__content')
.removeClass('panel__content--active')
}
}
};
var scrolly = function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 300, 'swing', function() {
window.location.hash = target;
});
}
var init = function() {
document.querySelector('.burger').addEventListener('click', openMenu, false);
/*equivalent: burger.addEventListener('click', openMenu, false);*/
window.addEventListener('scroll', scrollFx, false);
window.addEventListener('load', scrollFx, false);
$('a[href^="#"]').on('click', scrolly);
};
doc.on('ready', init);
/* Loader Between Page
========================================================================== */
/*simple function to retrieve element by its id */
function getId(id) {
return document.getElementById(id);
}
/* id1 the button id
id2 the loader id */
function validation(id1, id2) {
getId(id1).style.display = "none";
getId(id2).style.display = "";
return true;
}
/* Form of the unlock screen
========================================================================== */
/* Hide/show the unlock mode
========================================================================== */
/*Declare the current screen as a and the unlock screen as b.*/
var a = document.querySelector("#current");
var b = document.querySelector("#debug_mode");
/* declare the button in the navigation pan as btn */
var btn = document.querySelector("#debug_mode_btn");
/* add an event on this button. On click on it: */
btn.addEventListener("click", function myfunction() {
sty = document.querySelector("#debug_mode_btn");
/* if the unlock mode is hide, then:
- reveal it,
- switch colors of the button
- hide the current screen */
if (b.style.display == 'none') {
sty.style.background = 'red';
sty.style.color = "#2b3033";
b.style.display = 'block';
a.style.display = 'none';
}
/* else if unlock mode is already visible, hide it, reveal the current screen, and reswitch the color of the button*/
else {
sty.style.background = '#2b3033';
sty.style.color = 'red';
b.style.display = 'none';
a.style.display = 'block';
}
});
/* Hide/show the corresponding form based on the value of the select drop down list in the unlock mode.
========================================================================== */
var previous_debug_form;
var c = document.querySelector("#debug_selector");
c.addEventListener("change", function myfunction_display() {
var debug_form = document.querySelector('#debug_selector');
if (previous_debug_form) {
previous_debug_form.style.display = "none";
}
var debug_id = debug_form.value;
if (debug_id) {
var debug_form = document.querySelector('#' + debug_id);
debug_form.style.display = "block";
previous_debug_form = debug_form;
}
});
/* Form in the current page
========================================================================== */
/* Function to allow only one checkbox to be checked */
function selectOnlyThis(id) {
for (var i = 1; i <= 4; i++) {
if ("Check" + i === id && document.getElementById("Check" + i).checked === true) {
document.getElementById("Check" + i).checked = true;
} else {
document.getElementById("Check" + i).checked = false;
}
}
}
/* Function to remove the disabled property of the submit button */
function callFunction() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
document.querySelectorAll('button[type="submit"]')[0].disabled = true;
/*equivalent for input submit button: document.querySelectorAll('input[type="submit"]')[0].disabled = true; */
if (checkedOne) {
document.querySelectorAll('button[type="submit"]')[0].disabled = false;
document.querySelector('#submit_button').style.background = 'rgba(230,0,39,1.1);';
/*equivalent for input submit button: document.querySelectorAll('input[type="submit"]')[0].disabled = false; */
}
}
var sbt_btn = document.querySelector('button#submit_button').getAttribute('disabled');
function coloration_buton() {
if (sbt_btn == true) {
} else if (sbt_btn == false) {
}
}
ul {
color: black;
list-style-type: none;
}
.item {
display: flex;
flex-direction: column;
align-items: left;
align-content: space-around;
}
#bu_prompt {
width: auto;
}
label {
color: black;
}
.prompt {
width: 45%;
}
html {
min-height: 100%;
font-family: sans-serif;
}
.bg {
width: 100%;
height: 100%;
background: white;
background-repeat: no-repeat;
}
.logo {
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
.img-svg {
width: 350px;
}
/* Form
========================================================================== */
.form {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
margin-right: auto;
margin-left: auto;
margin-bottom: 1em auto;
margin-top: 1em;
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: .5em;
max-width: 700px;
/* area width */
width: 90%;
}
h2 {
font-weight: normal;
}
/* Button
========================================================================== */
.btn-submit {
background-color: ;
border-radius: 5px;
border: 1px solid white;
color: #fff;
max-width: 100%;
font-family: 'AvenirNextRegular', Helvetica, Arial, sans-serif;
background: rgba(230, 0, 39, 1.1);
touch-action: manipulation;
}
[class*='btn-'] {
border-bottom: 2px solid rgba(0, 0, 0, .15);
border-top: 1px solid rgba(255, 255, 255, 1);
border-radius: 5px;
color: #fff;
display: inline-block;
font: -webkit-small-control;
font-size: .8em;
line-height: 140%;
margin-top: .5em;
padding: 10px 20px;
width: 100%;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.next_page {
padding-right: 5%;
font-style: normal;
}
/*
========================================================================== */
.header_frame {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
margin: 10px auto;
margin-top: -20px;
padding: .5em 2em .5em 2em;
margin-bottom: 30px;
width: 100%;
max-width: 700px;
color: black;
text-align: left;
}
/* Navigation Pan
========================================================================== */
.nav-pan {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: .5em;
max-width: 200px;
height: auto;
width: 90%;
position: fixed;
bottom: 0px;
bottom: 0px;
left: 0px;
}
/* Navigation
========================================================================== */
.nav__list_ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100px;
backface-visibility: hidden;
}
.nav__list {
display: flex;
flex-flow: column wrap;
height: 85vh;
transform: translate(0, -100%);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
list-style-type: none;
padding: 0;
margin: 0;
}
.nav__list--active {
transform: translate(0, 0);
}
.nav__item {
flex: 1;
position: relative;
}
.nav__link {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
font-size: 24px;
background: #2b3033;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: red;
/* Icons color */
;
}
.nav__link:hover {
background: #272b2e;
}
#media (max-width: 640px) {
.nav {
width: 70px;
}
.nav__list {
height: 90vh;
}
}
.nav_btn {
background: #2b3033;
color: red;
border: 0px;
}
/* Burger (Small square in the left up angle with three horizontal bar)
========================================================================== */
.burger {
height: 15vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background: #2b3033;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger:hover {
background: #272b2e;
}
.burger__patty {
position: relative;
height: 2px;
width: 40px;
background: white;
}
.burger__patty:before {
content: "";
position: absolute;
top: -10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty:after {
content: "";
position: absolute;
top: 10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty,
.burger__patty:before,
.burger__patty:after {
will-change: transform;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger--active .burger__patty {
transform: rotate(90deg);
}
.burger--active .burger__patty:before {
transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}
.burger--active .burger__patty:after {
transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}
#media (max-width: 640px) {
.burger {
height: 10vh;
}
.burger__patty {
transform: scale(0.8);
}
.burger--active .burger__patty {
transform: scale(0.8) rotate(90deg);
}
}
/* Loader between page (red animated wheel)
========================================================================== */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid red;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%%;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* button#submit_button {
background: rgba(205,204,204,1);
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="Welcome Page">
<title>Welcome Page</title>
<!-- Library Javascirpt and CSS -->
<!-- specific CSS for debug mode -->
<style type="text/css">
#debug_all,
#debug_specific {
margin: .5em;
padding-bottom: .5em;
}
#debug_selector,
#debug_bu_selector {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
</head>
<body class="bg">
<!-- div of the loader -->
<div id="wait_tip" style="display:none" class="loader"></div>
<!-- Brand Logo -->
<div class="logo"></div>
<div id="current" style="display:block">
<div class="formbox">
<div class="form">
<div class="item">
<h2 style="font-weight:normal">Welcome into the Application</h2>
</div>
<br>
<form title="Available business unit" id="wlc_form" name="welcome_form" action="" onsubmit="return validation('submit_button','wait_tip');">
<div class="item">
<table>
<tbody>
<tr>
<td>
Choose a Business unit in the list:
</td>
<td>
<select name="bu_prompt" id="bu_prompt" required="">
<option value="" disabled="" selected=""> -- Choose a business unit -- </option>
<option value="1">HONG KONG</option>
<option value="D01">BELGIUM</option>
<option value="D02">TAIWAN</option>
<option value="D08">D08</option>
<option value="D09">SINGAPORE</option>
<option value="D10">FRANCE</option>
<option value="GBR">GREAT BRITAIN</option>
<option value="SGP">SINGAPORE</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<hr>
<br>
<div class="item">
<label>What do you want to do on this selected ?</label>
<ul name="checkingbox">
<li><input type="checkbox" id="Check1" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> Manage </li>
<li><input type="checkbox" id="Check2" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> Sending Report</li>
<li><input type="checkbox" id="Check3" name="_program" value="" onclick="selectOnlyThis(this.id)" onchange="callFunction()"> other</li>
</ul>
</div>
<!-- end item div -->
<br>
<input id="log" type="checkbox" name="_debug" value="log">
<label for="log" style="font-size:0.7em"> </label>
<button class="btn-submit" id="submit_button" disable="true" type="submit" disabled="" form="wlc_form">
<i class="next_page"> Next Page </i>
<i class="fa fa-arrow-right"></i>
</button>
</form>
<!-- end div form -->
</div>
<!-- end div formbox -->
</div>
<!-- end current div -->
</div>
<!-- Navigation Pan -->
<nav class="nav">
<div class="burger">
<div class="burger__patty"></div>
</div>
<ul class="nav__list nav__list_ul">
<li class="nav__item">
<button class="nav__link" id="debug_mode_btn" title="Unlock business unit"><i class="fa fa-cogs"></i></button>
</li>
</ul>
</nav>
<div id="debug_mode" style="display:none" class="form">
<div>
<h2> </h2>
</div>
<select id="debug_selector">
<option disabled="" selected=""> -- Choose an action -- </option>
<option value="debug_specific"> Unlock </option>
<option value="debug_all"> Unlock All </option>
</select>
<div id="debug_specific" style="display:none">
<form action="" method="GET" onsubmit="return validation('wlc_unlock','wait_tip');">
<input type="hidden" name="_debug_bu" value="1">
<input type="hidden" name="" value="">
<label> Choose a locked business unit: </label>
<select name="bu_name" id="debug_bu_selector">
</select>
<button class="btn-submit" id="wlc_unlock" type="submit">
<i class="next_page"> Unlock </i>
<i class="fa fa-unlock-alt"></i>
</button>
</form>
</div>
<!-- Unlock all Bu -->
<div id="debug_all" style="display:none">
<form action="" method="GET" onsubmit="return validation('wlc_all_unlock','wait_tip');">
<input type="hidden" name="_debug_all_bu" value="1">
<input type="hidden" name="" value="">
<button class="btn-submit" id="wlc_all_unlock" type="submit">
<i class="next_page"> Unlock All </i>
<i class="fa fa-unlock-alt"></i>
</button>
</form>
</div>
<!-- end of unlocking mode -->
</div>
<!-- specific JS for debug mode, load at the end for avoid problem -->
</body>
</html>
Here's the CSS:
#submit_button[disabled]
{
background: grey;
}
A css solution is:
.btn-submit:disabled {
/* your styles */
}
button:disabled{
background-color:red;
}
<button>Enabled</button>
<button disabled>Disabled</button>
I have a Pen, in which I have used jQuery slideToggle() function. But, on running the code, it seems like there is some space left on top, and the slide effect starts after that. What could be the possible reason?
$(() => {
let hidden = true,
eff = 'slide',
effFunc;
let display = () => {
$('.menu-list').toggle();
}
let fader = () => {
$('.menu-list').animate({
opacity: 'toggle'
}, 1000);
}
////////////////////////////////////
// Here is the function that makes the slide effect
let slider = () => {
$('.menu-list').slideToggle(1000);
}
////////////////////////////////////
$('input[name="effect"]').on('click', function() {
if (!hidden) {
effFunc();
hidden = !hidden;
}
eff = $(this).val();
});
$('.menu-head').on('click', function() {
if (eff == 'disp') {
effFunc = display;
} else if (eff == 'fade') {
effFunc = fader;
} else if (eff == 'slide') {
effFunc = slider;
}
effFunc();
hidden = !hidden;
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
margin: 0;
padding: 10px;
cursor: default;
user-select: none;
}
span {
display: inline-block;
box-sizing: border-box;
}
span.menu-head {
padding: 9px 0;
background: #FF872A;
width: 270px;
border-radius: 6px 6px 0 0;
text-align: center;
color: white;
text-shadow: 2px 2px 2px #5A5A5A;
font: 500 16pt Roboto;
}
span.menu-list {
border-radius: 0 0 6px 6px;
border: 0.1px solid #D7D7D7;
background: #D7D7D7;
width: 270px;
overflow: hidden;
display: flex;
flex-direction: column;
display: none;
}
span.menu-item {
width: 270px;
padding: 12px 27px;
color: #2A7AFF;
background: #EAEAEA;
font: 700 16pt Muli;
transition: all 0.7s;
}
span.menu-item:hover {
background: #2A9A3F;
color: #FAFAFA;
}
label.option-label {
position: fixed;
top: 10px;
right: 10px;
background: #9A9A9A;
color: #fff;
width: 25vw;
max-height: 33vh;
padding: 20px 12px;
border-radius: 4px;
box-shadow: -4px 4px 1px #C7C7C7;
}
label.option-label * {
margin: 10px 7px;
font: 600 16pt Tajawal;
}
input[type='radio'] {
transform: scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='menu-head'>Social Networks</span><br/>
<span class='menu-list'>
<span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>
<label class='option-label'>
<label>
<input type='radio' name='effect' value='disp'/> Show / Hide
</label>
<br/>
<label>
<input type='radio' name='effect' value='fade'/> Fade In / Fade Out
</label>
<br/>
<label>
<input type='radio' name='effect' value='slide' checked/> Slide Up / Slide Down
</label>
</label>
it's because the inline-block of .menu-list, add display : block to .menu-list and hide it in th begining with js so it will toggle back to display : block instead of display : inline-blick
$(() => {
let hidden = true,
eff = 'slide',
effFunc;
$('.menu-list').hide();
let display = () => {
$('.menu-list').toggle();
}
let fader = () => {
$('.menu-list').animate({
opacity: 'toggle'
}, 1000);
}
////////////////////////////////////
// Here is the function that makes the slide effect
let slider = () => {
$('.menu-list').slideToggle(1000);
}
////////////////////////////////////
$('input[name="effect"]').on('click', function() {
if (!hidden) {
effFunc();
hidden = !hidden;
}
eff = $(this).val();
});
$('.menu-head').on('click', function() {
if (eff == 'disp') {
effFunc = display;
} else if (eff == 'fade') {
effFunc = fader;
} else if (eff == 'slide') {
effFunc = slider;
}
effFunc();
hidden = !hidden;
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
margin: 0;
padding: 10px;
cursor: default;
user-select: none;
}
span {
display: inline-block;
box-sizing: border-box;
}
span.menu-head {
padding: 9px 0;
background: #FF872A;
width: 270px;
border-radius: 6px 6px 0 0;
text-align: center;
color: white;
text-shadow: 2px 2px 2px #5A5A5A;
font: 500 16pt Roboto;
}
span.menu-list {
border-radius: 0 0 6px 6px;
border: 0.1px solid #D7D7D7;
background: #D7D7D7;
width: 270px;
overflow: hidden;
display: flex;
flex-direction: column;
display: block;
}
span.menu-item {
width: 270px;
padding: 12px 27px;
color: #2A7AFF;
background: #EAEAEA;
font: 700 16pt Muli;
transition: all 0.7s;
}
span.menu-item:hover {
background: #2A9A3F;
color: #FAFAFA;
}
label.option-label {
position: fixed;
top: 10px;
right: 10px;
background: #9A9A9A;
color: #fff;
width: 25vw;
max-height: 33vh;
padding: 20px 12px;
border-radius: 4px;
box-shadow: -4px 4px 1px #C7C7C7;
}
label.option-label * {
margin: 10px 7px;
font: 600 16pt Tajawal;
}
input[type='radio'] {
transform: scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='menu-head'>Social Networks</span><br/>
<span class='menu-list'>
<span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>
<label class='option-label'>
<label>
<input type='radio' name='effect' value='disp'/> Show / Hide
</label>
<br/>
<label>
<input type='radio' name='effect' value='fade'/> Fade In / Fade Out
</label>
<br/>
<label>
<input type='radio' name='effect' value='slide' checked/> Slide Up / Slide Down
</label>
</label>
Here is my problem, I create dynamic span in specif area thanks to "Link", "FirstName", "Lastname" buttons, and I would like to check which button was clicked among them in order to change color. For example, If I click the first time on "Link" button, the span is added in the area, and the "Link" button will become red. And if I click once again on it, the span will be removed, and the button will become grey.
var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");
var myTags = new Object();
myTags['company'] = '#ENTREPRISE#';
myTags['city'] = '#VILLE#';
myTags['link'] = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname'] = '#NOM#';
myTags['title'] = '#TITRE#';
function editTag(zoneId, tag, button) {
var element = document.getElementById(button.id);
var zoneDiv = document.getElementById(zoneId + 'Draft');
var myButton = document.getElementById(zoneId + tag.ucfirst());
var myLabel = document.createElement('span');
var labels = zoneDiv.getElementsByTagName('span');
var spanSize = labels.length;
var delflag = 0;
var delIndex = 0;
if (spanSize != 0) {
for (myLabId = 0; myLabId < spanSize; myLabId++) {
var currentLabel = labels[myLabId];
if (currentLabel.innerHTML === myButton.innerHTML) {
delflag = 1;
delIndex = myLabId;
}
}
}
if (delflag == 1) {
zoneDiv.removeChild(labels[delIndex]);
button.classList.toggle("btn-success");
} else {
myLabel.setAttribute('class', 'label label-info');
myLabel.setAttribute('data-effect', 'pop');
myLabel.setAttribute('contentEditable', 'false');
myLabel.setAttribute('style', 'cursor:move;font-size:100%;');
myLabel.setAttribute('name', tag);
myLabel.setAttribute('draggable', 'true');
myLabel.innerHTML = myButton.innerHTML;
zoneDiv.appendChild(myLabel);
button.classList.toggle("btn-danger");
}
//Clean breaklines;
var bks = zoneDiv.getElementsByTagName('br');
var brSize = bks.length;
if (brSize != 0) {
zoneDiv.removeChild(bks[0]);
}
//Event keyboard on deleted elements
$("span").dblclick(function(handler) {
myLabel.remove(labels[delIndex]);
});
}
function saveMessage(zoneId) {
var zoneDiv = document.getElementById(zoneId + 'Draft');
var message = zoneDiv.childNodes;
var messSize = message.length;
var messageContent = '';
console.log(message);
for (var messId = 0; messId < messSize; messId++) {
var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
if (zoneId === 'mail') {
superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\-\n-]/g;
}
if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex))
// if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
{
messageContent += message[messId].nodeValue;
} else if (message[messId].nodeName === 'SPAN') {
if (message[messId].getAttribute("name") == undefined) {
continue;
}
//messageContent += myTags[message[messId].getAttribute("name")];
var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
messageContent += currentTag;
} else if (message[messId].nodeName === 'IMG') {
messageContent += message[messId].outerHTML;
} else if (message[messId].nodeName === 'BR') {
messageContent += message[messId].outerHTML;
} else if (message[messId].nodeName === 'DIV') {
messageContent += '<br>' + message[messId].innerHTML;
}
}
var myRegexp = /\+/;
messageContent.replace(myRegexp, '');
if (zoneId === 'sms') {
myRegexp = /\n/;
messageContent.replace(myRegexp, '');
}
var idInput = document.getElementById('id');
var myData = {
'rm': 'saveMessage',
'type': zoneId,
'message': messageContent,
'pid': idInput.getAttribute('value')
};
if (zoneId === 'mail') {
var mySubject = document.getElementById('objectArea');
myData = {
'rm': 'saveMessage',
'type': zoneId,
'subject': mySubject.value,
'mail': messageContent,
'pid': idInput.getAttribute('value')
};
if (document.getElementById('mailType1').checked) {
myData['mType'] = 'text';
} else if (document.getElementById('mailType2').checked) {
myData['mType'] = 'html';
}
}
$.post("index.pl", myData).done(function(data) {
window.alert(data);
});
}
String.prototype.ucfirst = function() {
return this.charAt(0).toUpperCase() + this.substr(1);
}
function previewMessage(zoneId) {
var zoneDiv = document.getElementById(zoneId + 'Draft');
var message = zoneDiv.childNodes;
var messSize = message.length;
var messageContent = '';
var previewDiv = document.getElementById("preview");
var mailPreview = document.getElementById('mailPreview');
if (zoneId === 'sms') {
previewDiv.setAttribute('style', '');
previewDiv.innerHTML = '<p>Génération en cours ...</p>';
} else if (zoneId === 'mail') {
mailPreview.innerHTML = 'Génération en cours...';
}
for (var messId = 0; messId < messSize; messId++) {
var superRegex = /[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s\.\,\--]/g;
if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(superRegex) && message[messId].nodeValue.length < 100)
//if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
{
messageContent += message[messId].nodeValue;
} else if (message[messId].nodeName === 'SPAN' && message[messId].nodeName.innerHTML !== '') {
if (message[messId].getAttribute("name") == undefined) {
continue;
}
//messageContent += myTags[message[messId].getAttribute("name")];
var currentTag = '#' + message[messId].getAttribute("name").toUpperCase() + '#';
messageContent += currentTag;
}
}
var myRegexp = /\+/;
messageContent.replace(myRegexp, '');
if (zoneId === 'sms') {
myRegexp = /\n/;
messageContent.replace(myRegexp, '');
}
var idInput = document.getElementById('id');
var myData = {
'rm': 'previewMessage',
'type': zoneId,
'message': btoa(messageContent),
'pid': idInput.getAttribute('value')
};
if (zoneId === 'mail') {
var mySubject = document.getElementById('objectArea');
myData = {
'rm': 'previewMessage',
'type': zoneId,
'subject': mySubject.value,
'mail': btoa(messageContent),
'pid': idInput.getAttribute('value')
};
}
$.post("index.pl", myData).done(function(data) {
if (zoneId === 'sms') {
previewDiv.innerHTML = '';
previewDiv.setAttribute("class", "preview");
previewDiv.setAttribute("style", "background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;");
var myText = document.createElement('p');
myText.setAttribute('class', 'smstext');
myText.innerHTML = atob(data);
//myText.innerHTML = data;
previewDiv.appendChild(myText);
} else {
mailPreview.innerHTML = atob(data);
}
});
}
function testMessage(zoneId) {
var costTestP = document.getElementById('costTest');
costTestP.innerHTML = 'Calcul en cours ...';
var zoneDiv = document.getElementById(zoneId + 'Area');
var message = zoneDiv.childNodes;
var messSize = message.length;
var messageContent = '';
for (var messId = 0; messId < messSize; messId++) {
if (message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100) {
messageContent += message[messId].nodeValue;
} else if (message[messId].nodeName === 'SPAN') {
messageContent += myTags[message[messId].getAttribute("name")];
}
}
var myRegexp = /\+/;
messageContent.replace(myRegexp, '');
myRegexp = /\n/;
messageContent.replace(myRegexp, '');
var idInput = document.getElementById('id');
var myData = {
'rm': 'testsms',
'message': messageContent,
'id': idInput.getAttribute('value')
};
$.post("index.pl", myData).done(function(data) {
var costTestP = document.getElementById('costTest');
costTestP.innerHTML = data;
});
}
$('#smsDraft').on('dragstart', function(e) {
console.log(e.target.nodeName);
if (e.target.nodeName !== 'SPAN') {
e.stopPropagation();
e.preventDefault();
return;
}
});
#smsArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 150px;
overflow: auto;
padding: 5px;
resize: both;
width: 100%;
}
.smstext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
.mailInput {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
overflow: auto;
padding: 5px;
resize: both;
font-size: 12px;
margin-top: 5px;
width: 300px;
height: 85px;
margin-left: 100px;
margin-top: -20px;
}
.mailtext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#webtag {
margin-top: -392px;
margin-left: 555px;
width: 569px;
}
#result {
display: none;
}
#interaction {
margin-top: 30px;
visibility: hidden;
}
#cd-popup {
background-color: rgba(94, 110, 141, 0.9);
opacity: 1;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: relative;
width: 100%;
max-width: 800px;
height: 350px;
margin: 4em auto;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 1;
}
#cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
#cd-popup p {
padding: 3em 1em;
margin-left: -250px;
height: 100px;
}
#cd-popup div {
float: left;
width: 30%;
list-style: none;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#object {
background: #fc7169;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: -400px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#object:hover {
background-color: #fc8982;
}
#body {
background: #6495ED;
border-radius: 0 0 0 .25em;
width: 175px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
margin-left: -150px;
}
#body:hover {
background-color: #fc8982;
}
#titre {
background: #A52A2A;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#titre:hover {
background-color: #fc8982;
}
#note {
background: #006400;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#cd-popup #note:hover {
background-color: lightsteelblue;
}
#cd-popup .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
#cd-popup .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
#cd-popup .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
#media only screen and (min-width: 1170px) {
#cd-popup {
margin: 8em auto;
}
}
.webArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 520px;
/*overflow: auto;*/
padding: 5px;
/*resize: both;*/
width: 630px;
font-size: 12px;
/*margin-top: 55px;*/
border: 2px dashed #D9D9D9;
border-radius: 5px;
text-align: center;
margin-top: 12%;
}
.webArea>div {
background-color: #FAEBD7;
border: 3px dashed #D9D9D9;
margin-bottom: 15px;
height: 120px;
width: 612px;
overflow: auto;
overflow-x: hidden;
/* margin-left: -1.5%;*/
}
.webArea>div>div {
transition: all .5s;
text-align: center;
float: left;
padding: 1em;
margin: 0 1em 1em 0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 5px;
border: 2px solid black;
/*background: #F7F7F7;*/
transition: all .5s ease;
width: 582px;
/*background-color: #F8F8FF;*/
height: 110px;
}
.dropTarget>div>div>span {
font-style: italic;
margin-right: 5%;
font-size: 16px;
}
.webArea>div>div>input {
margin-right: 25%;
width: 250px;
height: 40px;
background-color: white;
}
.webArea>div>div:active {
/*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
animation: wiggle 0.3s 0s infinite ease-in;*/
opacity: .6;
border: 2px solid #000;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#containerZone {
border: 1px solid;
border-radius: 25px;
*/ margin: 3%;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 8%;
margin-left: -450px;
}
#containerZone2 {
border: 1px solid;
border-radius: 25px;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 100%;
margin-left: -450px;
}
#webtags {
margin-top: -40px;
}
#webtags>div {
margin-left: 20px;
}
#modalTagBody {
height: 120px;
}
#btnTag {
margin-top: 20px;
margin-right: 15px;
}
<html>
<head>
<meta charset="utf-8">
<title>Drag & drop Tag</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>
<body>
<div class="container mtb">
<div class="row">
<TMPL_IF NAME="PROFILE">
<form role="form" action="<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
<TMPL_LOOP NAME="DATA">
<input type="hidden" id='id' name="id" value="<TMPL_VAR NAME=ID>" />
<TMPL_IF NAME="TEMPLATE">
<div class="panel panel-primary" id="panels" data-effect="helix">
<div class="panel-heading">SMS Message</div>
<div class="panel-body">
<div class="col-lg-6">
<div class="form-group">
</div>
<input type="hidden" name="rm" value="saveTemplate" />
<div id="smsArea" class="form-control" contenteditable="true">
<p id="smsDraft">
<TMPL_VAR NAME=TEMPLATE>
</p>
</div><br />
Save
Preview
SMS Costs
<br>
</div>
<div class="col-lg-6" id='smsTags'>
<h4 for="template">Personnalization</h4>
<span class="btn btn-default" onClick="editTag('sms','link', this)" id="smsLink" title="link of your website" draggable="true">Link</span>
<span class="btn btn-default" onClick="editTag('sms','firstname')" id="smsFirstname" title="your firstname" draggable="true">Firstname</span>
<span class="btn btn-default" onClick="editTag('sms','lastname')" id="smsLastname" title="your lastname" draggable="true">Lastname</span>
</div>
<div class="col-lg-6" style="margin-top: 30px">
</div>
</div>
</TMPL_LOOP>
</div>
<! --/row -->
</div>
<! --/container -->
</div>
</body>
</html>
You can pass reference of clicked button using 'this' e.g
onClick = "editTag('sms','link', this)"
Once you get refrence of clicked element in onClick function, you can access the same element and toggle css class(class for red color)
function editTag(zoneId, tag, elementRef) {
// Check if function has received element refrence and toggle class
if(elementRef){
var element = document.getElementById(elementRef.id);
element.classList.toggle("btn-danger")
}
var zoneDiv = document.getElementById(zoneId + 'Draft');
var myButton = document.getElementById(zoneId + tag.ucfirst());
var myLabel = document.createElement('span');
I have tried creating a like button for comments using Vue.js. However, the like button only seems to work on one comment (first) while the second comment appears as if it doesn't even recognize Vue.js syntax. Can someone point me in the right direction?
CodePen: http://codepen.io/chrisburton/pen/EVKLxL
new Vue({
el: '.containComments',
data: {
liked: false,
likesCount: 0
},
methods: {
toggleLike: function() {
this.liked = ! this.liked;
this.liked ? this.likesCount++ : this.likesCount--;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,200italic,300italic);
#import url(https://dl.dropboxusercontent.com/u/26380646/rocknroll/assets/style.css);
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
a {
-webkit-transition: .1s color linear;
-moz-transition: .1s color linear;
-o-transition: .1s color linear;
transition: .1s color linear;
}
a:hover {
-webkit-transition: .25s color linear;
-moz-transition: .25s color linear;
-o-transition: .25s color linear;
transition: .25s color linear;
}
/*
************************
Project Start
************************
*/
html {font-size: 18px;}
body {
background:;
color: #404040;
font-family: 'Source Sans Pro', Georgia;
font-size: 1em;
font-weight: 200;
line-height: 1.65;
letter-spacing: .01em;
margin: 50px 0;
padding: 0 25px;
}
section {
max-width: 500px;
min-width: 300px;
margin: 50px auto;
}
div.containComments {
position: relative;
border-bottom: solid 1px rgba(178, 179, 153, .15);
margin: 0 auto 50px auto;
}
div.containComments:last-child {
border: none;
}
p.username {
font-weight: 300;
margin-bottom: 25px;
}
p.username a {
color: #BFBFA8;
text-transform: lowercase;
text-decoration: none;
}
.reply {
color: #BFBFA8;
cursor: pointer;
}
p.username a:hover {color: #000;}
p.username img.maskable {
position: absolute;
top: -10px;
left: -70px;
width: 50px;
height: 50px;
border-width: 0;
border-radius: 100%;
}
.likesCount,
.icon-rocknroll {
position: relative;
float: right;
opacity: 0;
}
.likesCount {
top: 4px;
left: 0;
font-size: 15px;
margin-right: .05em;
}
.icon-rocknroll {
top: 7px;
left: 0;
background: none;
border: 0;
outline: none;
font-family: "icons";
font-size: 13px;
opacity: 0;
cursor: pointer;
}
div.containComments:hover .icon-rocknroll {
opacity: .44;
}
div.containComments:hover .icon-rocknroll:hover,
div.containComments:hover .likesCount {
opacity: .75;
}
.active,
active:hover,
div.containComments:hover .active {
opacity: .75;
}
div.containComments:hover .active:hover {
opacity: .44;
}
p.info {
font-size: 18px;
margin-bottom: 50px;
}
code {
font-family: "Source Code Pro";
}
/* Break */
#media (max-width: 775px) {
section {max-width: 400px;}
.icon-rocknroll {float: right;}
}
/* Smartphones Landscape */
#media (max-width: 600px) {
section {max-width: 350px;}
div.containComments {padding: 0 25px;}
img.maskable {
position: relative !important;
top:0 !important;
left: 0 !important;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.icon-rocknroll {
float: right;
top: 16px;
}
.likesCount {
top: 12px;
}
p.info {margin-left: 0;}
.closed {
width: 280px;
}
}
/* Smartphones Portrait */
#media (max-width: 500px) {
body {padding: 0;}
section {max-width: 270px;}
img.maskable {
position: relative !important;
top:0 !important;
left: 0 !important;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.icon-rocknroll {
float: right;
top: 15px;
}
p.info {margin-left: 0;}
.closed {
width: 270px;
text-align: center;
margin: 0 auto 50px auto;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js"></script>
<section class="comments">
<div class="containComments">
<p class="username">
<img class="maskable" src="https://en.gravatar.com/userimage/18343163/cf3a7b15b60479a37b2167e84ffb85a6.jpg?size=100" />
chrisburton
<button class="icon-rocknroll" v-class="active: liked" v-on="click: toggleLike"></button>
<span class="likesCount" v-class="active: liked">{{ likesCount }}</span>
</p>
<p class="info">Thank you for visiting all the way from New York. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also see that I wrote in a thank you introduction with your location.</p>
</div>
<div class="containComments">
<p class="username first">
<img class="maskable" src="http://assets.arabiaweddings.com/sites/default/files/news/2014/06/anna.jpg" />
AnnaWintour
<button class="icon-rocknroll" v-class="active: liked" v-on="click: toggleLike"></button>
<span class="likesCount" v-class="active: liked">{{ likesCount }}</span>
</p>
<p class="info first"><span class="reply">#chrisburton</span> +1. Really interesting reply.</p>
</div>
</section>
You have to create a Vue.component with a template to be able to reuse the code.
Vue.js
Vue.component('like', {
template: "<button class='icon-rocknroll' v-class='active: liked' v-on='click: toggleLike'></button>\
<span class='likesCount' v-class='active: liked'>{{ likesCount }}</span>",
data: function() {
return {
liked: false,
likesCount: 0
}
},
methods: {
toggleLike: function() {
this.liked = !this.liked;
this.liked ? this.likesCount++ : this.likesCount--;
}
}
});
new Vue({
el: '#app',
});
HTML
<like></like>