Call A Function On ScrollExtend - jQuery - javascript

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

Calling a user defined jQuery function

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.

getJSON with return value, Can someone take a look what is wrong here?

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.

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();
}
});

Calling user-defined function on jQuery object

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/function in Jquery

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

Categories