I'm developing an AngularJS Ionic Meteor app, and I need to change the background color of the botton box of an ionic card depending of it contents (a float). The ranges are:
data<=80
81 < data <= 160
161 < data <= 233
234 < data<= 317
318 < data <= 400.
Is there a CSS way to do it, or an AngularJS way instead?
You could use ngClass. Just setup your CSS background-color properties and set in your controller the appropriate class, for example:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.submit = function() {
if ($scope.data <= 80) $scope.rangeColor = "red";
// Add more conditional statements
else $scope.rangeColor = "blue";
}
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<form ng-submit="submit()">
<input type="text" name="data" ng-model="data" required>
<input type="submit" id="submit" value="Submit" />
</form>
<br />
<div ng-class="rangeColor" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could also implement the conditional statements in your HTML elements:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<input type="text" name="data" ng-model="data" required>
<br />
<br />
<div ng-class="{'red': data <= 80, 'blue': data > 80}" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could use
ng-style
https://docs.angularjs.org/api/ng/directive/ngStyle
or
ng-class
Related
To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
How can I concatenate the values of my div when they are click in one variable?
here is my code sample.
var concatenated_values; //1,2,3
$("#first_container").click(function() {
console.log($("#first_container input:hidden").val());
});
$("#second_container").click(function() {
console.log($("#second_container input:hidden").val());
});
$("#third_container").click(function() {
console.log($("#third_container input:hidden").val());
});
#first_container, #second_container , #third_container{
width:300px;
height:200px;
background:red;
cursor:pointer;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="first_container">
<p>Test 1</p>
<input type="hidden" value='1'/>
</div>
<div id="second_container">
<p>Test 2</p>
<input type="hidden" value='2'/>
</div>
<div id="third_container">
<p>Test 3</p>
<input type="hidden" value='3'/>
</div>
</div>
</body>
</html>
so when I click all of my div I am trying to have a value in my concatenated_values like this
1,2,3
and I still can click the other div it is like unselecting, so when I click the selected div, it should update my variable and remove its value on it.
1,3
Any help would be really appreciated.
Make your variable as a array and save the values of the divs in that array.
Afterwards you can loop through that array and print all values if needed or make use of other array functions like reduce to calculate i.e. the sum.
var concatenated_values = []; //1,2,3
$("#first_container").click(function() {
const input = $("#first_container input:hidden").val();
if (concatenated_values.includes(input))
concatenated_values.splice(concatenated_values.indexOf(input), 1);
else
concatenated_values.push($("#first_container input:hidden").val());
console.log(concatenated_values);
});
$("#second_container").click(function() {
const input = $("#second_container input:hidden").val();
if (concatenated_values.includes(input))
concatenated_values.splice(concatenated_values.indexOf(input), 1);
else
concatenated_values.push($("#second_container input:hidden").val());
console.log(concatenated_values);
});
$("#third_container").click(function() {
const input = $("#third_container input:hidden").val();
if (concatenated_values.includes(input))
concatenated_values.splice(concatenated_values.indexOf(input), 1);
else
concatenated_values.push($("#third_container input:hidden").val());
console.log(concatenated_values);
});
#first_container,
#second_container,
#third_container {
width: 300px;
height: 200px;
background: red;
cursor: pointer;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="first_container">
<p>Test 1</p>
<input type="hidden" value='1' />
</div>
<div id="second_container">
<p>Test 2</p>
<input type="hidden" value='2' />
</div>
<div id="third_container">
<p>Test 3</p>
<input type="hidden" value='3' />
</div>
</div>
</body>
</html>
You can store the values in an array and then push or filter the value if is present/not present in the array.
var concatenated_values = []; //1,2,3
$("#first_container").click(function() {
checkValues($("#first_container input:hidden").val());
console.log(concatenated_values.join(','));
});
$("#second_container").click(function() {
checkValues($("#second_container input:hidden").val());
console.log(concatenated_values.join(','));
});
$("#third_container").click(function() {
checkValues($("#third_container input:hidden").val());
console.log(concatenated_values.join(','));
});
function checkValues(x) {
var i = concatenated_values.indexOf(x);
if(i !== -1) {
concatenated_values = concatenated_values.filter(function(v){
return v !== x;
});
} else {
concatenated_values.push(x);
}
}
#first_container, #second_container , #third_container{
width:300px;
height:200px;
background:red;
cursor:pointer;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="first_container">
<p>Test 1</p>
<input type="hidden" value='1'/>
</div>
<div id="second_container">
<p>Test 2</p>
<input type="hidden" value='2'/>
</div>
<div id="third_container">
<p>Test 3</p>
<input type="hidden" value='3'/>
</div>
</div>
</body>
</html>
You really don't need to add the separate click event for each of the div.
Then give some border or change the background color to know the difference clicked or not. So I have added some class if it is clicked.
So the final code is
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
var concatenated_values = [];
$().ready(function () {
$("#first_container, #second_container, #third_container").click(function () {
var val = $(this).find('input:hidden').val();
var indx = concatenated_values.indexOf(val);
if (indx > -1) {
concatenated_values.splice(indx, 1);
$(this).removeClass('selected');
} else {
concatenated_values.push(val);
$(this).addClass('selected');
}
console.log(concatenated_values);
});
});
</script>
<style>
#first_container,
#second_container,
#third_container {
width: 300px;
height: 200px;
background: red;
cursor: pointer;
margin:10px;
padding: 10px;
}
.selected {
border: 2px solid rgb(48, 47, 46);
}
</style>
</head>
I would suggest you change your logic to not use a global variable at all. If you amend the HTML so that you place a common class on each clickable div, then you can use a class to keep track of which is 'active', in order to make an array of the child input values. You can then join() this to make the string you require.
This approach is more maintainable, extensible and simpler. Here's an example:
$('.sub-container').on('click', e => {
let $this = $(e.target).toggleClass('active');
let concatenated_values = $('.active').map((i, el) => $(el).find('input').val()).get().join(',');
console.log(concatenated_values);
});
.sub-container {
width: 300px;
height: 200px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div id="first_container" class="sub-container">
<p>Test 1</p>
<input type="hidden" value="1" />
</div>
<div id="second_container" class="sub-container">
<p>Test 2</p>
<input type="hidden" value="2" />
</div>
<div id="third_container" class="sub-container">
<p>Test 3</p>
<input type="hidden" value="3" />
</div>
</div>
Using classes will simplify things, below I use a class called selected, you can then use the toggleClass method to flip on an off.
You can then just find all Div's with the selected class, and add up the values.
eg.
$('.container > div').click(function () {
var $t = $(this);
$t.toggleClass('selected');
var concatenated = [];
$t.closest('.container')
.find('.selected').each(function () {
concatenated.push($(this).find('input').val());
});
$('#result').text(concatenated.join(','));
});
.container > div {
width:300px;
height:30px;
background:red;
cursor:pointer;
}
.container > .selected {
background: pink;
}
#result {
width:300px;
height:30px;
background: yellow;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="first_container">
<p>Test 1</p>
<input type="hidden" value='1'/>
</div>
<div id="second_container">
<p>Test 2</p>
<input type="hidden" value='2'/>
</div>
<div id="third_container">
<p>Test 3</p>
<input type="hidden" value='3'/>
</div>
</div>
<p>Result</p>
<div id="result"></div>
</body>
</html>
So when I press either buttons, the text should render in a fixed position. However, the text does render but it requires the closing animation of the previous text to finish before it takes the fixed position. The codes are as below:
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate#1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<input type="button" value="Show A" data-ng-click="boolA()" />
<input type="button" value="Show B" data-ng-click="boolB()" />
<input type="button" value="Show C" data-ng-click="boolC()" />
<div data-ng-show="bool.a" class="test">
<h1>Picked A</h1>
</div>
<div data-ng-show="bool.b" class="test">
<h1>Picked B</h1>
</div>
<div data-ng-show="bool.c" class="test">
<h1>Picked C</h1>
</div>
</div>
CSS
.test.ng-hide-add,.test.ng-hide-remove{
transition:0.5s linear all;
opacity:1;
}
.test.ng-hide{
opacity:0;
}
JS
var app=angular.module('myApp',['ngAnimate']);
app.controller('myCtrl',function($scope){
$scope.bool={
a:false,
b:false,
c:false
}
$scope.boolA=function(){
$scope.bool.a=true;
$scope.bool.b=false;
$scope.bool.c=false;
}
$scope.boolB=function(){
$scope.bool.a=false;
$scope.bool.b=true;
$scope.bool.c=false;
}
$scope.boolC=function(){
$scope.bool.a=false;
$scope.bool.b=false;
$scope.bool.c=true;
}
});
Here is a JSFiddle implementation of what I have so far: link
Any tips is appreciated. Thanks for reading!
You need to use a parent div and set position: absolute to the .test divs, I also shortened your code a little:
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
$scope.bool = {
a: false,
b: false,
c: false
}
$scope.showBool = function(currKey){
for(var key in $scope.bool){
if(key === currKey) $scope.bool[key] = true
else $scope.bool[key] = false
}
}
})
.results { position: relative; }
.test {
position: absolute;
top: 0; left: 0;
}
.test.ng-hide-add,
.test.ng-hide-remove {
transition: 0.5s linear all;
opacity: 1;
}
.test.ng-hide {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate#1.7.8/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="Show A" ng-click="showBool('a')" />
<input type="button" value="Show B" ng-click="showBool('b')" />
<input type="button" value="Show C" ng-click="showBool('c')" />
<div class="results">
<div ng-show="bool.a" class="test">
<h1>Picked A</h1>
</div>
<div ng-show="bool.b" class="test">
<h1>Picked B</h1>
</div>
<div ng-show="bool.c" class="test">
<h1>Picked C</h1>
</div>
</div>
</div>
I need help with jQuery (or JavaScript). I have a form with three checkbox alike elements. Want to get description text and input value for sending the data via AJAX form. Ajax is working quite good but I can not travel to the DOM to bring my desired data.
$('.select-item').on('click', function() {
$(this).toggleClass('active');
})
var activeItems = $('.select-item.active');
for( var i = 0, l = activeItems.length; i < l; i++ ) {
console.log( activeItems[i].children[1] );
console.log( activeItems[i].children[2] );
}
.select-item {
background-color: #f7f7f7;
margin-bottom: 20px;
padding: 15px;
}
.selector {
height: 20px;
width: 20px;
border: 1px solid blue;
position: relative;
}
.selector .circle {
height: 10px;
width: 10px;
background-color: blue;
position: absolute;
top: 5px;
left: 5px;
opacity: 0;
}
.active .selector .circle {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="ticket-booking-form-1">
<div class="select-item active">
<!-- SELECTION ITEM -->
<div class="selector">
<div class="circle"></div>
</div>
<div class="description">
<h4 class="title-text">Day 1 Full Day Ticket <span class="text-color">$129</span></h4>
</div>
<div class="select-input">
<label for="qty-1">QTY</label>
<input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
</div>
</div>
<div class="select-item">
<!-- SELECTION ITEM -->
<div class="selector">
<div class="circle"></div>
</div>
<div class="description">
<h4 class="title-text">Day 1 Full Day Ticket <span class="text-color">$129</span></h4>
</div>
<div class="select-input">
<label for="qty-1">QTY</label>
<input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
</div>
</div>
<div class="select-item">
<!-- SELECTION ITEM -->
<div class="selector">
<div class="circle"></div>
</div>
<div class="description">
<h4 class="title-text">Day 1 Full Day Ticket <span class="text-color">$129</span></h4>
</div>
<div class="select-input">
<label for="qty-1">QTY</label>
<input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
</div>
</div>
<!-- /END SELECTION ITEM -->
<button type="submit" class="btn btn-base btn-lg"><span>Proceed to Checkout</span>
</button>
</form>
The scenario is, Description text and input value of selected (checked) elements should be added into an array or object then I can send single/both/all data of selected (active) elements. Actually I am not good at JS so if you think without adding into array or object solution could be achieved, Perfect!
http://jsfiddle.net/getanwar/t2d3sjmq/
Once you see the fiddle will understand my question.
To get the value of the active inputs use
for( var i = 0, l = activeItems.length; i < l; i++ ) {
console.log( activeItems[i].children[2].children[1].value );
}
With JQuery you can use something like
$('.select-item.active > .select-input').each( function(index,element){
console.log( $(this).find('input').attr('value') );
});
I have implemented the following file upload which is an input-group based on this answer and its source. I need to reset the file input and its text input on the click of "Reset" button. For this I have used the wrap and unwrap methods based on this answer and this comment to reset it. The reset is not working in eclipse but works fine in JSFiddle and Bootply(Not working in IE 11). Can anyone help me find out what's wrong?
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="CustomStyleSheet.css">
<script src="CustomJavaScript.js"></script>
</head>
<body>
<div class="container-fluid">
<form class="form-horizontal" id="fileUploadForm">
<div class="row" style="margin-top:15px">
<div class="form-group">
<label class="control-label col-xs-4 col-sm-4 col-md-4">Select File</label>
<div class="controls col-xs-6 col-sm-6 col-md-6">
<div class="input-group" id="fileGroup">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse <input type="file" id="files" multiple>
</span>
</span>
<input type="text" id="fileName" class="form-control" readonly>
</div>
</div>
</div>
</div>
<div class="row" style="margin-right:15px">
<div class="pull-right">
<button type="button" class="btn btn-default" id="resetFileUpload">Reset</button>
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
</body>
</html>
JavaScript
$(document).on('change', '.btn-file :file', function () {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready(function () {
$('.btn-file :file').on('fileselect', function (event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if (input.length) {
input.val(log);
} else {
if (log) alert(log);
}
});
});
function reset_form_element(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
$('#resetFileUpload').on('click', function (e) {
reset_form_element($('#files'));
reset_form_element($('#fileName'));
e.preventDefault();
});
CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
input[readonly] {
/*background-color: white !important;*/
cursor: text !important;
}
Just to confirm: are you attempting to remove an uploaded file client-side?
Try this in your reset button click event, where the variable "id" is the id of the file upload input. It simply sets the innerHTML of the element to the same element's innerHTML. This works in ie9 and google chrome, I've not had to test other browsers.
By the way, I've no idea why this works (stole it from a web site), if anyone does know please leave a comment.
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML;
Try this
var $input = $('#inputId').parents('.form-group').find('input');
$input.val('').trigger('change');
$input.trigger('cleared');
I just encountered this same issue in my application. For some reason in IE 11, a .reset() on the form does not work to clear out the value. The reset works fine in IE 10, FF, and Chrome though. I was able to explicitly set value="" on the input control in IE 11 and that cleared it.