I am working on a phonegap. I have made a kind of "custom button", which is actually just a <div> with an ng-click attached to it.
However, I am encountering 2 problems:
How do I give the user a feedback on his touch event? Buttons have a sort of default wired up animation. How would I add a "highlight" animation on div touch?
ng-disabled doesn't seem to stop the user from activating the ng-click event wired up to the button. - Solved!
here is the code for a sample button:
<div class="app-button center" ng-click="contactEmployee('email')" ng-disabled="buttonDisabled">
<div class="absolute">
<p class="absolute app-button-title-text">title</p>
<div class="app-button-icon-container absolute">
<img src="img/envelope-icon.png" class="absolute app-button-icon">
</div>
</div>
</div>
Related
I have the following setup in my page
When I click the main box for a division it becomes selected then the department and teams are updated in the tabs on the right. However I also want to click the edit icon to edit the name of the division.
Because the edit click event is inside the select division click event both events are being triggered when I click on edit.
What would be the solution to this? How do I click the edit button and only trigger that event without triggering the select division event? Do I have to move it outside the html then relative position it? Is there a better way?
<div class="divisionList">
<div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
<form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
<h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
<input matInput #editTitle (change)="submit()"
*ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
id="title2" formControlName="division" />
<div fxFlex></div>
<mat-icon (click)="editDivisionName(division)">edit</mat-icon>
</form>
</div>
</div>
This the way click events are handled in JavaScript. They 'bubble' or propagate up through the parent elements. You'll need to handle the event and explicitly tell it to not propagate up the chain of elements.
<div class="divisionList">
<div *ngFor="let division of filteredDivisions" (click)="selectDivision(division)"
<form [formGroup]="formDivision" fxLayout="row" class="divisionForm">
<h4 *ngIf="!isDivisionNameBeingEdited(division)">{{division.name}}</h4>
<input matInput #editTitle (change)="submit()"
*ngIf="isDivisionNameBeingEdited(division)" class="mrmd titleInput"
id="title2" formControlName="division" />
<div fxFlex></div>
<mat-icon (click)="editDivisionName($event, division)">edit</mat-icon>
</form>
</div>
</div>
in .ts file
editDivisionName($event: MouseEvent, division) {
$event.stopPropagation();
}
StackBlitz demonstration
I am trying to use a loading spinner in an embedded iframe in a Dynamics 365 application. I am using this library: https://loading.io/button/. I can see that the CSS loads properly, because it shows the spinning icon when had a class of running on the button/div element.
What I'm trying to do is add the "running" class to the button when it is clicked, so the user knows that an action is occurring and they should expect something to happen in the near future. However, when I have code that adds the "running" class to the button, it does not seem to work. Here's my code:
$("#retakeButton").on("click", function () {
$("#retakeButton").addClass('running');
\\\\\\ LOGIC GOES HERE \\\\\\
$("#retakeButton").removeClass('running');
});
And here is my HTML:
<div id="outerBorder" class="container embed-responsive ">
<div class="col-md-12" id="topbuttons">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div type="button" id="retakeButton" class="btn btn-primary hovering ld-over">
<strong>Take Photo</strong>
<div class="ld ld-ring ld-spin-fast"></div>
</div>
</div>
</div>
</div>
<div id="carousel" class="slideshow-container"></div>
<br>
<div id="dots" style="text-align:center"></div>
</div>
What is strange is that if I open the console and select the iframe as the target, I can get it to show the in progress animation by running $("#retakeButton").addClass('running');. However, it doesn't seem to work in the javascript that is referenced by the HTML.
I just tested this, its working.
For clear visibility, I added a border for div, also commented out the removeClass for testing (it may be too fast to notice).
<div id="div_loader" class="btn btn-default ld-ext-top" style="border:solid; font-size:2em">
<div class="ld ld-ring ld-spin-fast"></div>
</div>
$("#div_loader").on("click", function () {
$("#div_loader").addClass('running');
//do some logic
//$("#retakeButton").removeClass('running');
});
One last thing. Problem could be by class hovering - you can remove & test your code.
Consider this code:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false">CLOSE</div>
</a>
</div>
</div>
</section>
I have an ng-click in the that element which changes the value of 'activeSection' to true. Inside of it, I have another button that can switch this back to it's initial value (false).
In the actual app, it would show or hide this child button based on a class added to the element,just to give you a little background what I'm trying to achieve.
When I click on the element, it does as I expect it to be: switch the value to 'true'. But when I click on the .back-button element with the other ng-click, it fails to register the changed value.
Why is that?
They're both inside the same controller, btw. If there's a solution that doesn't involve creating a new controller, it would be better.
If you click on your back button, activeSection will be false but then your event will be propagated to its parent so the ng-click of Section will be executed too and activeSection will be true again.
In order to make your code work, you should stop the propagation of the ng-click event after changing the value of your variable in your back-button.
Your code would look like this:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false; $event.stopPropagation();">CLOSE</div>
</a>
</div>
</div>
</section>
What you are doing wrong is that you are putting the close button inside the element which have already ng-click, that's why when you are clicking the close button, it executes the parent ng-click and stop propagation for all other click events happening simultaneously.
So, the possible solution is making another super parent of the elements and taking the close button out of the element which is making it visible when clicked and adding a ng-show directive to the close button.
Checkout the following snippet
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<section class="page-section about-us" scroll-bookmark="about-us" ng-init="activeSection=false">
<div ng-click="activeSection=true" class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
</a>
</div>
</div>
<div ng-show="activeSection" class="back-button" ng-click="activeSection=false">CLOSE</div>
</section>
</div>
I have an issue with Semantic UI. I'm attempting to use multiple modals, but upon pressing the Approve button on the first modal, the second one flashes for a very brief moment and they both close afterwards (tested in Firefox and Chrome). I'm not sure what I'm doing wrong.
My code:
<body>
<div class="ui coupled first modal">
<div class="header">Header 1</div>
<div class="actions">
<div class="ui approve button">Approve</div>
</div>
</div>
<div class="ui coupled second modal">
<div class="header">Header 2</div>
</div>
<script>
$('.coupled.modal').modal({
allowMultiple: true
});
$('.second.modal').modal('attach events', '.first.modal .button');
$('.first.modal').modal({
transition: 'fade up'
}).modal('show');
</script>
</body>
Here's my JSFiddle http://jsfiddle.net/tm95bwpf/
From the documentation on modal settings
Close actions are applied by default to all button actions, in
addition an onApprove or onDeny callback will fire if the elements
match either selector.
approve : '.positive, .approve, .ok', deny : '.negative, .deny,
.cancel'
When you had 'approve' as your class, it was causing the modals to close because it would fire the onApprove event.
Changing
<div class="ui approve button">Approve</div>
to
<div class="ui primary button">Approve</div>
fixes the issue.
I have this piece of HTML:
<div class="pop-up rooster-toevoegen">
<div class="pop-up-container">
<div class="pop-up-header clearfix">
<div class="pop-up-title">
Rooster toevoegen
</div>
<div class="sprite close"></div>
</div>
<div class="pop-up-content clearfix">
<form id="rooster-toevoegen-form" class="form rooster-toevoegen-form">
<div class="afdeling-container">
</div>
<div class="date-container">
</div>
<div class="button-container clearfix">
<button value="" name="rooster-toevoegen-button" class="rooster-toevoegen-button button-green">Toevoegen</button>
</div>
</form>
</div>
</div>
</div>
Now I want a click function on .rooster-toevoegen and exclude all children from this click function EXCEPT the button. Also the button has already a function(submitting the form), this must stay the buttons event handler.
CONTEXT:
This is a pop-up with a form inside. When the user clicks next to the pop-up the pop-up has to close. Not when clicking on the pop-up which happens when I don't exclude the children from the click event. BUT when the user clicks on the button the form has to submit. So the button should not be excluded from the click and perform his own action.
How do I do this?
You can prevent from bubbling to all elements using e.preventDefault(), and manually trigger click on button.
Better way is to bind one more click event only to button.