Calling user-defined function on jQuery object - javascript

I want the color of the text to change when I click it. This is the code I'm using right now:
$(document).ready(function() {
$("#colorChanger p").click(function() {
$(this).changeColor();
});
function changeColor() {
$(this).css("color", "white");
};
})
I also have this code on JSFiddle. What's wrong with my code?

Updated the fiddle: http://jsfiddle.net/xME2L/5/
If you wish to add a function so you can call it on whatever is returned from $(), you must use:
$.fn.functionName = function() {}

Here is my solution. You were not passing the object correctly to the changeColor function. I would also recommend declaring changeColor outside of the document.ready function.

As an alternative to agmcleod's solution, you could call changeColor this way (without changing changeColor):
changeColor.call(this);
Demo the change here.

You should define changeColor as a JQuery plugin if you want to call it like $(this).changeColor(); :
$(document).ready(function(){
$("#colorChanger p").click(function(){
$(this).changeColor();
});
$.fn.changeColor = function() {
this.css("color","white");
};
})

The changecolor function was never assigned to the jquery el object.
An alternative to agmcleod's solution would be :
$(document).ready(function(){
$("#colorChanger p").click(function(){
changeColor($(this));
});
function changeColor(el){
el.css("color","white");
};
});
http://jsfiddle.net/dq6yv/

Related

Why doesn't my small custom function work correctly?

I wrote a custom function that is not working as expected. This part of the code $(carta).stop().css("visibility","visible").fadeIn();
and this
$(carta).stop().fadeOut(250);
are not beeing triggered, but if I change the carta var for the id ("#carta1") it works. Does anybody knows what I should change for the function to work correctly?
Here's the code;
function yes(meal,carta){
var fadeTo_null = function(e){
e.preventDefault();
$("#probando").stop().fadeTo(250,0);
$("#probando").css("visibility","hidden");
$(carta).stop().css("visibility","visible").fadeIn();
};
var fadeTo_back = function (e){
e.preventDefault();
$("#probando").stop().fadeTo(500,1);
$("#probando").css("visibility","visible");
$(carta).stop().fadeOut(250);
};
$(meal, carta).hover(fadeTo_null,fadeTo_back);
};
$(document).ready(function(){
yes("#frueh" ,"#carta1");
});
You pass variable objects to your function like this:
yes(meal, $('#carta'));
Then use the variable inside the function like this:
carta.stop().css("visibility","visible").fadeIn();
You have one string but 2 arguments
Change to:
yes("#frueh","#carta1");//now have 2 params
Then when you need both you can use:
$([meal, carta].join())// $('#frueh,#carta1')
You forget to close the quotes of the parameters and close the parentheses of the ready function.
Code that is not working:
$(document).ready(function(){
yes("#frueh ,#carta1");
};
Code that is working:
$(document).ready(function(){
yes("#frueh","#carta1");
});

Call A Function On ScrollExtend - jQuery

How to call a function on scrollExtend. I need the code like below but its not working fine. How to make it work?
$(document).ready(
function() {
$('#scrollBox').scrollExtend(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
But the actual code of scrollExtend is like below in which i dont know how to call a function on it,
jQuery('.scroll_container').scrollExtend({
'target': 'div#scroll_items',
'url': 'more_content.html',
'newElementClass': 'list_item more_content'
});
I would use the built in function onScrollBeyond in JQuery.
Else there is a setting in scrollExtend that is called beforestart and onSuccess which both are callback variables which means you could put functions there like
$('#scrollBox').scrollExtend({
'target': 'div#scroll_items',
'beforeStart': myFunction,
'onSuccess': mySecondFunction
});
Regards
As BeadFist said, you can simply use onScrollBeyond:
$('.scroll_container').onScrollBeyond(functionCall);//if the function exists already, just pass a reference too it
$('.scroll_container').onScrollBeyond(function()
{
//your function
});
Mind you, for both scrollExtend and onScrollBeyond, you need the plugin, of course.
Try using onScrollBeyond:
$(document).ready(
function() {
$('#scrollBox').onScrollBeyond(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
Try:
$('#scrollBox').scroll(function() {
if($('#scrollBox').scrollTop() + $('#scrollBox').height() == $(parentElm).height()) {
alert("bottom!");
}
});

jQuery: Call a function twice

I'm trying to run a function twice. Once when the page loads, and then again on click. Not sure what I'm doing wrong. Here is my code:
$('div').each(function truncate() {
$(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});
$('.truncate').click(function() {
if ($(this).parent().hasClass('closed')) {
$(this).parent().removeClass('closed').addClass('open').children().show();
}
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed');
$('div').truncate();
$(this).show();
}
});
The problem is on line 13 where I call the truncate(); function a second time. Any idea why it's not working?
Edit jsFiddle here: http://jsfiddle.net/g6PLu/
That's a named function literal.
The name is only visible within the scope of the function.
Therefore, truncate doesn't exist outside of the handler.
Instead, create a normal function and pass it to each():
function truncate() { ...}
$('div').each(truncate);
What's the error message do you get?
You should create function and then call it as per requirement
Define the function
function truncate(){
$('div').each(function(){
});
}
Then call the function
truncate();
Another approach is to establish, then trigger, a custom event :
$('div').on('truncate', function() {
$(this).......;
}).trigger('truncate');
Then, wherever else you need the same action, trigger the event again.
To truncate all divs :
$('div').trigger('truncate');
Similarly you can truncate just one particular div :
$('div#myDiv').trigger('truncate');
The only prerequisite is that the custom event handler has been attached, so ...
$('p').trigger('truncate');
would do nothing because a truncate handler has not been established for p elements.
I know there's already an accepted answer, but I think the best solution would be a plugin http://jsfiddle.net/g6PLu/13/ It seems to be in the spirit of what the OP wants (to be able to call $('div').truncate). And makes for much cleaner code
(function($) {
$.fn.truncate = function() {
this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
};
$.fn.untruncate = function() {
this.removeClass('closed').children().show();
};
})(jQuery);
$('div').truncate();
$('.truncate').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('closed')) {
$parent.untruncate();
} else {
$parent.truncate();
}
});

using jquery when passing arguments to function

I have a link which triggers js function. To the link I have attached data-attribute on html which I want to pass to the function.
$(".trigger").awesomeFunction({
oneArgument: "secretSauce",
secondArgument: $(this).data("address")
});
Now that second argument ends up null instead of the data-address attribute. Is it because $(this) is not in right scope inside the function arguments list and if so how could I refer to the originating link?
Not sure how your awesomeFunction is defined, but this seems to do the trick.
$.fn.awesomeFunction = function(obj){
console.log(obj.sauceType, this.data(obj.dataArg))
// returns 'secretSauce 123 Anystreet Dr.'
}
var div = $('#theDiv')
div.awesomeFunction({
sauceType : 'secretSauce',
dataArg : 'address'
})
JSFiddle
$(".trigger").each(function() {
var self = $(this);
self.awesomeFunction({
oneArgument: "secretSauce",
secondArgument: self.data("address")
});
});
Given your code sample, anything could happen, this is not defined in the scope of .trigger, you're "one layer out" so to speak.
See this fiddle for example
$(".trigger").click(function() {
var self = $(this);
self.awesomeFunction({
oneArgument: "secretSauce",
secondArgument: self.data("address")
});
});

FadeOut, Replace HTML & FadeIn

I'm having a few issues getting a simple JQuery function to work that fades an element out, replaces the image within and fades back in again.
My function looks like this:
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html="<img src='page4.jpg'>";
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html="<img src='page5.jpg'>";
$("#rightPage").fadeIn("slow");
});
}
The fade in/out section works fine but the HTML is not being replaced with the new images. Can you see a problem with this?
function nextPage() {
$("#leftPage").fadeOut("slow", function () {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function () {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
You're assigning a string to .html which is actually a function that takes a string as an argument, instead of being a property you can assign things to.
Notice I've changed .html = "" to .html("") in the above snippet. This now passes a string to .html(), which updates the element accordingly.
The correct syntax for .html() is:
$("#leftPage").html("<img src='page4.jpg'>");
Try this:
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}
jquery's html is a function, not a property. You pass in the html you want to replace the elements contents with as a parameter
Try:
$("#leftPage").html("<img src='page4.jpg'>");
and:
$("#rightPage").html("<img src='page5.jpg'>");
You're using jQuery's .html() wrong
function nextPage() {
$("#leftPage").fadeOut("slow", function() {
$("#leftPage").html("<img src='page4.jpg'>");
$("#leftPage").fadeIn("slow");
});
$("#rightPage").fadeOut("slow", function() {
$("#rightPage").html("<img src='page5.jpg'>");
$("#rightPage").fadeIn("slow");
});
}

Categories