I'm writing simple jQuery plugin and it should search all .camp_row on the page and everywhere when it find .log.active, it should change its border.
$.fn.filtruj = function(){
$(this).on('click', function(){
var that = $(this);
$('.camp_row').each(function(){
$(this).find(that).css('border','10px solid orange');
});
})
}
$('.log.active').filtruj();
The problem is, it wor on only one result. I think that's because "that" refer to a specific .log.active' but no all .log.active.
If I understand the question, you should pass the selector in constructor, then:
$.fn.filtruj = function(selector){
$(this).on('click', function(){
var that = $(this);
$('.camp_row').each(function(){
$(this).find(selector).css('border','10px solid orange');
});
})
}
$('.log.active').filtruj('.log.active');
Related
I am trying to add press to jQuery selector. I have many elements on same document, So I can not use IDs for each. I tried by $(selector)[i] as like explained here.
var selectProduct = $('.mh60 a');
for (var i = 0; i < selectProduct.length; i++) {
Hammer(selectProduct[i]).on("press", function() {
$(selectProduct[i]).addClass('active');
});
}
It's not producing any error and not working. I didn't get what I am missing here.
And when I try to log selectProduct[i] by console.log(selectProduct[i]); it gives undefined result.
UPDATE 1
When I remove for loop and just use selectProduct[0] , selectProduct[1] , ... it's working but with selectProduct[i] , it's not working, So I think problem is on for loop. But I didn't get it.
UPDATE 2
I also tried with jQuery plugin, same problem
UPDATE 3
Again I tried with each(), same problem. It print the console message but addClass() is not working. I guess the problem is with this function which is not returning the current element.
$('.mh60 a').each(function(){
var mc = new Hammer(this);
mc.on("press", function() {
console.log('Double tap!');
$(this).addClass('active');
});
});
Why do you use a for?
Try changing your code like this
var selectProduct = $('.mh60 a');
selectProduct.Hammer().on("press", function() {
$(this).addClass('active');
});
Finally I solved the problem by using each function
$('.mh60 a').each(function(){
var mc = new Hammer(this);
var currentEle = $(this);
mc.on("press", function() {
currentEle.addClass('active');
});
});
I'm upgrading the jQuery on my website to jQuery v1.10.1 from 1.4.2 .
I'm changing all the .live functions to .on.
Now i'm having trouble with changing one of them.
function tb_init(domChunk){
$(domChunk).live('click', function(){
var t = this.title || this.name || null;
var c = $(this).parent().parent().find('.quotation').html();
var a = this.href || this.alt;
var g = this.rel || false;
var o = $(this);
tb_show2(t,c,a,g,o);
this.blur();
return false;
});
}
I tried changing it to:
$(document).on("click", domChunk, function() {
and:
$(document).on("click", $(domChunk), function() {
But both don't seem to work. domChunk itself is a selector like this: "#myid li"
The error I get is: Uncaught TypeError: Object # has no method 'blur'
Thanks
this is a reference to the DOM object and not to the jQuery object.
Try this instead:
$(this).blur();
or:
$(this).trigger('blur');
or in your code use o instead of $(this)
I could be wrong, but have you tried using $(this).blur() instead of this.blur? Since it is a jQuery function...
edit: sorry I hadn't refreshed the page before answering
I wonder if selector "$cacheA" will be cached on page load in the example below?
// MY JQUERY FUNCTION/PLUGIN
(function( $ ){
$.fn.myFunction = function() {
var $cacheA = this,
$cacheB = $cacheA.children(),
$cacheC = $cacheB.eq(0);
$cacheD = $cacheA.parent();
$cacheD.click(function(){
$cacheA.toggle();
$cacheB.fadeIn();
$cacheC.slideUp();
});
};
})( jQuery );
// END JQUERY FUNCTION/PLUGIN
$(window).load(function(){
$('#mySelector').myFunction();
});
Would it be any reason to do this:
$(window).load(function(){
var $mySelector = $('#mySelector');
$mySelector.myFunction();
});
If, inside your "load" handler, you were to do many jQuery operations with "$mySelector", then saving that in a variable would be a good idea. However, in your example, you only use the value once, so it really makes no difference at all.
Firstable, $cacheA and others inside click function will be undefined.
$cacheD.click(function(){
$cacheA.toggle();
$cacheB.fadeIn();
$cacheC.slideUp();
});
Second,
$.fn.myFunction = function() {
var $cacheA = this,
$cacheB = $cacheA.children(),
$cacheC = $cacheB.eq(0);
$cacheD = $cacheA.parent();
}
So, after $('selector').myFunction() how can I use $cacheB, $cacheC and $cacheD? Where they are will store?
I've written this code for a friend. The idea is he can add a "default" class to his textboxes, so that the default value will be grayed out, and then when he clicks it, it'll disappear, the text will return to its normal color, and then clicking a second time won't clear it:
$(document).ready(function() {
var textbox_click_handler = function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind(textbox_click_handler);
};
$(".default").mouseup(textbox_click_handler);
});
The clicking-to-clear works, but I get the following error:
Uncaught TypeError: Object function clear_textbox() { ... } has no method 'split'
what is causing this? How can I fix it? I would just add an anonymous function in the mouseup event, but I'm not sure how I would then unbind it -- I could just unbind everything, but I don't know if he'll want to add more functionality to it (probably not, but hey, he might want a little popup message to appear when certain textboxes are clicked, or something).
How can I fix it? What is the 'split' method for? I'm guessing it has to do with the unbind function, since the clearing works, but clicking a second time still clears it.
You can do it like this:
var textbox_click_handler = function(e) {
$(this).removeClass('default')
.attr('value', '')
.unbind(e.type, arguments.callee);
};
$(function() {
$(".default").mouseup(textbox_click_handler);
});
Or use the .one function instead that automatically unbinds the event:
$(function() {
$(".default").one('mouseup', function() {
$(this).removeClass('default').attr('value', '');
});
});
The unbind needs an event handler while you are specifying a function to its argument thereby giving you the error.
I am not sure if this is really different but try assigning the function to a variable:
var c = function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind('mouseup');
}
and then:
$(".default").mouseup(function(){
c();
});
if you don't want to completely unbind mouseup, check for the current state using hasClass(). No need to unbind anything.
$(document).ready(function() {
$('.default').bind('mouseup', function(e) {
var tb = $(this);
if(tb.hasClass('default')) {
tb.removeClass('default').val('');
}
});
});
Make sure you are unbinding mouseup:
function clear_textbox() {
$(this).removeClass('default');
$(this).attr('value', '');
$(this).unbind('mouseup');
}
$(function() {
$('.default').mouseup(clear_textbox);
});
Also I would write this as a plugin form:
(function($) {
$.fn.watermark = function(settings) {
this.each(function() {
$(this).css('color', 'gray');
$(this).mouseup(function() {
var $this = $(this);
$this.attr('value', '');
$this.unbind('mouseup');
});
});
return this;
};
})(jQuery);
so that your friend can simply:
$(function() {
$('.someClassYourFriendUses').watermark();
});
I'm creating a plugin for jQuery. I wont attempt to explain the plugin here, so lets say for simplicity that my plugin opens an alert when you click on the targeted element. Here is a simple version of my plugin.
(function($) {
// Options
var defaults = {
message: 'Default message'
};
var options = $.extend(defaults, options);
$.fn.jAlert = function(options) {
return this.each(function(){
var $this = $(this);
$this.click(function(){
alert(options.message);
});
});
};
})(jQuery);
I can get that far. It works great. However, if I call my plugin like this:
$('h1.simon').plugin({ message: 'Hello ' + $(this).attr('class') });
The message returns as 'Hello undefined', I'd prefer it to be 'Hello simon' (the class of the H1 tag).
I'm sure this is the simplest thing to do, but I'm not even sure what I should be Googling to find the solution.
Any help would be greatly appreciated!
Cheers,
Will
Update:
After playing about a bit, this seems to work... And I have no idea why! I don't think I really understand scope yet. I think I'll go do some reading.
$('h1.simon').click(function(){
$(this).jAlert({
icon: 'Hello ' + $(this).attr('class')
});
});
Save a reference to the element:
var $el = $('h1.simon');
$el.plugin({ message: 'Hello ' + $el.attr('class') });
Otherwise this refers to window which doesn't have a class.
If you want to be able to use this for convenience, you could allow message to accept a function that returns the value you want to display.
Try it out: http://jsfiddle.net/9hyJc/
(function($) {
$.fn.jAlert = function(options) {
// Options
var defaults = {
message: 'Default message'
};
var options = $.extend(defaults, options);
return this.each(function(){
var $this = $(this);
$this.click(function(){
if($.isFunction(options.message)) {
// If it is a function, call it,
// setting "this" to the current element
alert(options.message.call(this));
} else {
// Otherwise, assume it is a string
alert(options.message);
}
});
});
};
})(jQuery);
$('h1.simon').jAlert({ message: function() { return 'Hello ' + $(this).attr('class'); } });
at the time you are calling the plugin and passing the options .. this refers to window and NOT the element as you seem to expect