I've made a page with bootstrap, and i would like to have an action when the user clicks on the row. This is easy, I put ng-click on the div that is the row.
However, inside the row elements I've a link, and I would like to avoid the firing of the ng-click when the user clicks on the link (in that case it should open the url of the link)
this is a picture of the row. Bascially if the use clicks anywhere except the link simbol it should filre the ng-click, if it clicks on the link simbol it should open the url.
is this possible?
PS: I tried to put ng-click on each item except the href element, but the href element is inside a column within other things, and if I don't put the ng-click on the column it will not fire if the use clicks on the empty space of the column.
<div class="col-sm-8" >
</i> |
<span class="h5 small">{{club.description}}</span>
</div>
$event.stopPropagation() on ng-click of anchor tag to bubble up event.
Markup
<div class="col-sm-8" ng-click="myMethod()">
<i class="fa fa-link"></i> |
</div>
You have to stop the event propagation from anchor to its parent div which has the click event handler.
<div class="col-sm-8" ng-click="onRowClick()">
</i> |
<span class="h5 small">{{club.description}}</span>
</div>
JS
$scope.onLinkClick = function (e) {
e.stopPropagation();
}
Try adding ng-click="$event.stopPropagation();" to your anchor tag
<i class="fa fa-link"></i>
Related
I want to show loader on icon/button click. In foreach loop, there is a list with delete icon. While click delete icon i want to show loader near that particular icon. I am using like below.
Html code:
<span id="deletefile">
<i class="fas fa-trash-alt"></i>
<div class='loader' style='display:none'></div>
</span>
Jquery code:
$('span#deletefile').click(function() {
$('#deletefile').find('.loader').show();
}
Since it is a loop, the loader visible near each delete icons.
How to show loader at particular click icon. Pls give me idea
Edited as per Satya S answer. It triggers always first icon. Where I am doing wrong?
If you are creating that html in a loop you will have multiple elements with the same id which is invalid.
Instead, use a class.
<span class="deletefile">
<i class="fas fa-trash-alt"></i>
<div class='loader' style='display:none'></div>
</span>
$('span.deletefile').click(function() {
$(this).find('.loader').show();
}
Add id attribute to your button. Then you should be able to do -
$('#delete-button-id').find('.loader').show()
This is will find the child loader to each delete button and show that.
Make sure the loader is a child of the delete button with the id.
I am creating a custom dropdown menu.
The menu contains some items and should remain open when a user clicks on any of these items.
To check if the user clicks inside the dropdown menu I check via window.onclick if event.target.matches('dropdown-content *'). See the snippet below for context.
<div id="myDropdown" class="dropdown-content">
<div class="dropdown-grid">
<div class="add-offset">
<div class="dd-header">
<div (click)="setupNewCol()"><i class="fas fa-plus plus-sign"></i></div>
</div>
</div>
</div>
</div>
This works, but when I add *ngIf to the div with the function call the CSS selector 'dropdown-content *' doesn't seem to work anymore.
This is the HTML with the *ngIf
<div id="myDropdown" class="dropdown-content">
<div class="dropdown-grid">
<div class="add-offset">
<div class="dd-header">
<div *ngIf="!settingNewOffset; else offsetSelection" (click)="setupNewCol()"><i class="fas fa-plus plus-sign"></i></div>
<ng-template #offsetSelection>
<div (click)="addCol()">
CLICK ME
</div>
</ng-template>
</div>
</div>
</div>
</div>
With the introduction of the *ngIf in combination with ng-template the CSS selector doesn't recognize the clicks to be part of '.dropdown-content *' anymore. Why is this and what is a solution to this problem?
Why it won't register the click on target 'dropdown-content' is probably because now the clicked target is a div, that does not have 'dropdown-content'. Probably the target parent has that class, but not the target.
To check if a user clicks on any of the items. You already have methods addCol() or setupNewCol(). If this method runs then user has clicked some of the item where the method was attached. You could also just attach another method to the item e.g (click)="addCol(); onItemClick($event)"
onItemClick(event:any) {
console.log(event)
}
I don't see where the menu closing part is but using onItemClick you could just cancel that or try to cancel the event from propagating at all.
(click)="addCol(); event.stopPropagation()"
Frequently I'm faced with the task of using material icons and turning them into interactive buttons. For instance, there might be an icon that when clicked reveals text and rotates. When it's clicked again it rotates back to the original position and the text disappears.
<div onClick={toggleButton()}>
<i
role="toggle button"
aria-pressed="true"
alt="Toggle text"
class="material-icons"
>
toggle_off
</i>
Random text...
</div>
<div onClick={toggleButton()}>
<i
role="toggle button"
aria-pressed="true"
alt="Toggle text"
class="material-icons"
>
toggle_on
</i>
</div>
-an if conditional would render either of these divs based on pressed or not pressed
Typically, I handle this button adding a role, aria-state, and alt text to the material icon and change the aria-state when clicked. However, I always feel that I might not be doing this as effectively as I should.
What is the proper way to make something like an icon used as a toggle button accessible?
(I know that best practice for WCAG (web accessibility) is to use a button component, but because of the unique nature of material icons that's not possible.)
You'll need to change a few things:
role="toggle button" should be role="button"
Beginning with aria-pressed="true" is fine if your default button state is pressed. Otherwise, its initial value should be false
Get rid of alt, as it doesn't belong here. If you're including text in your icon (as in your example code), you don't need to replace anything. Otherwise, use aria-label and put your button text there
Add tabindex="0" so that your icon can be reached by keyboard
Event handling
To make your icon behave like a real button, you'll also need to listen for keys like the space-bar and enter key. These keystrokes should be treated as clicks, as a real button would.
const el = document.querySelector('my-icon');
el.addEventListener('keypress', handleKeyPress);
el.addEventListener('click', handleClick);
function handleClick() {
// Update aria-pressed
}
function handleKeyPress(e) {
// Handle space-bar and enter key
}
So, in the end, your toggle icon button might look something like this:
<i
role="button"
aria-pressed="false"
class="material-icons"
>
Button text
</i>
or (sans visible button text):
<i
role="button"
aria-pressed="false"
aria-label="Button text"
class="material-icons"
></i>
I have a parent search.html and inside that I am including another html search-form.html and attribute.html through ng-include.
Now the inner html search-form.html has another inner html searchresults.html which has a anchor tag onclick of that I want to point to attribute.html which is included in the parent search.html.
My search.html code :
<div class="panel panel-primary">
<!-- Search FORM + RESULTS Panels -->
<div ng-include="'modules/search/tp/search-form.html'">
</div>
<div ng-show="isAttributeResultExist()">
<!--Include ATTRIBUTES PANEL -->
<div ng-include="'modules/search/attribute.html'">
</div>
</div>
search-form.html code:
<!--Search RESULTS Tab: Individual-->
<div ng-show="isPersonSearch()">
<div ng-include="'modules/search/searchresults.html'">
</div>
</div>
searchresults.html anchor tag :
<a href="#" ng-click="buildDetails(searchResult.person.Id);">
<i class="fa fa-fw fa-search fa-lg"></i>
</a>
I want to click the anchor tag inside this searchresults.html and jump to start of attribute.html inside search.html.
How to do that?
Inside your search.html, add an id to the div that loads your attributes.
<div id="jumpHere" ng-include="'modules/search/attribute.html'">
Normally you could just add that id to an anchor tag on your page and you would jump to that section of the page.
Jump to section
However, it appears that you are using Angular and would need to work in the location into your buildDetails() method. You want to use the $location service.
$scope.buildDetails = function() {
//other functionality here
$location.path('jumpHere');
};
I'm making a list app and I'm and trying to add a remove button, so that you can remove lists and list items.
My question is, how do I add this button within a list item? I want the whole list item to be clickable, but when I press the span element i don't want the anchor tag to activate, only the ng-click event.
<div class="list-group">
<a href="#/list" class="list-group-item">
{{listName}}
<span class="glyphicon glyphicon-remove pull-right" ng-click="delete()"></span>
</a>
</div>
I'm using bootstrap, feel free to suggest other ways to add this remove button.
You Can add this JQuery code:
$(a).click(function(){ return false;});