I have below structure for my span tag,
<span class="spanclass" ng-click="clickfunction()">
</span>
It is said that we need to add tabindex=-1 to the span
and then set focus to the span element.
Initially I thought like on ng-blur of anchor tag, I can call a function where I can set the focus as below
$('.spanclass').attr("tabIndex", -1).focus();
Then Im able to get focus on it however, when I press enter ng-click is not getting called, which is happening if I do by clicking directly.Also here I mixed both angular js and jquery which might not be correct.
May I know how we can implement above two steps using angular js and on what event.
Thanks,
Balaji
As mentioned in other answers, changing to a button would make the most sense.
If you MUST use a span element, then you can add a directive to perform a function on Enter keypress, like found here: How to use a keypress event in AngularJS?
Javascript:
app.directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
HTML:
<div ng-app="" ng-controller="MainCtrl">
<input type="text" ng-enter="doSomething()">
</div>
It will be more semantic to change the span to a button (you can still style it as you wish)
...
<style>
.span {
border: none;
background: none;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="ctrlr">
First
<button class="span" ng-click="clickfunction()" tabindex="1">
Second
</button>
</div>
<script>
angular.module('app', []);
angular.module('app').controller('ctrlr', function ($scope) {
$scope.clickfunction = function () {
alert('a')
}
});
</script>
</body>
angular.module('app', []);
angular.module('app').controller('ctrlr', function ($scope) {
$scope.clickfunction = function () {
alert('a')
}
});
.span {
border: none;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrlr">
First
<button class="span" ng-click="clickfunction()" tabindex="1">
Second
</button>
</div>
</div>
Although the above answer by #mofojed has been accepted.
But here are some more clarification that will make this post complete.
You can set focus on a focusable HTML element which includes anchor tags, HTML inputs, selects, text areas, buttons, any embedded elements as well as any element with a tabindex
Note that tabindex should not be -1 if you want to focus on the span by adding a tabindex. Make the tabindex a positive number.
Related
I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});
I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>
The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.
I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview
but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>
More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
The idea is to create a checklist. When the user clicks on a circle it changes its background color. If he clicks it again it should reset the color.
I managed to change the background to green when the user checks his progress like this:
<i class="circle1"
ng-style="myStyle1"
ng-click="myStyle1={'background-color':'green'}">1</i>
Now my problem is how to reset the color to white when the user clicks again?
Thank you for your help.
One option would be to introduce a css class which is toggled when you click the element. You can do this with a combination of ng-class and using ng-click to toggle a variable.
<i class="circle1" ng-class="{'green-circle': isToggled === true}" ng-click="isToggled = !isToggled">1 - {{isToggled}}</i>
angular.module("app", []);
.circle1 {
background: red;
}
.green-circle {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<i class="circle1" ng-class="{'green-circle': isToggled === true}" ng-click="isToggled = !isToggled">1 - {{isToggled}}</i>
</div>
The downfall of this solution is that you would need a different isToggled variable for each circle. A better and more re-usable solution would be to create a directive that handles this:
var app = angular.module("app", []);
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function() {
element.toggleClass(attrs.toggleClass);
});
}
};
});
.circle1 {
background: red;
}
.green-circle {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<i class="circle1" toggle-class="green-circle">One</i>
<i class="circle1" toggle-class="green-circle">Two</i>
<i class="circle1" toggle-class="green-circle">Three</i>
</div>
Why don't you follow this algorithm and write some code,
write a common function to reset color
Call that function via ng-click and get currently clicked element
and reset color of that elements plus all elements next to it by changing it's class
Remember resetting color of all nodes next to current code is must, else it will not look like Progress. It will just look like on-off buttons
You can post code again if you are getting some errors
HTML
<i class="circle1" id ="circle1" ng-click="changeColor()">1</i>
JS code:
$scope.changeColor= function() {
var i=0
if(i%2 ==0)
{
document.getElementbyID('circle1').style.background ="original color"
}
else
{
document.getElementbyID('circle1').style.background ="green"
}
};
It maybe easy but i can't think anything to find the way when i click outside the textbox to alert something in javascript BUT when i click inside the text nothing to happen.The input text is inside the div element.
So,let's assume that my html is like bellow:
<div id="myone" onclick="javascript: myfunc();">
<input type="text" id="myInput"></input>
</div>
function myfunc()
{
alert('ok');
}
How to change that?
Thank you a lot!
Do this:
var div = document.getElementById('myone');
var funct = function(){
var input = div.querySelector("#myInput");
return false;
};
div.onclick = funct;
You shoud use this condition. e.target !== this
It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.
Use it inside your click function like this and see it in action:
$('.divover').on('click', function(e) {
if (e.target !== this) return;
thefunc();
});
var thefunc = function myfunc() {
alert('ok');
}
.divover {
padding: 20px;
background: yellow;
}
span {
background: blue;
color: white;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='divover'>somelabel:
<span><input type="text" class="as" name="forename"></span>
</div>
This will work, if you do this carefully.
<div id="myone" onclick="javascript: myfunc();">
//your stuff in the clickable division.
</div>
<div style="position:absolute;">
<!--Adjust this division in such a way that, it comes inside your clickable division--><input
type="text" id="myInput"></input>
</div>
//Your script function/code here
function myfunc()
{
alert('ok');
}
Is it possible to use ngMousedown for adding class to a div and ngMouseup for removing the class again?
At the moment I use ng-mousedown="activateClass()" , in activateClass() change $scope.className="data-active" and change it again with other function with ng-mouseup. And use ng-class to add the class "data-active"
I don't wanna use $scope.className and change it with function in controller, because this function is used for several divs and I don't want to add the class to all of the divs I have.
Thank you.
Normally controllers should not care about your DOM. What you are trying to do there seems more like suitable for a directive. I would implement a directive:
app.directive("highlight", function() {
return function(scope, element, attrs) {
element.on('mouseup', function(event) {
element.removeClass(attrs.highlight)
})
element.on('mousedown', function(event) {
element.addClass(attrs.highlight)
})
}
})
and use it on a div like this
<div highlight="active">
my content is here
</div>
where as active is the name of my css class.
did you mean this:
<div ng-mousedown="upordown='down'"
ng-mouseup="upordown=''"
ng-class="upordown">content</div>
You can use ng-events with ng-class to achieve it:
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
</head>
<body>
<input type="button" value="click me" ng-mousedown="className='data-active'" ng-mouseup="className=''">
<br>
<span class="base-class" ng-class="className">Sample Text</span>
</body>
</html>
If you don't want to use controller, you may just write ng-mousedown="className='data-active'" in your view