Can I use nested jquery.proxy?
var obj = {
init: function(element){
element.on('click.mynamespace',$.proxy(function (event) {
$(event.currentTarget).animate({
scrollLeft: scrollPos
}, width, $.proxy(this.myFunction,this));
},this))
},
myFunction: function(){
/*some code*/
}
}
This is what I need for my project. I have used the nested $.proxy to make the code work. Because I need this context in myFunction which is a callback function for jquery animate api.
Can I use in this way?
It should work, however I'd suggest that storing a reference to the object in the outer scope would be a more elegant solution. Note the definition and use of _obj in this example:
var scrollPos = 10;
var width = 20;
var obj = {
init: function($element) {
var _obj = this;
$element.on('click.mynamespace', function(e) {
$(this).animate({
scrollLeft: scrollPos
}, width, _obj.myFunction.call(this));
});
},
myFunction: function() {
// this function now executes within the context of the
// element which has been animated in the click handler
console.log(this.id);
}
}
var $foo = $('#foo');
obj.init($foo);
$foo.trigger('click.mynamespace');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>
Related
I want to set #first and #second as $(this) to use element id only when function is calling.
is it possible?or any other way?
(function( $ ){
$.fn.showCircle = function(top,right) {
$timeout(function () {
$(this).css({
right:right,
top:top,
});
});
};
})( jQuery );
$('#first').showCircle(300,200);
$('#second').showCircle(800,200);
You can use jQuery.proxy() to set this at a function call
$timeout($.proxy(function () {
$(this).css({
right:right,
top:top,
});
}, this));
thanks to #panther comment inside $timeout this refer to window so as #panther said I changed the function :
(function ($) {
$.fn.showCircle = function (top, right) {
var self = this;
$timeout(function () {
$(self.selector).css({
right: right,
top: top,
});
});
};
})(jQuery);
I'm looking for a way to pass a variable that is relative to the element to both mouseenter and mouseleave events. For example, if I had:
jQuery('.element').on({
mouseenter: function () {
var $child = jQuery(this).find('.child');
$child.fadeIn();
},
mouseleave: function () {
var $child = jQuery(this).find('.child');
$child.fadeOut();
}
});
Is there a way to avoid defining the $child variable twice? I was able to figure this out using .hover(), however I am now unable to use that as I am calling it on dynamically generated elements, for which .hover() will not work.
You can use this way to delegate both events:
jQuery(document).on("mouseenter mouseleave", ".element", function(e){
jQuery(this).find('.child').fadeToggle();
// you can check for e.type for more complex logic
});
The syntax to delegate with different handlers is:
jQuery(document).on({
mouseenter: function () {
//...
},
mouseleave: function () {
//...
}
}, ".element");
Use something like that:
jQuery('.element').on({
mouseenter: function (e) {
var ele = e.currentTarget;
ele.fadeIn();
},
mouseleave: function (e) {
var ele= e.currentTarget;
ele.fadeOut();
}
});
You could reuse the same function in both events, something like:
jQuery('.element').on({
mouseenter: function () {
handleFade("enter", jQuery(this));
},
mouseleave: function () {
handleFade("leave", jQuery(this));
}
});
function handleFade(state, $elem){
var $child = $elem.find('.child');
if(state=="enter"){
$child.fadeIn();
} else if(state=="leave"){
$child.fadeOut();
}
}
Im trying to build a little jQuery plugin, but im getting an error that group.height() is not a function?
(function( $ ) {
$.fn.equalHeight = function(group) {
group = $.extend(group);
var tallest = 0;
group.each(function () {
var thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
// allow jQuery chaining
return this;
};
}( jQuery ));
Usage example would be like this:
<script>
// Usage example:
$( ".boxes section.box" ).equalHeight();
</script>
Use this?
In your declaration, your equalHeight takes a parameter, but you are not passing anything through. Note that in a custom jQuery function you don't have to pass in group, because the this identifier already refers to your group.
So, either do group = this, or replace it completely
Try
(function ($) {
$.fn.equalHeight = function () {
var tallest = 0;
this.each(function () {
var thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
// allow jQuery chaining
return this.height(tallest);
};
}(jQuery));
Demo: Fiddle
I have a jQuery slideshow plugin that I am making though it has a setInterval() inside it which is not being called though if I move the contents of the setInterval() outside of the it then it works though it only runs once.
var gap = 3;
var duration = 0.5;
(function ($) {
$.fn.slideshow = function () {
return this.each(function () {
g = gap * 1000;
d = duration * 1000;
$(this).children().css({
'position': 'absolute',
'display': 'none'
});
$(this).children().eq(0).css({
'display': 'block'
});
setInterval(function () {
slide();
}, g);
function slide() {
$(this)
.children()
.eq(0)
.fadeOut(d)
.next()
.fadeIn()
.end()
.appendTo($(this).children().eq(0).parent());
}
});
};
})(jQuery);
$('.slideshow').slideshow();
HTML:
<div class='slideshow'>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
Here is a fiddle with my plugin:
http://jsfiddle.net/Hive7/GrtLC/
The problem is this inside the slider function does not point to the object you think it points to.
setInterval($.proxy(function () {
slide.call(this);
}, this), g);
Demo: Fiddle
or better
setInterval($.proxy(slide, this), g);
Demo: Fiddle
Your problem is that this is always locally defined; by the time you get into the setInterval(), you've lost your original this (it's reset to the window object).
There are a few ways to get around this; the simplest is probably to copy this into a local variable.
http://jsfiddle.net/mblase75/GrtLC/5/
var gap = 3;
var duration = 0.5;
(function ($) {
$.fn.slideshow = function () {
return this.each(function () {
g = gap * 1000;
d = duration * 1000;
$this = $(this); // caches the jQuery object as a further optimization
$this.children().css({
'position': 'absolute',
'display': 'none'
});
$this.children().eq(0).css({
'display': 'block'
});
setInterval(function () {
slide($this); // pass $this into the function
}, g);
function slide($obj) {
$obj.children()
.eq(0)
.fadeOut(d)
.next()
.fadeIn()
.end()
.appendTo($obj.children().eq(0).parent());
}
});
};
})(jQuery);
$('.slideshow').slideshow();
Your code cannot work, because your callback is not bound to the this; try instead
var that = this;
setInterval(function () {
slide();
}, g);
function slide() {
$(that) ....
this inside slide function is not the slideshow. I make it work caching the object inside the each loop: http://jsfiddle.net/x7Jk8/
After declaring height() variables for multiple loaded elements which have different variables for each, the animate() function doesn't seem to be loading the variable excHeight.
What would be the best way to use the value of excHeight for the animate() as below?
$(".exPand a").click(function (event) {
event.preventDefault();
var post_id = $(this).attr("rel");
var postHeight = $(this).closest('.boxy')
.find('.articleImageThumb')
.height();
var excHeight = $(this).closest('boxy')
.find('.articleImageThumb')
.find('.initialPostLoad')
.height();
$.ajaxSetup({cache:false});
$(this).closest('.boxy')
.animate({height: postHeight+excHeight}, 1000);
$(this).closest('.boxy')
.find('.articleImageThumb')
.animate({top: 0}, 1000);
$(this).closest('.boxy').find('.articleTitle')
.animate({bottom: excHeight}, 1000);
$(this).closest('.boxy').find('.postmetadata')
.animate({bottom: excHeight}, 1000);
});
Seems like it is not working because you forgot "dot" in boxy class name: var excHeight = $(this).closest('boxy') , must be like this: var excHeight = $(this).closest('.boxy')