Everytime a checkbox inside my template is selected, I want to add a class to my polymer element or change polymer element's attribute.
Since my element uses label for attribute, I bound the ID of the checkbox to when instantiating the element in my markup
<label for="{{uniqueid}}" on-tap="{{toggle}}" />
<input type="checkbox" id="{{uniqueid}}" class="select" checked="{{checker}}">
<img src="{{image}}" alt="" class="prod-img">
<div class="grid-details">
<span>{{designer}}</span>
<span>{{product}}</span>
<span>{{currency}} {{price}}</span>
<span>Shipped from {{info}}</span>
</div>
</label>
I would then call the element like so
<gmselect-element uniqueid="four" image="http://i.imgur.com/fkq1QKq.jpg" designer="CUCARELIQUIA" product="Castellano Suede Bag Redder" info="Gijon, Spain" price="650" currency="$"></gmselect-element>
My toggle function looks like below
toggle: function() {
this.$.grid.setAttribute("class", "grid true");
this.setAttribute("selected", "true");
}
However, instead of setting it to true here, I would like to check the value of the checkbox's checked property. Since ID is not static, I can't get element using the $ functionality. I also don't know how to escape a data bound in moustache's to get its value inside a method.
this.$.grid.classList.add('classname')
this.$.grid.classList.remove('classname')
You've bound the checked value to {{checker}}, so you should be able to just refer to this.checker in your toggle function.
If you need to, you can also get the model data from the event. See:
https://www.polymer-project.org/1.0/docs/devguide/data-binding
Related
For my site, I code a button allowing to change the css of a class present in a div card. My button is located in the card-footer. Having several cards, I can't / don't think to retrieve the element with an id (as there will be X times the same ID)
In order to circumvent this system, I therefore use a parentElement which goes up to the div card
<div class="card">
<div class="card-body">
<p class="change">Change one</p>
<p class="change">Change two</p>
<p class="change">Change three</p>
</div>
<div class="card-footer">
<i id="updateData">change</i>
</div>
</div>
jQuery($ => {
$('#updateData').click(e => {
var element = e.target.parentElement.parentElement;
$('.change').css('display','none');
});
});
I would like to indicate that only the class "changes" present in my element variable and not all the classes in the page.
I don't know how to add a variable to my ".css" command, do you know how ?
Thanks in advance !
First of all since you will have multiple elements with same id that means that you should not use ID and use class instead. Id is meant to be unique. So yours id="updateData" should become class="updateData". Now you can grab all of those buttons and assign event to all of them instead of just first like you were by using id selector.
$('.updateData').click(e=> {});
Next in order to be able to use clicked element in jQuery way convert from arrow function to regular anonymous function since arrow function overrides this keyword. And now you can use jQuery to hide like
$('.updateData').click(function() {
element = $(this).parent().parent();
element.hide();
});
If you want more precise selection to hide only .change elements use
$('.updateData').click(function() {
element = $(this).parent().parent();
element.find(".change").hide();
});
Not bad, but more efficient, when you have multiple click targets, is delegation:
$(document).on("click", ".updateData", function() { ... });
Also .hide() is convenient, but rather then "change the css of a class" add a class "hidden" or something! In best case the class further describes what the element is. CSS is just on top.
I have two html pages page_1.html and page_2.html. In page_1.html, I have a button, which upon being clicked should redirect to page_2.html. But it should redirect only when the button has a charteuse background color.
So, in page_1.html, I have a button:
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
<button id="button" onmouseover="hovar()" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
My javascript (back_end.js):
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.style.backgroundColor="lightsalmon"
}
else{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
function submit(){
var btn=document.getElementById("button");
if (getComputedStyle(btn).backgroundColor == "charteuse"){
window.location.href="page_2.html";
}
}
But, it doesn't redirect to page_2.html. What am I missing here? I have also tried window.location.replace("page_2.html"), but it's the same.
EDIT: I have changed the code a little, it's from a project I'm doing. I have also tried getComputedStyle(document.getElementById("button")).backgroundColor, but it doesn't work.
Another thing that I've noticed, is that when I use:
if (btn.style.backgroundColor == "charteuse"){
//console.log(true)
location.href="page_2.html";
}
it prints true into the console but still doesn't redirect to page_2.html.
But if I use:
if (getComputedStyle(btn).backgroundColor == "charteuse"){
//console.log(true)
window.location.href="page_2.html";
}
it doesn't print true into the console.
But nevertheless, in both the cases, it doesn't redirect to page_2.html
ElementCSSInlineStyle.style
The style property is used to get as well as set the inline style of
an element. When getting, it returns a CSSStyleDeclaration object that
contains a list of all styles properties for that element with values
assigned for the attributes that are defined in the element's inline
style attribute.
https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
So your if-conditon document.getElementById("button").style.backgoundColor == "red" does never return true because the color is defined in your css-file and not as an inline argument.
A solution would be using getComputedStyle(element) which returns the actuall style from the css-file.
getComputedStyle(document.getElementById("button")).backgroundColor == "red"
as explained here https://zellwk.com/blog/css-values-in-js/
Also in your css, you can remove the quotationmarks around "red" as mentioned by #George
The styles property doesn't directly reflect your CSS, so running
if(document.getElementById("button").style.backgoundColor=="red"){
never works.
What you can do is change the color to red using javascript:
function changeButtonColor(color) {
document.getElementById("button").style.backgoundColor = color;
}
changeButtonColor('red');
So you do this, wherever you need to change the background color, your if statement will work correctly and you can switch.
so you should compare like this
var btn=document.getElementById("button");
if (getComputedStyle(btn).backgroundColor == "rgb(127, 255, 0)"){
window.location.href="page_2.html";
}
}
i have some <div></div> elements with draggable="true" attribute but same thing gets applied on child elements,but i dont want to apply it on child elements, So how do i prevent this default behavior?
code :
<div draggable="true" ondragstart="play(event)" ondrop="pause(event)" id="move">
<span id="text">
drag me
</span>
</div>
as i used dragable="true" on <div> so span also gets the same property.
I was having a similar event with a sortable drag-and-drop "list" I created. Each "row" of the list looks like this.
<div class='row' draggable='true'>
<div class='drag-handle' ></div>
<img class='icon-image' draggable='false'>
<input type='text' name='demo' >
<button class='remove-btn' onclick='removeItem(this,event)'>Remove</button>
</div>
When I tried selecting the text inside of the "input" element, somehow I would start dragging the whole "row". As frustrating as this was, the best solution I found was to simply apply the draggable='true' property to the item with the class="drag-handle" which would be my dragging icon that would fire the ondragstart(e) event.
The rest can be handled in JS
In JS, reference the parent element "row" by using the closest(".row") method
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.drag-handle').forEach(handle => {
handle.addEventListener("dragstart", dragStart)
handle.addEventListener("drag", dragging)
handle.addEventListener("dragend", dragEnd)
})
function dragStart(e) {
document.querySelectorAll(".row").forEach(row=>{
row.addEventListener("dragover", dragOver)
})
var target_row = e.target.closest(".row")
target_row.classList.add("dragging")
}
Note:
I added a class of "dragging" to the one "row" that was going to be dragged so I could do a querySelectorAll('.row:not(.dragging)') for other operations, classes, etc, however, this is NOT required for the intended purpose to work. Just a bit more context that hope helps your problem.
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
So I'm working with Angular and I'm trying to make a button that when clicked disappears. I have tried to use [hidden], (click)="showHide = !showHide", and a bunch of other methods. Nothing is working so far.
My html (currently):
<div class="rows">
<div class="a-bunch-of-styles-for-my-button">
<a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
</a>
</div>
</div>
and my component:
export class AppComponent {
inboundClick = false;
}
In essence I have 2 buttons on a page and when one button is clicked I want to hide both buttons and display a set of new buttons.
I'm very new to Angular and I'm very confused why this won't work.
Your HTML
<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>
Your TypeScript
export class AppComponent {
private isButtonVisible = true;
}
This should do the job. *ngIf automatically hides the element, if the condition evaluates false, so setting the variable to false is sufficient.
The problem I see here is, that you don't control the visibility at any point. Using [ngClass] to add a specific class, if a condition is met, or *ngIf is helpful, whenever you try to change elements on user interaction.
For more information on [ngClass], you can read about its usage here: https://angular.io/api/common/NgClass
You can read about *ngIf here: https://angular.io/api/common/NgIf
Especially the "Common Use" part should be interesting for you.
Edit:
Reading your comment below it seems you did not notice what [hidden] and (click) actually do. [hidden] controls the visibility of the element, usually dependent on a certain condition. (click) however is a quick way to bind a Click-Event to your element.
Using both of those tools enables to hide an element, by changing a variable, if a user clicks on your element (the new value of the variable may be assigned by a function called by (click) or inline, as demonstrated in the example code).
Edit2: Yep, you meant Angular2/4 ;) So this should do the job.
Here is how you can achieve that:
In your component.html:
<a type="button" class="more-styles"
[hidden]="!inboundClick"
(click)="inboundClick = !inboundClick"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" class="more-styles"
[hidden]="!outboundClick "
(click)="outboundClick = !outboundClick "
[routerLink]="['/outbound']" href="">
</a>
... and in your AppComponent:
export class AppComponent {
inboundClick = true;
outboundClick = true;
}
PLUNKER DEMO
Here is a neat way to hide/remove items, specially handy if there is a list of items.
Note how it takes advantage of Angular's template variables (#ListItem).
So your template can either be something like:
<a type="button" #ButtonA
(click)="onClick(ButtonA)"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" #ButtonB
(click)="onClick(ButtonB)"
[routerLink]="['/outbound']" href="">
</a>
Or like this:
<ng-container *ngFor="let item of list">
<div #ListItem>
<button (click)="onClick(ListItem)">
</div>
</ng-container>
Depending on how you want to hide - if you want to remove it from DOM, or just hide it with CSS. And depending if you want to toggle it or just remove it completely. There are a few options:
Remove element from DOM (no way to get it back):
close(e: HTMLElement) {
e.remove();
}
Hiding it with the hidden attribute - beware that the hidden attribute can be overriden by CSS, it will happen if you are changing the display property and the rule has more precedence:
close(e: HTMLElement) {
e.toggleAttribute('hidden');
}
Hiding it "manually" with CSS:
close(e: HTMLElement) {
e.classList.toggle('hide-element');
}
.hide-element {
display: none;
}