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>
Related
I'm having trouble triggering a function. I have the following code:
var dnfmomd;
dnfmomd = new function () {
//function content
}
$("#launch_button").on("click", dnfmomd.init);
Have you tried this?
var dnfmomd = function () {
//function content
}
$("#launch_button").on("click", dnfmomd());
I would recommend doing it this way
var dnfmomd = function() {
//function content
}
$("#launch_button").on("click", function() {
dnfmomd();
});
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?
I am not sure how to ask this question. I made a jQuery function for a banner.
$(document).ready(function() {
ionanim();
setInterval(ionanim, 12000);
function ionanim() {
$(function () {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
$(function () {
$('.ion2anim').delay(6000).fadeIn(500, function () {
$(this).delay(5000).fadeOut(500);
});
});
};
});
Link for the full animation : http://jsfiddle.net/L8XHL/11/
But with each intervatl on the setInverval the animations go close to each other after some time they overlap each other.
Did i do anything wrong?
Intervals and animations aren't exact enough to handle the timing that you require. I'd suggest using a self-executing function instead so that it will never overlap.
Also, you are over-using the document ready handler. Please stop.
http://jsfiddle.net/L8XHL/13/
$(document).ready(function () {
ionanim();
function ionanim() {
$('.ion1anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500, function () {
$('.ion2anim').fadeIn(500, function () {
$(this).delay(5000).fadeOut(500,ionanim);
});
});
});
}
});
I would further modify this to work more like a slider so that you can add an infinite number of items without having a huge pyramid of code.
http://jsfiddle.net/L8XHL/17/
$(document).ready(function () {
$(".ionbanner .bottom div").first().siblings().hide();
anim();
function anim() {
var curr = $(".ionbanner .bottom :visible");
var next = curr.next();
if (next.length == 0) {
next = curr.siblings().first();
}
curr.delay(5000).fadeOut(500,function(){
next.fadeIn(500,anim);
});
}
});
Or you could try something like this: http://jsfiddle.net/L8XHL/16/
$(document).ready(function() {
var anim1 = function() {
$('.ion1anim').fadeIn(1000, anim1Callback);
},
anim1Callback = function() {
$('.ion1anim').fadeOut(1000, anim2);
},
anim2 = function() {
$('.ion2anim').fadeIn(1000, anim2Callback);
},
anim2Callback = function() {
$('.ion2anim').fadeOut(1000, anim1);
};
anim1();
});
here's my basic code:
JS:
jQuery(function($)
{
function MyTest() {}
MyTest.prototype =
{
myMethod: function()
{
$(this).append("<div id='myId'></div>");
}
}
$(document).ready(function()
{
var myTest1 = new MyTest();
$("#anelement").click(function()
{
myTest1.myMethod();
});
});
});
HTML:
<div id='anelement'></div>
Clicking on "anelement", JS console returns:
TypeError: e is undefined ... jquery.min.js (line 5)
...and it doesn't append "myId" - why?
Thanks
You need to somehow pass the clicked element into your method. Here is one way to do it:
jQuery(function ($) {
function MyTest() {}
MyTest.prototype = {
myMethod: function (el) {
$(el).append("<div id='myId'></div>");
}
}
$(document).ready(function () {
var myTest1 = new MyTest();
$("#anelement").click(function () {
myTest1.myMethod(this);
});
});
});
You could also use .call to execute your method with the given context, however you then lose access to instance methods and variables.
jQuery(function ($) {
function MyTest() {}
MyTest.prototype = {
myMethod: function () {
$(this).append("<div id='myId'></div>");
}
}
$(document).ready(function () {
var myTest1 = new MyTest();
$("#anelement").click(function () {
myTest1.myMethod.call(this);
});
});
});
or simply
jQuery(function ($) {
function MyTest() {}
MyTest.prototype = {
myMethod: function () {
$(this).append("<div id='myId'></div>");
}
}
$(document).ready(function () {
var myTest1 = new MyTest();
$("#anelement").click(myTest1.myMethod);
});
});
Code :
isDomLoaded = $(function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
});
it says isDomLoaded is not a function
Thats because it isn't a function. It is a jQuery object.
What you need might be:
isDomLoaded = function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
};
If you want to run it when the DOM is ready then do this after you declare the function:
$(window).load(isDomLoaded);
However, I think what you really need is to get rid of the isDomLoaded function and just use the following:
$(document).ready(function(){
renderSocial(fotoProssima);
});
function isDomLoaded(){
//code
//recursive call
isDomLoaded();
}