function jsFunc() {
alert('i am js!');
}
$('#node').slideDown().call(jsFunc());
Of course, the function isn't called 'call'.
** EDIT **
(Added solution on behalf of the OP).
Solution
http://jsfiddle.net/gx2mJ/1/
or
HTML:
<div id="content">
<p class="article">
this is an article
</p>
</div>
JavaScript:
function callBack() {
$("#content .article").html("the callback has been called");
}
$(document).ready(function() {
$("#content .article").slideUp(0);
$("#content .article").each(function(i) {
$(this).delay(i*250).slideDown(function(){
//if ($("#content .article:animated").length < 1) {
callBack();
//}
});
});
});
You can't do that by default, but you could easily add it as a plugin:
$.fn.call = function (fn, args, thisp) {
fn.apply(thisp || this, args);
return this; // if you want to maintain chainability -- other wise, you can move the return up one line..
}
Though I'm not sure why you would want to do that. If you're thinking it won't be run until after the slide is done, then you'd be wrong because jQuery animations are asynchronous.
why not just use a callback function? almost all jquery functions have them.
$('#node').slidedown('normal', function(){jsFunc()})
$("#content article").each(function(i) {
$(this).delay(i*250).slideDown();
}).callBack();
The whole reason for having the callback in the chain is so it will run AFTER all the animations have taken place.
try this instead,
$("#content .article").each(function(i) {
$(this).delay(i*250).slideDown(function(){
if ($("#content .article:animated").length < 1) {
callBack();
}
});
});
the same problem
What is your objective of calling the jsFunc()?
If you want it as a callback you can use the sysntax given here
ex:
$('#node').slidedown('normal', function(){jsFunc()}).
But if you want the function jsFunc to be able to call as a plugin, you need to write a plugin as suggested by CD Sanchez.
I think again there is one issue in your sample code, you are calling the function jsFunc and passing the value returned by jsFunc as an argument to the call function. If you want to pass the function jsFunc as the callback function you need to use the syntax
$('#node').slideDown().call(jsFunc);
(Added solution on behalf of the OP).
Solution
http://jsfiddle.net/gx2mJ/1/
or
HTML:
<div id="content">
<p class="article">
this is an article
</p>
</div>
JavaScript:
function callBack() {
$("#content .article").html("the callback has been called");
}
$(document).ready(function() {
$("#content .article").slideUp(0);
$("#content .article").each(function(i) {
$(this).delay(i*250).slideDown(function(){
//if ($("#content .article:animated").length < 1) {
callBack();
//}
});
});
});
$("#content article").each(function(i) {
$(this).delay(i*250).slideDown();
}).callBack();
The whole reason for having the callback in the chain is so it will run AFTER all the animation triggers have taken place.
Related
I am looking to hide several divs one by one or with a time interval of 5 seconds, i tried below doesn't seem to work though
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
<script>
$('document').ready(function(){
window.setTimeout('mytimer()',5000);
});
$('document').ready(function(){
window.setTimeout('mytimer2()',10000);
});
$('document').ready(function(){
window.setTimeout('mytimer3()',15000);
});
$('document').ready(function(){
window.setTimeout('mytimer4()',20000);
});
function mytimer(){ $('#data1').hide(); }
function mytimer2(){ $('#data2').hide(); }
function mytimer3(){ $('#data3').hide(); }
function mytimer4(){ $('#data4').hide(); }
</script>
I would use single timeout function as your are hiding at regular intervals. There is one mistake in your code you need to pass the reference of function to setTimeout instead of passing the function call as a string.
Live Demo
window.setTimeout(mytimer,1000);
index = 1;
function mytimer()
{
$('#data' + (index++)).hide();
if(index <= 4) window.setTimeout(mytimer,1000);
}
You need to use $(document) instead of $('document')
$('document') will look for HTML Element with document tag, which doesn't exist.
Learn to use developer tools, Here's a good read: How to open the JavaScript console in different browsers?
Code
$(document).ready(function(){
window.setTimeout(mytimer,5000); //You can simply pass the function reference
window.setTimeout(mytimer2,10000);
window.setTimeout(mytimer3,15000);
window.setTimeout(mytimer4,20000);
});
Try it this way:
$(document).ready(function(){
window.setTimeout(mytimer, 5000);
window.setTimeout(mytimer2, 10000);
window.setTimeout(mytimer3, 15000);
window.setTimeout(mytimer4, 20000);
});
function mytimer(){
$('#data1').hide();
}
function mytimer2(){
$('#data2').hide();
}
function mytimer3(){
$('#data3').hide();
}
function mytimer4(){
$('#data4').hide();
}
Well you can use setInterval function too for this and once all the elements have been hidden you can clearInterval like one below:
DEMO HERE
function mytimer(elem){
console.log('came here');
$(elem).hide();
}
$(document).ready(function(){
var i=0;
var interval=null;
interval = window.setInterval(function(){
i++;
if(i<=$('#container').children().length)
mytimer("#data"+i);
else
{
clearInterval(interval);
return;
}
},5000);
});
Try this change and so on for the rest:
window.setTimeout(mytimer, 5000);// removed quotes and `()`
Another solution using jQuery fadeOut():
$(function() {
for (var i = 1; 4 >= i; i++)
$('#data' + i).fadeOut(5000 * i);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
Use .delay() in jquery . No Settimeout function needed.
$('#data1').delay(5000).hide('fast');
$('#data2').delay(10000).hide('fast');
$('#data3').delay(15000).hide('fast');
$('#data4').delay(20000).hide('fast');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
There are multiple errors in your code.
You have used $('document').ready(function(){}), which is incorrect. document is a keyword, it shouldn't be in quotes.
You don't have to use multiple instance of calling $(document).ready(). You can call all your statements from a single function. You can also use $(function(){}).
While calling the function name inside the timeout function, you shouldn't put them under quotes. They act like keywords after you have defined them in your code. The function call inside the Timeout function shouldn't be followed by (). So it should be window.setTimeout(mytimer,5000);
Please refer the fiddle : http://jsfiddle.net/65gs8s9y/
I have modified your code which works fine now:
$(document).ready(function(){
window.setTimeout(mytimer,5000);
window.setTimeout(mytimer2,10000);
window.setTimeout(mytimer3,15000);
window.setTimeout(mytimer4,20000);
});
function mytimer(){
$('#data1').hide();
}
function mytimer2(){
$('#data2').hide();
}
function mytimer3(){
$('#data3').hide();
}
function mytimer4(){
$('#data4').hide();
}
Good Day, this maybe a silly question :) how can I pass a parameter to an external javascript function using .on ?
view:
<script>
var attachedPo = 0;
$this.ready(function(){
$('.chckboxPo').on('ifChecked', addPoToBill(attachedPo));
$('.chckboxPo').on('ifUnchecked', removePoToBill(attachedPo ));
});
</script>
external script:
function addPoToBill(attachedPo){
attachedPo++;
}
function removePoToBill(attachedPo){
attachedPo--;
}
but Im getting an error! thanks for guiding :)
You need to wrap your handlers in anonymous functions:
$('.chckboxPo')
.on('ifChecked', function() {
addPoToBill(attachedPo);
})
.on('ifUnchecked', function() {
removePoToBill(attachedPo);
});
You can also chain the calls to on as they are being attached to the same element.
If your intention is to count how many boxes are checked, via passing variable indirectly to functions try using an object instead like this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pBkhX/
var attachedPo = {
count: 0
};
$(function () {
$('.chckboxPo')
.on('change', function () {
if ($(this).is(':checked')) {
addPoToBill(attachedPo);
} else {
removePoToBill(attachedPo);
}
$("#output").prepend("" + attachedPo.count + "<br/>");
});
});
function addPoToBill(attachedPo) {
attachedPo.count++;
}
function removePoToBill(attachedPo) {
attachedPo.count--;
}
If it is not doing anything else you can simplify the whole thing to count checked checkboxes:
$(function () {
var attachedPo = 0;
$('.chckboxPo')
.on('change', function () {
attachedPo = $(".chckboxPo:checked").length;
});
});
"DOM Ready" events:
you also needed to wrap it in a ready handler like this instead of what you have now:
$(function(){
...
});
*Note: $(function(){YOUR CODE HERE}); is just a shortcut for $(document).ready(function(){YOUR CODE HERE});
You can also do the "safer version" (that ensures a locally scoped $) like this:
jQuery(function($){
...
});
This works because jQuery passes a reference to itself through as the first parameter when your "on load" anonymous function is called.
There are other variations to avoid conflicts with other libraries (not very common as most modern libs know to leave $ to jQuery nowadays). Just look up jQuery.noConflict to find out more.
HTML
<div class="expand">
<span>▲</span>
</div>
JS
$(".expand").click(function(){
if ($(this).children().text()=="▼") {
$(this).children().fadeOut("fast",function(){
$(this).children().text("▲");
}); // callback?
$(this).children().fadeIn("fast"); //woks
} else {
$(this).children().fadeOut("fast",function(){
$(this).children().text("▼");
}); // callback?
$(this).children().fadeIn("fast"); //works
};
$(this).parent().parent().find(".words, .readings").slideToggle("fast"); //works
});
I tried debugging it by putting alert('') in callback, but nothing popped up, so I guess I'm making some simple mistake here. Basically, ▼ should fade out and when it fades out (callback), it should turn into ▲, and then fade in, like that. Pretty standard we seen everywhere if you ask me. Or I'm doing this completely wrong?
I'd prefer corrections on my implementation than completely different solutions, although they're welcome as well.
Inside of the callback, this is already the element you want, so $(this).children() returns an empty object because that <span> does not have children. Remove the .children() from the callback:
$(this).children().fadeOut("fast",function(){
$(this).text("▲");
});
Inside the callback $(this) is already the span that you are looking for. So just use $(this).text(), as $(this).children() will fetch nothing as there are no child elements for the span and it will eventually point to the wrong target event if it has children.
Also place your fadeIn() inside the callback, if outside it will get executed before the callback executes.
$(".expand").click(function () {
if ($(this).children().text() == "▼") {
$(this).children().fadeOut("fast", function () {
$(this).text("▲").fadeIn("fast");
}); // callback?
} else {
$(this).children().fadeOut("fast", function () {
$(this).text("▼").fadeIn("fast");
}); // callback?
};
$(this).parent().parent().find(".words, .readings").slideToggle("fast"); //works
});
Fiddle
You can just simplify this to:
$(".expand").click(function () {
$(this).children().fadeOut(function () {
$(this).text(function (_, val) {
return val == "▼" ? "▲" : "▼";
}).fadeIn("fast");
})
$(this).parent().parent().find(".words, .readings").slideToggle("fast"); //works
});
Fiddle
How can I achieve this?
for each pages I have attached a unique class-name so I can target them by css later.
body.pageHome
about.pageAbout
contact.pageContact
I want to run a function but only targeting the homepage.
eg.
if($('body').hasClass('pageHome')) {
callMe;
}
function callMe() {
alert('I am Home!');
}
It looks like you're close. To call callMe, you'll want parenthesis to indicate that it's a function call:
if($('body').hasClass('pageHome')) {
callMe();
}
Your forgot the parenthesis when you called callMe:
function callMe() {
alert('I am Home!');
}
if($('body').hasClass('pageHome')) {
callMe();
}
Does that help?
Concept should work fine as long as you are wrapping code in
$(function(){ /* run code*/ })
and you need to add "()" to callme();
I have the following function (I've removed code from the middle that is not important to my question):
function shadowBoxRefresh(){
$("#sb-nav-next, #sb-nav-previous").click(function(){
$('#sb-container').addClass("visibility_stay");
$('#sb-overlay').addClass("opacity_stay");
Shadowbox.close();
Shadowbox.clearCache();
shadowBoxSetup();
setTimeout("Shadowbox.open(c)", 400)
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
}
});
}
My problem is, I need this part:
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
to fire after the rest of the function has completed. I'm wondering if a callback would do the job, but I'm not versed well enough in callbacks to know how to implement it.
Your help would be much appreciated.
If by "after the rest of the function" you mean, "after the Shadowbox.open(c)" that happens .4 sec later, then do this:
function shadowBoxRefresh(){
$("#sb-nav-next, #sb-nav-previous").click(function(){
$('#sb-container').addClass("visibility_stay");
$('#sb-overlay').addClass("opacity_stay");
Shadowbox.close();
Shadowbox.clearCache();
shadowBoxSetup();
setTimeout(function () {
Shadowbox.open(c);
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
}, 400);
}
});
}
Assuming after shadowBoxSetup() is when you want it
function shadowBoxSetup( callback ) {
// Your code...
callback();
}
To use that
function shadowBoxRefresh(){
$("#sb-nav-next, #sb-nav-previous").click(function(){
$('#sb-container').addClass("visibility_stay");
$('#sb-overlay').addClass("opacity_stay");
Shadowbox.close();
Shadowbox.clearCache();
shadowBoxSetup(function(){
$('#sb-container').removeClass("visibility_stay");
$('#sb-overlay').removeClass("opacity_stay");
});
setTimeout("Shadowbox.open(c)", 400);
}
});
}
It will be executed after the rest of the function has completed; statements are executed in order.
Are you saying you want it to execute after the timeout? If so, create a function that encapsulates the two calls and the open() call.
If not, you might need to be a bit clearer.