Develop Reference

Get target of .each function within a $.proxy function

I'm using RequireJS to structure my JS which is why I'm using a $.proxy function. What I'm trying to do within the .each function is give each carousel on the page a unique data attribute. In order to do this I have to be able to target each carousel, but $(this) in this context doesn't target each carousel. I've tried using currentTarget but I think this only works on click events?
Below is the specific snippet which needs fixing.
getCarousels: function() {
$carousel.each($.proxy(function(index) {
$owl = (index.currentTarget);
$owl.attr('data-number', index);
this.initCarousel();
},this));
},
And here is the full file.
define(['owlcarousel'], function() {
var $ = jQuery,
$carousel = $('.carousel'),
$data = $('.carousel-data');
function updateResult(pos, value, carouselNumber) {
$(carouselNumber).find(pos).text(value);
}
function afterAction(el) {
var owl = el.data('owlCarousel'),
actualValue = this.owl.currentItem + 1,
carouselNumber = el.attr('data-number');
console.log(carouselNumber);
updateResult('.carousel-current', actualValue, carouselNumber);
updateResult('.carousel-items', this.owl.owlItems.length, carouselNumber);
}
return {
init: function() {
if($carousel.length >= 1) {
this.setUp();
} else {
return false;
}
},
setUp: function() {
this.getCarousels();
},
getCarousels: function() {
$carousel.each($.proxy(function(index) {
$owl = (index.currentTarget);
$owl.attr('data-number', index);
this.initCarousel();
},this));
},
initCarousel: function() {
$carousel.owlCarousel({
singleItem: true,
autoPlay: true,
slideSpeed: 400,
paginationSpeed: 800,
lazyLoad: true,
afterAction: afterAction
});
}
};
});

.each receive 2 parameters which is the index and the value. Usualy the value is the same as this, but well, you overrided it. Get that second parameter! :
$carousel.each($.proxy(function(index, el) {
$owl = $(el);
$owl.attr('data-number', index);
this.initCarousel();
},this));
But why not simply not use proxy?
var that = this
$carousel.each(function(index) {
$owl = $(this);
$owl.attr('data-number', index);
that.initCarousel();
});

Call the same instance of jQuery plugin

I have written a jQuery plugin below and would like to be able to call it again for the same instance on an element.
The plugin goes...
(function($) {
$.fn.myPlugin = function(options){
var settings = {
color: null
};
if (options) {
$.extend(settings, options);
}
return this.each(function(){
var self = this;
var pics = $('li', self);
function refresh() {
pics = $('li', self);
};
$('a', self).click(function(){
pics.filter(':last').remove();
alert(settings.color);
refresh();
return false;
});
});
}
})(jQuery);
In the page this is called...
$('#test').myPlugin({ color: 'blue' });
Now I want to call the same plugin for the same instance but pass the string refresh as the option whilst all the other variables are the same (so color would still be blue) e.g...
$('#test').myPlugin('refresh');
This would then execute the refresh() function.
How could I achieve that with the above?
Edit: To make it clearer I am thinking of how jQuery UI does their plugins. In the sortable plugin you can do $("#sortable").sortable(); and then $("#sortable").sortable('refresh'); on the same element. This is what I am trying to achieve.

You can store your instance with .data() and check for it when creating an instance.
Something like:
$.fn.doStuff = function () {
var ob = $(this);
var data = ob.data();
if (data.doStuff !== undefined) {
return data.doStuff;
}
doStuff;
});

(function($) {
$.fn.myPlugin = function(options){
var init = function($self, ops){
$self.find("a").click(function(){
pics.filter(':last').remove();
alert(settings.color);
refresh();
return false;
});
};
this.refresh = function(){
//your code here
};
return this.each(function(){
var self = this;
var pics = $('li', self);
var settings = {
color: null
};
var ops = $.extend(true, settings, options);
init($(this), ops);
});
}
})(jQuery);
try something like this. and you can call refresh() like $().myPlugin().refresh();

Click Function on jQuery plugin only allows for single click

I've created this simple plugin to add multiple animations on click but the problem is that once the object is clicked it can not repeat the animation by clicking again, i can't figure out why the added class is not removing itself after the click function is complete to allow it to be clicked again and repeat.. any suggestions?
(function($) {
$.fn.vivify = function(options) {
var defaults = {
animation: 'bounce',
};
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
var animation = o.animation;
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
}, function() {
obj.removeClass(o.animation);
});
})
}
})(jQuery);​

Here's a working example (I guess, because I don't know exactly what's the intended effect of your plugin):
http://jsfiddle.net/gabrieleromanato/Fmr9g/

obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
},
// this callback is not valid
function() {
obj.removeClass(o.animation);
});
because .bind() accept parameters like following:
.bind(eventName, [eventData], [callback])
Read about .bind()
To remove class you can do:
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
// you can removeClass here
obj.removeClass(o.animation);
// but you need some delay
setTimeou(function() {
obj.removeClass(o.animation);
}, 5000);
});
To increase the timeout you can do following:
return this.each(function(index, val) {
var o = options;
var obj = $(this);
var animation = o.animation;
obj.bind("click", function() {
obj.addClass(o.animation);
obj.addClass('vivify');
}, index * 2000);
});

jQuery scrollTop if URL has hash

I have wrote this simple plugin which smooth scrolls the browser window and adds the hash link to the URL.
$.fn.extend({
scrollWindow: function(options) {
var defaults = { duration: "slow", easing : "swing" }
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function(e) {
var target = $(this).attr('href');
$('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
location.hash = target;
});
e.preventDefault();
});
});
}
});
How do I extend this plugin so that it auto scrolls down to the section of the page if it has a hash in the URL that exists in the DOM?
I half understand how this will work by using the window.location.hash, although I am unclear where is the best to add this inside of the plugin.

Store the function in a separate variable, and call the function if the hash is existent. I have implemented your request such that the current location.hash is used each time $().scrollWindow is invoked. Other implementations follow the same principle.
$.fn.extend({
scrollWindow: function(options) {
var defaults = { duration: "slow", easing : "swing" }
var options = $.extend(defaults, options);
var goToHash = function(target){
$('html,body').animate({scrollTop: $(target).offset().top}, options.duration, options.easing, function() {
location.hash = target;
});
};
if(location.hash.length > 1) goToHash(location.hash);
return this.each(function() {
$(this).click(function(e) {
//Remove junk before the hash if the hash exists:
var target = $(this).attr('href').replace('^([^#]+)#','#');
goToHash(target);
e.preventDefault();
});
});
}
});

Create a jQuery special event for content changed

I'm trying to create a jQuery special event that triggers when the content that is bound, changes. My method is checking the content with a setInterval and check if the content has changed from last time. If you have any better method of doing that, let me know. Another problem is that I can't seem to clear the interval. Anyway, what I need is the best way to check for content changes with the event.special.
(function(){
var interval;
jQuery.event.special.contentchange = {
setup: function(data, namespaces) {
var $this = $(this);
var $originalContent = $this.text();
interval = setInterval(function(){
if($originalContent != $this.text()) {
console.log('content changed');
$originalContent = $this.text();
jQuery.event.special.contentchange.handler();
}
},500);
},
teardown: function(namespaces){
clearInterval(interval);
},
handler: function(namespaces) {
jQuery.event.handle.apply(this, arguments)
}
};
})();
And bind it like this:
$('#container').bind('contentchange', function() {
console.log('contentchange triggered');
});
I get the console.log 'content changed', but not the console.log 'contentchange triggered'. So it's obvious that the callback is never triggered.
I just use Firebug to change the content and to trigger the event, to test it out.
Update
I don't think I made this clear enough, my code doesn't actually work. I'm looking for what I'm doing wrong.
Here is the finished code for anyone interested
(function(){
var interval;
jQuery.event.special.contentchange = {
setup: function(){
var self = this,
$this = $(this),
$originalContent = $this.text();
interval = setInterval(function(){
if($originalContent != $this.text()) {
$originalContent = $this.text();
jQuery.event.handle.call(self, {type:'contentchange'});
}
},100);
},
teardown: function(){
clearInterval(interval);
}
};
})();
Thanks to Mushex for helping me out.

also take a look to James similar script (declaring as jquery object method and not as event)
jQuery.fn.watch = function( id, fn ) {
return this.each(function(){
var self = this;
var oldVal = self[id];
$(self).data(
'watch_timer',
setInterval(function(){
if (self[id] !== oldVal) {
fn.call(self, id, oldVal, self[id]);
oldVal = self[id];
}
}, 100)
);
});
return self;
};
jQuery.fn.unwatch = function( id ) {
return this.each(function(){
clearInterval( $(this).data('watch_timer') );
});
};
and creating special event
jQuery.fn.valuechange = function(fn) {
return this.bind('valuechange', fn);
};
jQuery.event.special.valuechange = {
setup: function() {
jQuery(this).watch('value', function(){
jQuery.event.handle.call(this, {type:'valuechange'});
});
},
teardown: function() {
jQuery(this).unwatch('value');
}
};
Anyway, if you need it only as event, you script is nice :)

I know this post/question is a little old, but these days I was behind a similar solution and I found this:
$('#selector').bind('DOMNodeInserted', function(e) {
console.log(e.target);
});
Source: http://naspinski.net/post/Monitoring-a-DOM-Element-for-Modification-with-jQuery.aspx
Hope this help someone!

The finished code in the original question worked for me, thank you! I would just like to note that I am using jquery 1.9.1 and $.event.handle seems to have been removed. I changed the following to get it to work.
jQuery.event.handle.call(self, {type:'contentchange'});
to
jQuery.event.dispatch.call(self, {type:'contentchange'});

maybe you could try Mutation Observer
Here are the code:
mainArea = document.querySelector("#main_area");
MutationObserver = window.MutationObserver;
DocumentObserver = new MutationObserver(function() {
//what you want to run
});
DocumentObserverConfig = {attributes: true, childList: true, characterData: true, subtree: true};
DocumentObserver.observe(mainArea, DocumentObserverConfig);