I need some help understanding some jQuery basics. I have a really simple function here but I can't call it.
<script type="text/javascript">
jQuery(function ($) {
callFunc();
}
function callFunc(){
alert("Function Called!");
}
);
</script>
If I don't put the alert in it's own function it triggers the alert. When I wrap it in a function and give it a name and try to call it, it doesn't work. Please help, I've been looking all over for some straightforward ways of just creating and calling jQuery functions. I've tried passing in the $ as a parameter but no matter what I try, I can't seem to just create a simple function and call it. What am I doing wrong and how do I call my function?
because of syntax error:
Your code:
jQuery(function ($) {
callFunc();
} //missing a closing ) for the JQuery(
function callFunc(){
alert("Function Called!");
}
); //extra )
Correct code:
jQuery(function ($) {
callFunc();
});
function callFunc() {
alert("Function Called!");
}
DEMO: http://jsfiddle.net/tnhswf11/
If you want to have the function inside the jQuery:
jQuery(function ($) {
function callFunc() {
alert("Function Called!");
}
callFunc();
});
DEMO: http://jsfiddle.net/tnhswf11/1/
You have syntax error
Correct syntax:
jQuery(function ($) {
callFunc();
function callFunc(){
alert("Function Called!");
}
});
or:
jQuery(function ($) {
callFunc();
});
function callFunc(){
alert("Function Called!");
}
Just a reminder. jQuery(function ($) {}); is a short hand for jQuery(document).ready(function($){});
Related
Why am I getting the ReferenceError:
manualEntry is not defined error,
when using the following within Wordpress?
hide
<script>
jQuery(document).ready(function ($) {
function manualEntry() {
$("#details").hide();
}
});
</script>
<a class="my_class" href="#">hide</a>
<script>
var $ = jQuery.noConflict();
$(document).ready(function () {
$( ".my_class" ).click(function( event ) {
event.preventDefault();
$("#details").hide();
});
});
</script>
I normally do e.g.:
$(".item").fadeIn(function(){
alert('done');
});
Which works? (I believe is correct?) but how do I do this with custom functions?
E.g.
$(".item").customFunction(function(){
customFunctionTwo();
});
Basically it will look like this
$.fn.customFunction = function (callback){
//some code
callback();
}
$('.item').customFunction(function () {
customFunctionTwo();
});
I guess you should be looking at promises https://api.jquery.com/promise/
$.fn.customFunction = function (callback){
var myFn = function(){
/* your code along with settimeout as well if you choose*/
//example
return $( "div" ).fadeIn( 800 ).delay( 1200 ).fadeOut();
}
$.when( myFn() ).done(function() {
callback();
});
}
$('.item').customFunction(function () {
customFunctionTwo();
});
I have
<script>
function myfunc(){
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}
$(document).ready(function(){
$('.mybtn').on('click',function(){
$('#mydiv').toggleClass('newclass');
});
});
</script>
How to execute myfunc() in 5000ms after toggleClass was executed? Tried several ways but with no luck.
Thank you.
use setTimeout()
function myfunc() {
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}
$(document).ready(function () {
$('.mybtn').on('click', function () {
$('#mydiv').toggleClass('newclass');
setTimeout(myfunc, 5000)
});
});
Try this...
function myfunc(){
alert("show this alert in 5000ms after toggleClass executed");
//some code goes here
}
$(document).ready(function(){
$('.mybtn').on('click',function(){
$('#mydiv').toggleClass('newclass').delay(5000).queue(myfunc);
});
});
JSFIDDLE DEMO
Use settimeout function
function myfunc() {
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}
$(document).ready(function () {
$('.mybtn').on('click', function () {
$('#mydiv').toggleClass('newclass');
setTimeout(myfunc, 5000)
});
});
You can have a callback function like this
$('#mydiv').toggleClass('newclass', 5000).promise().done(function(){alert("done")});
Here is a working demo
I would do the $("#mydiv").toggleClass('newclass') in a separate event.
For instance <button class="mybtn" onmousedown="$('#mydiv').toggleClass('newclass')" onclick="myfunc();">Fast Toggle</button>
If you toggle onmousedown the page will render with the toggle before the click event fires.
I'm looking for a clean way to fire one function that may be triggered by two possible events. For example:
$('form').on('submit', function() {
stuff in here...
});
$('input').on('change', function() {
same stuff in here as before...
});
I could do
function doStuff() {
Stuff in here....
}
$('form').on('submit', function() {
doStuff();
});
$('input').on('change', function() {
doStuff();
});
But I was wondering if there was a more elegant way of doing this?
function doStuff() {
Stuff in here....
}
$('form').on('submit', doStuff);
$('input').on('change', doStuff);
$(function() {
$('form').submit(function(event) {
event.preventDefault();
stuff('aaa');
$(this).unbind().submit();
});
$('input').change(function() {
stuff('aaa');
});
});
function stuff(param){
// Some Processing!
return(param);
}
I have following code in my Wordpress:
(function ($) {
var $header = $("div.header");
$(window).bind("scroll resize", function () {
if ($(window).scrollTop() > 30) {
$("div.header").stop().animate({
'opacity': 0.24
}, {
duration: 1000
});
} else {
$header.stop().animate({
'opacity': 1
}, {
duration: 1000
});
}
});
})(jQuery);
If statement kicks in when supposed but else never...
BUT
If I enclose it with:
jQuery(document).ready(function($) {
// code here
});
It's all fine. Why?
Thank you
May be you're trying to use jQuery when dom in not build. Try to use $(document).ready function:
(function ($) {
$(document).ready(function () {
$header = $("div.header");
$header.remove();
});
})(jQuery);
About what you have mantioned in the question:
jQuery(document).ready(function ($) {
// code
});
It works because it do the same thing: it binds event handler on ready event and pass jQuery object as a parameter to the function as $.
Now what you did before:
(function ($) {
$header = $("div.header");
$header.remove();
})(jQuery);
Here you just declare anonymous function with named $ parameter:
function ($) {
}
And call it with jQuery object as a parameter, which will be available in the function as $:
(function ($) {
})(jQuery);