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!");
}
});
Related
I'm a javascript newbie and I'm trying to call a jQuery function in this way:
function getProducts(){
$.post("products.php",
{
customer_ID:$("#customers").val()
},
function(data,status){
return status && data !== "";
});
};
$(document).ready(function(){
$("#customers").change(function(){
if(getProducts){
alert("trovato");
$("#products").prop("disabled", false);
$("#products").html(data);
}else{
alert("non trovato");
$("#products").empty();
$("#products").prop("disabled", true);
}
});
});
The if-else statement in the ready doesn't work although the function getProducts works properly. The problem, I suppose, is in the function call. What am I wrong with this? Thank you.
You need to wrap the response with a callback, like so:
function getProducts(callback){
$.post("products.php",
{
customer_ID:$("#customers").val()
},
function(data,status){
callback(status && data !== "");
});
};
$(document).ready(function(){
$("#customers").change(function(){
getProducts(function(status) {
if(status){
alert("trovato");
$("#products").prop("disabled", false);
$("#products").html(data);
}else{
alert("non trovato");
$("#products").empty();
$("#products").prop("disabled", true);
}
});
});
});
I'm not quite sure if this will work because of the asynchronized call inside of the function.
The obvious mistake is that you have to call a function like that: function(). You just forgot the parentheses.
If it won't work after that fix, you have to rework your program to use callbacks where you have asynchron calls.
Im Trying to return a value from callback function with no success.
Can you see what is wrong here??:
function getval( callback ){
jQuery.getJSON('http://data.mtgox.com/api/1/BTCUSD/ticker?callback=?', function(data) {
// We can't use .return because return is a JavaScript keyword.
callback(data['return'].avg.value);
});
}
$(function () {
$(document).ready(function() {
getval( function ( value ) {
alert( 'Do something with ' + value + ' here!' );
} );
});
});
Here is JSFIddle link: http://jsfiddle.net/kf6qb/1/
Thank you very much!
Remove ?callback=? from the URL. That API doesn't support JSONP, and allows cross-domain calls.
See my FIDDLE
check this code its working FIDDLE
$(function () {
jQuery.getJSON('http://data.mtgox.com/api/1/BTCUSD/ticker?', function(data) {
// We can't use .return because return is a JavaScript keyword.
alert(data.return.avg.value);
});
});
Your data does not have a field called return. data['return'] is undefined.
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();
}
});
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/
How do i create a method in Jquery
For example
function dosomething()
{
// do something
}
dosomething();// i can call the function this way
How can i define function like dosomething() and call them in jquery?
Thanks
In exactly the same way. jQuery is JavaScript.
function doSomething() {
// do something
}
$(function () {
doSomething(); // call doSomething on document ready.
});
You can create a basic jQuery function:
(function($)
{
$.fn.myFunc = function()
{
return this.each(function()
{
alert("do something for each element return by JQuery object");
});
};
})(jQuery);
Doing the above allows me to $("#myElement").myFunc();
Don't forget that jQuery is javascript. Javascript is not jQuery.
You can read up on jQuery plugin authoring here