I want the user to hover over a a link which has a class called picture and the span to animate (increase the padding top), here is the code I have made so far but when the user hovers over it, it animates them all, i only want it to animate the one the user has hovered over.
$('.picture').each(function(){
$('.picture').hover(function(){
$('.picture span').animate({
'padding-top' : '20px'
},'fast');
});
$('.picture').mouseout(function(){
$('.picture span').animate({
'padding-top' : '10px'
},'fast');
});
});
Any help would be appreciated I think its somewhere on the each function Im going wrong but am unsure. A link to it can be found here: http://bathroomsyork.co.uk/
I don't see any benefit of your outer each() call. You should try this:
$('.picture').hover(
function() {
$(this).find('span').animate({'padding-top' : '20px'},'fast');
},
function() {
$(this).find('span').animate({'padding-top' : '10px'},'fast');
}
);
Note that we select all picture class elements, then use both parameters of the hover() function to specify mouseenter and mouseleave event callbacks.
Within each callback, get the child spans of the currently hovered element, $(this), and perform the animation.
You don't need to iterate over all elements, you can bind the event handler to all the matched elements at the same time.
Also, use $('span', this) to select the correct <span> from the hovered element.
$('.picture').on({
mouseenter: function () {
$('span', this).animate({
'padding-top': '20px'
}, 'fast');
},
mouseout: function () {
$('span', this).animate({
'padding-top': '10px'
}, 'fast');
}
});
this worked in the end guys:
$('.picture').each(function(){
$(this).hover(function(){
$('span', this).animate({
'padding-top' : '20px'
},'fast');
}, function(){
$('span', this).animate({
'padding-top' : '10px'
},'fast');
});
});
When I tried the examples with the on() i got a console error, what does that do exactly as I haven't seen that before?
thanks anyway.
You don't need each.
$('.picture').on('mouseenter mouseleave', function(e){
var padding = e.type == 'mouseenter' ? '20px' : '10px';
$('span', this).animate({
'padding-top' : padding
},'fast');
});
Related
I am using Appcelerator Studio to design a slider menu. Now i need to add EventListener to those slider menu rows. Please tell me how to use EventListener on clicking 'Help' so that i can give some condition within it? My code is below:
var menuTitles = [{title : 'Home'
}, {
title : 'Help'
},{
title: 'Privacy Policy'
}, {
title : 'About Us'
}, {
title : 'Rate This App'
}, {
title : 'Logout'
}];
//Tableview
var tableView = Titanium.UI.createTableView({
data : menuTitles,
allowsSelection:true
});
menuWindow.add(tableView);
console.log(menuTitles[0]);
//console.log(tableView.data);
menuTitles[0].addEventListener('click', function(){ // It seems wrong.
alert("");
some more operation i need to perform inside this actually
});
Add the event listener onto the parent element, in this case the tableView and then select the item you want that using event bubbling, the example code below selects it on the row index e.index but you could easily change this to e.row.title and do a string comparison / add any custom property to the row object and check it with e.row
tableView.addEventListener('click', function (e) {
if (e.index === 1) {
} else if (e.index === 2){
}
etc....
});
Context: http://emberjs.jsbin.com/diyirecu/23/edit
Is there anyway to have the Ember.beforeOberver callback run first and then the property changes? Or should I be using a different strategy all together?
Not sure if you can turn that event synchronous... However, I refactored your code to use some simple jQuery patterns (callbacks... I know, very non-Ember of me) that achieve the same thing. The code is clunky compared to what you were looking to achieve, but it works.
Example JSBin: http://emberjs.jsbin.com/diyirecu/26/edit
I also changed popObject to removeObject so that it actually removed the item you clicked on.
App.IndexController = Ember.ObjectController.extend({
content: {},
colors: ['red','blue','green'],
color: 'orange',
actions: {
addColor: function () {
var color = this.get('color'),
$ul = Ember.$('ul');
if (color) {
$ul.fadeOut(500, function () {
this.get('colors').pushObject(color);
this.set('color', '');
$ul.fadeIn();
}.bind(this));
}
},
removeColor: function (color) {
var $ul = Ember.$('ul');
$ul.fadeOut(500, function () {
this.get('colors').removeObject(color); //Changed from popObject
$ul.fadeIn();
}.bind(this));
}
},
});
Hi I am trying to do things with emberjs and google maps.
The issue with google autocomplete api is if user enters text in location search but does not select any value from dropdown suggestion in textbox the first suggestion is not selected. I found a good solution for it on stack overflow solutiion in jquery only
I am trying to do it in ember.
App.AutocompleteAddressView = Ember.TextField.extend({
tagName: 'input',
autocomplete: null,
didInsertElement: function () {
this._super();
var options = {
componentRestrictions: {
country: "xx"
}
};
this.set('autocomplete', new google.maps.places.Autocomplete(this.$()[0], options));
//var autocomplete = new google.maps.places.Autocomplete(this.$()[0], options);
},
keyDown: function (e) {
var that = this;
var suggestion_selected = $(".pac-item.pac-selected").length > 0;
if (e.keyCode === 13 && !suggestion_selected) {
//key down arrow simulations
var event = Ember.$.Event('keypress', {
keyCode: 40
});
Ember.run(this.$("#searchTextField"), 'trigger', event);
console.log('loggin autocomplete');
console.log(this.get('autocomplete'));
//adding google map event and then triggering it
google.maps.event.addListener(this.get('autocomplete'), 'place_changed', function () {
var place = that.get('autocomplete').getPlace();
that.set('autocomplete_result', place)
console.log('google event was triggered');
console.log(that.get('autocomplete_result'));
});
google.maps.event.trigger(this.get('autocomplete'), 'place_changed');
}
}
});
Now I need to do simulation part. I guess ember testing has somthing that simulates keypress but I cannot used it.
If I use the solution from the link I mentioned things work fine first time but on clicking browser back navigation it does not work.
The solution I tried in code not working
I am creating a component to wrap the select2 select box. The code is below:
App.FixedSelectComponent = Ember.Component.extend({
actions: {
change: function(value) {
this.set('selectedValue',value);
}
},
didInsertElement : function(){
this.$("#select1").select2().on("change", function(e) {
if ($.isArray(e.val)) {
$.each(e.val, function(index,value) {
console.log("multiple:",value.split('>')[2].split('<')[0]);
// send to change
});
} else {
console.log("single:",e.val.split('>')[2].split('<')[0]);
// send to change
}
});
},
willDestroyElement : function() {
this.$("#select1").select2('destroy');
},
});
however, what I am stuck at is how to send the data that I've got in the on("change") event to the action:change that I've defined , or if I can set the selectedValue property itself in the on("change") event
"this" isn't the component at the "// send to change" lines - how / where do I get the reference to the component itself at this point ?
basically what I am trying to achieve is to get the data passed to the "change" event of select2 into my selectedValue property
thanks
You can use Component.send('actionName').
I found it in Ember's documentation.
this context will not refer to FixedSelectComponent context in $.each, and also use send method which will call FixedSelectComponent change method..
refer : http://emberjs.com/api/classes/Ember.Component.html#method_send
didInsertElement : function(){
var _this = this;
this.$("#select1").select2().on("change", function(e) {
if ($.isArray(e.val)) {
$.each(e.val, function(index,value) {
console.log("multiple:",value.split('>')[2].split('<')[0]);
_this.send('change',value.split('>')[2].split('<')[0]); // send to change
});
} else {
console.log("single:",e.val.split('>')[2].split('<')[0]);
_this.send('change',e.val.split('>')[2].split('<')[0]); // send to change
}
});
}
this.get('actions').change.call(this, value);
Check http://emberjs.com/api/classes/Ember.Component.html#property_actions -- 'actions' is simply another property on your Component.
Try this:
App.FixedSelectComponent = Ember.Component.extend({
change: function(value) {
this.set('selectedValue',value);
}
didInsertElement : function(){
var self = this;
this.$("#select1").select2().on("change", function(e) {
if ($.isArray(e.val)) {
$.each(e.val, function(index,value) {
console.log("multiple:",value.split('>')[2].split('<')[0]);
// send to change
self.change(value); // substitute value by whatever you want to pass
});
} else {
console.log("single:",e.val.split('>')[2].split('<')[0]);
// send to change
self.change(value); // substitute value by whatever you want to pass
}
});
},
willDestroyElement : function() {
this.$("#select1").select2('destroy');
},
});
this._actions['change'].apply(this, value);
Im looking for a solution for:
I want to toggel the height of a Div but not complet.
So i try this but didnt work. I see the first classchange in firebug and the heigth change to 36px.
But back didnt work. I try wiht add and remove class.
http://jsfiddle.net/Zbbd9/1/
$$('.outer').setStyle('height', '660px');
$$('.outer h2').addEvent('click', function(){
if (this.hasClass('close')) {
var parent = this.getParent();
parent.removeClass('close');
parent.morph({
'height': '660px'
});
} else {
var parent = this.getParent();
parent.addClass('close');
parent.morph({
'height': '36px'
});
}
});
UPDATE:
http://jsfiddle.net/Zbbd9/2/
Got it.
Best Regards
You're selecting the wrong parent container.
Try it like this:
$$('.outer h2').addEvent('click', function(){
var parent = this.getParent();
if (parent.hasClass('close')) {
parent.removeClass('close');
parent.morph({
'height': '660px'
});
} else {
parent.addClass('close');
parent.morph({
'height': '36px'
});
}
});
Adding a class to identify the current state is a solid way to do it, but you might want to consider other alternatives, too, like using toggleClass or referring to something completely different like a slider or similar.