Can you please take a look at this demo and let ma know how I can call/toggle two functions from outside of the toggle()
function printConsole() {
console.log("This is From Function A");
}
function printAlert() {
alert("This is From Function B");
}
$("#toggler").toggle(
printConsole(); printAlert();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="toggler">Toggle Fnctions</button>
Try storing functions in an array , utilizing .click() , Array.prototype.reverse()
function printConsole() {
console.log("This is From Function A");
}
function printAlert() {
alert("This is From Function B");
}
var fns = [printConsole, printAlert];
$("#toggler").click(function() {
fns[0]();
fns.reverse();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="toggler">Toggle Fnctions</button>
Depreciated in jquery 1.8
use comma, try this code:
$("#toggler").toggle(
function() {
console.log("This is From Function A");
},function() {
alert("This is From Function B");
}
);
reference: https://api.jquery.com/toggle-event/
Update
Use this Instead:
var clicks = true;
$('a').click(function() {
if (clicks) {
alert('Function A');
clicks = false;
} else {
alert('Function B');
clicks = true;
}
});
reference: Alternative to jQuery's .toggle() method that supports eventData?
Related
Function:
function abc()
{
$('#table_id tr td').removeClass('highlight');
$(this).addClass('highlight');
tableText($table_label,$table_id);
}
abc();
function refresh()
{
abc().hide; // Need help at this.
}
<button class="refresh" onclick="refresh()">Refresh</button>
I'm trying to remove function/stop running abc() function, when refresh button was clicked.
Try this code, if abc is in the global scope:
window.abc = function() {
return false;
}
or you could do: window.abc = undefined when it's in the global scope.
when it's a method: delete obj.abc
You can pass param in your function and check condition like below.
function abc(arg) {
if (arg) {
$('#table_id tr td').removeClass('highlight');
$(this).addClass('highlight');
tableText($table_label, $table_id);
} else {
//Do what ever you want if needed
}
}
abc(true);
function refresh() {
abc(false)
}
Put all the code you only want to run once at the start inside window.onload
window.onload = function() {
$('#table_id tr td').removeClass('highlight');
$(this).addClass('highlight');
tableText($table_label,$table_id);
}
Wrap the function inside an object to delete it. You can use the window object or create a new one. Example:
const functions = new Object;
functions.abc = () => { /* do something */ };
functions.abc();
const refresh = () => {
if ('abc' in functions){ functions.abc(); delete functions.abc; }
else { /* will do nothing */ }
};
Solved :-)
I am trying to call my JavaScript Function from my jQuery Function, but it does not seem to be calling the function showMain() at the end of the jQuery.
See below: I am trying to Call the showMain() function at the end of the .click function.
Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function() {
$("#welcomeText").fadeOut(2000);
},1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
function showMain() {
var main= document.getElementById("mainDiv");
main.style.display = 'block';
You should use an anonymous function.
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function () {
$("#welcomeText").fadeOut(2000);
}, 1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
});
var showMain = function () {
var main = document.getElementById("mainDiv");
main.style.display = 'block';
};
There is a mistake with your function definition. Please use the closing "}" bracket after the function.
I am trying to call my JavaScript Function from my jQuery Function, but it does not seem to be calling the function showMain() at the end of the jQuery.
See below: I am trying to Call the showMain() function at the end of the .click function. Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function() {
$("#welcomeText").fadeOut(2000);
},1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
function showMain() {
var main= document.getElementById("mainDiv");
main.style.display = 'block';
}
Runnable Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function () {
$("#welcomeText").fadeOut(500);
}, 1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
})
function showMain() {
var main = document.getElementById("mainDiv");
main.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="slideshowExit">
Click Here
</div>
<div id="mainDiv">
<div id="welcomeText">Welcome to India</div>
</div>
The toggle() method was deprecated in jQuery version 1.8, and removed in version 1.9. Documentation
How can use something like toggle() function in jQuery 1.11+ ?
Full Code in Fiddle
<script>
function test(){
$("*:contains(ไทย):last").text("English");
}
function test2(){
$("*:contains(English):last").text("ไทย");
}
$("#click").toggle(
test(),
test2();
});
</script>
I dont know about this behaviour, but there is my solution:
function test(){
$("*:contains(ไทย):last").text("English");
}
function test2(){
$("*:contains(English):last").text("ไทย");
}
var el = document.getElementById("click");
$(el).click(function (e) {
el.foo.apply(this, arguments);
});
el.foo = test;
el.toggle = function () {
el.foo = el.foo === test ? test2 : test;
};
I am trying to have one div box act as a main button for multiple functions; and these functions would fire consecutively after each other; but per new CLICK. Eg, Click = Function fires. Click = next function in line fires, and so forth. Currently I have the below; which is fine, but it is not firing the functions consecutively as they are coded, per click as needed; one after another. Live demo of my dilemma at 'http://bit.ly/10BW89N'
So how to create one button and 30 functions that will be called on each click. If function is defined it will call the function otherwise it will alert the click number?
$(document).ready(function () {
var a1_Events = [function1, function2, function3, function4, function5, function6, function7, function8],
a1_c = 0;
function function1() {
alert('Click 1!');
}
function function2() {
alert('Click 2!');
}
function function3() {
$("#area1").hide();
$("#area2").show();
alert('Click 3!');
}
function function4() {
alert('Click 4!');
}
function function5() {
alert('Click 5!');
}
function function6() {
$("#bg_div").hide(0).delay(1500).show(0);
$("#bg_skew").show(0).delay(1500).hide(0);
alert('Click 6!');
}
function function7() {
alert('Click 7!');
}
function function8() {
$("#area1").hide(0).delay(1500).show(0);
$("#area2").hide(0).delay(1500).show(0);
$("#sound1").show(0).delay(4500).hide(0);
document.getElementById("id1").play();
$("#hammer").show(0).delay(1500).hide(0);
$("#youwin").show(0).delay(3500).hide(0);
alert('Click 8!');
}
$('#area1').click(function () {
a1_Events[a1_c++ % a1_Events.length]();
});
$("#area2").click(function () {
$("#area1").show();
$("#area2").hide();
alert('Click 9!');
});
});
function alert(msg) {
$("#alert").text(msg).show(0).delay(1500).hide(0);
}
You can simplify your code by using a switch or if statement based on the number of times the button/div has been clicked. Each case would control your actions, fire your functions, whatever...
$('button').click(function(){
++funcNum;
switch(funcNum){
case 1:
alert('This is click ' + funcNum);
break;
Here is an example fiddle - http://jsfiddle.net/juf5u/2
I would try this:
var a1_Events = [function1, function2, function3, function4, function5, function6, function7, function8];
$('#area1').click(function () {
if (a1_Events.length > 0)
{
var tfunc = a1_Events.shift();
tfunc();
}
else
{
// all functions have been executed
}
});
This code removes each function from the array as it is executed until it gets to the end. You will still need all the function declarations from the original code.
You could try this also:
$(document).ready(function () {
var a1_Events = function1,
a1_c = 0;
function function1() {
a1_Events=function2;
alert('Click 1!');
}
function function2() {
a1_Events=function3;
alert('Click 2!');
}
function function3() {
a1_Events=function4;
$("#area1").hide();
$("#area2").show();
alert('Click 3!');
}.... so on
I'm trying to make a custom jQuery toggle function. Right now, I have 2 separate functions, lightsOn and lightsOff. How can I combine these functions to make them toggle (so I can just link to one function)?
function lightsOn(){
$('#dim').fadeOut(500,function() {
$("#dim").remove();
});
};
function lightsOff(){
$('body').append('<div id="dim"></div>');
$('#dim').fadeIn(250);
};
function toggleLights()
{
var $dim = $('#dim');
if ($dim.length)
{
$dim.fadeOut(500, function ()
{
$dim.remove();
});
}
else
{
$dim = $('<div/>', {id: 'dim'});
$('body').append($dim);
$dim.fadeIn(250);
}
}
Demo: http://jsfiddle.net/mattball/hxL8s/
function toggleLights(){
if ($("body").has("#dim")) {
$('#dim').fadeOut(500, function() {
$("#dim").remove();
});
} else {
$('body').append('<div id="dim"></div>');
$('#dim').fadeIn(250);
}
}