I have a bunch of span elements with css class option
<div>
<span class="option">
</div>
<div>
<span class="option">
</div>
<div>
<span class="option">
</div>
<div>
<span class="option">
</div>
I would like to select all of them, and then attach event handler to their mouseover event.I ended up with this:
$$('.option').addEvents({
'mouseover': function() {
// code
},
});
But I don't know how to figure out inside event handler, if current selected element is even or odd, so I can do different thing based on that information.
Try to use each to iterate over the options. This will give you the current index:
$$('.option').each(function(elem, i) {
elem.addEvents({
mouseover: function() {
if (i % 2) {
// odd
}
else {
// even
}
}
});
});
you can order your elements in different layout and then use mootools slick even,odd selections:
http://jsfiddle.net/49zpm/1/
$$('.option:even').addEvents({
'mouseover': function () {
console.log('mouseover even');
}
});
$$('.option:odd').addEvents({
'mouseover': function () {
console.log('mouseover odd');
}
});
Related
Have simple directive
.directive('test', function () {
return {
templateUrl: 'dir.html',
scope: {
date: '='
},
link: function (scope, element, attrs) {
element.find('.date-picker').attr('type', 'email');
}
};
});
And simple template for directive
<div ng-if="date">
<h1>Date is true</h1>
<input class="date date-picker" type="text"/>
</div>
<div ng-if="!date">
<h1>Date is false</h1>
</div>
I want to do smth with child element inside any div with ng-if.
My code https://plnkr.co/edit/ewHfBj6SjCss1cs4CsY7?p=preview
You can add an watch to the date and then execute the code you want to run when it changes.
scope.$watch('date', function(dateValue){
if(dateValue){
//Code to run if true
}else{
// code to run if false
}
});
I'm using iron-pages. Inside are four elements, one is a grid of cards, and the others are the projects of the cards. Nothing fancy.
Outside of iron pages i've put some navigations buttons (next and previous) with fixed positions.
<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}">
<my-grid id="grid" page="grid"></my-grid>
<page-alpha page="alpha"></page-alpha>
<page-beta page="beta"></page-beta>
<page-gamma page="gamma"></page-gamma>
</iron-pages>
<!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{_hideControls}}">
<button-previous id="previous" on-tap="_goPrev"></button-previous>
<button-next id="next" on-tap="_goNext"></button-next>
</div>
My question is: how to hide in a polymer way the navigation buttons only when i'm in the grid-page ?
I've got some idea but i'm think the syntax is incorrect, or something is missing
<script>
_hideControls: function(){
if (this.pageSelected = 'grid') {
this.$.controls.hide();
} else {
this.$.controls.show();
}
}
</srcipt>
This:
<script>
_hideControls: function(){
if (this.pageSelected = 'grid') {
this.$.controls.hide();
} else {
this.$.controls.show();
}
}
</script>
Should be this (also note the added = character in the comparison):
<script>
_hideControls: function(){
if (this.pageSelected == 'grid') {
return true;
} else {
return false;
}
}
</script>
And also, this:
hidden$="{{_hideControls}}"
Should be this:
hidden$="{{_hideControls()}}"
Why? Because the hidden attribute will be set to true (or rather be kept) if the function returns true. The only time (that I know of) when you use the syntax _hideControl instead of _hideControls() is when you want a method to be called in response to an event. See below:
<div on-tap="_hideControls"></div>
EDIT To make it update when for example pageSelected changes, do this:
<script>
_hideControls: function(pageSelected){
if (pageSelected == 'grid') {
return true;
} else {
return false;
}
}
</script>
and:
hidden$="{{_hideControls(pageSelected)}}"
What happen now is that the method _hideControls is ran every time that pageSelected is changed. Very convenient!
You need to listen to iron-select and iron-deselect event. The event comes with id of the item selected (if you have id defined in the html). In your case you can check if the id is grid and then do your operations. Also, the _hideControls should be a Boolean property. Try below code.
<iron-pages id="pages" class="flex" attr-for-selected="page" selected="{{pageSelected}}"
on-iron-select="onSelect" on-iron-deselect="onDeselect">
<my-grid id="grid" page="grid"></my-grid>
<page-alpha page="alpha"></page-alpha>
<page-beta page="beta"></page-beta>
<page-gamma page="gamma"></page-gamma>
</iron-pages>
<!-- Navigation Buttons -->
<div id="controls" class="buttons" hidden$="{{hideControls}}">
<button-previous id="previous" on-tap="_goPrev"></button-previous>
<button-next id="next" on-tap="_goNext"></button-next>
</div>
Script:
<script>
onSelect: function(e) {
if(e.detail.item.id === 'grid') {
this.hideControls = true;
}
}
onDeselect: function(e) {
if(e.detail.item.id === 'grid') {
this.hideControls = false;
}
}
</script>
I have following html code
<li ng-repeat="contact in contacts">
<label ng-style="myStyle">
<input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
<img src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/>
{{contact.username}}
{{contact.email}}
</label>
</li>
controller code is as follows:
function mainController($scope, $http) {
$scope.deleteContact = function(id) {
$http.delete('/api/contacts/' + id)
.success(function(data) {
$scope.contacts = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.editContact = function(id) {
$http.get('/api/search/'+id)
.success(function(data) {
$scope.formData = data;
})
.error(function(data) {
console.log('Error: ' + data);
});
}
}
When I click on img tag to call editContact, checkbox ng-click event is also fired, as a result the record get deleted.
I can't understand, how does this happen.
I am new to angularJs, please guide
Not really AngularJS related. You wrapped both inputs in a label. A click inside the label will trigger both events. You can change the format of your HTML. Perhaps, take the image out of the label tag.
As an alternative, you could explicitly associate the label with either the image or chechbox by assigning an id. The following associates the label with image.
...
<label for="image" ng-style="myStyle">
<input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
<img id="image" src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/>
{{contact.username}}
{{contact.email}}
</label>
...
Lable kind of generates another one more event for corresponding for element. What you can do is to prevent propagation of this click event:
HTML:
<img ng-click="editContact($event, contact._id)" src="./images/edit_inline.gif" width="16px" height="16px" /> {{contact.username}}
JS
$scope.editContact = function(e, id) {
e.preventDefault();
...
}
Demo: http://plnkr.co/edit/N2nUZS37MXGq7oViyLdz?p=preview
I want to create function (in angularjs controller) which add particular class to the parent div of the empty input when clicking on the button. And remove that class when i type something in the input.
I have a working example here: http://jsfiddle.net/fUdLv/
HTML:
<div ng-app="authorization">
<div ng-controller="authCtrl as auth">
<div ng-class="{'error':auth.needEmail}">
<input type="text" ng-model="auth.email" ng-keypress="auth.clearEmail()">
</div>
<div ng-class="{'error':auth.needPassword}">
<input type="password" ng-model="auth.password" ng-keypress="auth.clearPassword()">
</div>
<div>
<button ng-click="auth.signin()">Sign in</button>
</div>
</div>
</div>
Javascript:
angular.module('authorization', [])
.controller('authCtrl', function() {
this.needEmail = false;
this.needPassword = false;
this.signin = function pay() {
if (!this.email){
this.needEmail = true;
}
if (!this.password){
this.needPassword = true;
}
};
this.clearEmail = function(){
this.needEmail = false;
}
this.clearPassword = function(){
this.needPassword = false;
}
});
But i'm sure it is very bad code, because i have a particular function for working with particular input. How can i generalize this function for working on every input (for example, if i would have three or four inputs it is not very smart solution to create function for each of them)
How about use <form> and FormController to control state?
You probably need to read this guide from official site.
I'm using an icon font on my website and I want users to vote on their favorite icon. the icon font uses and CSS to display the icon. How can I accomplish this using some type of jQuery and returning the icon to the front end along with passing it value through a form?
I know I can't add a inside of an input, so i took this approach:
I started with this jsFiddle: http://jsfiddle.net/6NVpL/42/
HTML:
<div class="iconDisplay">Display's selected icon</div>
<button class="selectIcon">Select Icon</button>
<div id="iconSelector">
<span class="icon-icon1"></span>
<span class="icon-icon2"></span>
<span class="icon-icon3"></span>
<span class="icon-icon4"></span>
<span class="icon-icon5"></span>
<span class="icon-icon6"></span>
<span class="icon-icon7"></span>
<span class="icon-icon8"></span>
</div>
JS:
$(".selectIcon").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
$(this).click(function(){
$("#iconSelector").hide();
});
});
Maybe this is more what you are looking for?
I fixed the click handlers:
$("#selectIconButton").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
selectIcon($(this));
});
Added a function to perform the icon selection. Note: remove the return; statement and adjust the post so it will work for your application.
function selectIcon(e){
var selection = e.attr('class');
$('#selectedIcon')
.removeClass()
.addClass(selection)
.show();
$("#iconSelector").hide();
return;
$.ajax({
url: 'urltowebsite',
type: 'POST',
data: { selectedIcon: selection }
});
}
Added a UI element to show the user what icon they selected and modified the CSS slightly to accommodate the above changes.
You need a server-side script to save the data. If you do have a script for that, you can use it like that:
$("#iconSelector span").click(function () {
var xthis = $(this);
xthis.click(function(){
$("#iconSelector").hide();
$.post('/echo/html','icon='+$(xthis).attr('class'),function(){
$(".iconDisplay").html(xthis.get(0));
});
});
});
Full fiddle: http://jsfiddle.net/6NVpL/45/
PS. Change /echo/html to your save script name.