Set intervals for fadeout/show jquery [duplicate] - javascript

This question already has an answer here:
JavaScript setTimeOut doesn't seem to work like I expect
(1 answer)
Closed 5 years ago.
I'm trying to make one div fade out after 5 seconds, and then have a new div appear with JQuery.
Here is my current code: https://pastebin.com/M7D6qMWi
<script>
$(document).ready(function(){
function hidehero(){
$("#hero").fadeOut();
};
function showmain(){
$("main").show();
};
function timeouts(){
setInterval(hidehero(), 3000);
setInterval(showmain(), 5000);
};
timeouts();
});
Unfortunately, the first div just instantly disappears and the new div instantly appears, and it isnt listening to the intervals.
If anyone knows how to fix this let me know!

Change
setInterval(hidehero(), 3000);
setInterval(showmain(), 5000);
with:
//Pass the function, not the return value of the function.
setInterval(hidehero, 3000);
setInterval(showmain, 5000);
You're calling the function instantly that's why it isnt working as expected. setInterval takes a function as its first parameter, and you're passing undefined since hidehero function doesn't return anything.
BTW you should use setTimeout and not setInterval, in your code there is no need to call hidehero every 3 seconds.
Your showmain function is also wrong, since you're missing # in $("main"). To reference an ID in jQuery use $("#main")
Here's a working demo:
$(document).ready(function() {
function hidehero() {
$("#hero").fadeOut();
};
function showmain() {
$("#main").show();
};
function timeouts() {
setTimeout(hidehero, 3000);
setTimeout(showmain, 5000);
};
timeouts();
});
<!DOCTYPE html>
<html>
<head>
<title>Sevi Home</title>
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<div id="hero">
<div class="header">SEVI<br></div>
</div>
<div id="main" style="display:none"><div class="header2">ELLO!!!!!!</div></div>
</body>
</html>

Change setInterval() for setTimeout() and it'll work.

Try this:
$(document).ready(function(){
setTimeout(function() {
$("#hero").fadeOut(function() {
$("#main").show();
});
}, 5000);
});

Related

Fail to create a plugin in Javascript [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 5 years ago.
I am new to Javascript programming and I'm trying to learn it by myself. I tried to make a plugin which allows element assigned moving back and forth, but it does not work. Could anyone help me and tell me what the problem with my code? Below is the code with I am trying to develop my plugin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Hello, world
<img src="car.png" style="width:100px; height:60px">
<p>Hello, world</p>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
(function( $ )
{
$.fn.showLinkLocation = function()
{
move();
function move()
{
$(this).animate({left: '500px'}, 1000).animate({left: '0px'}, 1000);
move();
};
};
}( jQuery ));
$( "a" ).showLinkLocation();
</script>
</body>
</html>
(function($) {
$.fn.showLinkLocation = function() {
this.animate({
left: '500px'
}, 1000).animate({
left: '0px'
}, 1000);
return this;
};
})(jQuery);
$("a").showLinkLocation();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hello, world
Cause :
You got, recursive call not gonna break, infinite loop :
function move(){
...
move();
};
Explanation:
Using jQuery rather than $ ensures there are no conflicts with other JavaScript libraries. All our internal code should also refer to jQuery rather than $.
(function($) {
$.fn.showLinkLocation = function() { ... };
})(jQuery);
This function runs immediately and is passed jQuery as a parameter named $. Since $ is a local variable, we can assume that it always refers to the jQuery library rather than another library that grabbed the global $ variable first.
this refers to jQuery, so we can access jQuery's methods directly, like this.each(...
return this; return the jQuery object so other methods can be chained
I think what was wrong with your code is that, inside the inner move function, you did not have access to its outer this variable, which was the target element in this case.
So, you needed to keep outer this in a separate variable, so it's not overriden by the function in that function's context. In any case, I think Akshay Hegde's solution below is much cleaner.
Another issue is that you are calling move() repeatedly which eventually will crash the browser. You should wait for the first animation to complete, before starting it again.
(function( $ ) {
$.fn.showLinkLocation = function() {
var $this = this;
move();
function move(){
console.log("move called" + new Date().getTime() );
$this.addClass("animating").animate({left: '500px'}, 1000).animate({left: '0px'}, 1000);
//move();
};
};
}( jQuery ));
$( "a" ).showLinkLocation();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Hello, world
<img src="car.png" style="width:100px; height:60px">
<p>Hello, world</p>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

jQuery's load() not working

I have a simple script that's supposed to load comments every second but for some reason it doesn't work. Here's code
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
<body>
<div id="comments"></div>
</body>
I tried few things like changing "url to comments.php" to just "comments.php" but to no avail. JQuery won't even load simple .txt file. I checked and ID and .php file name are 100% correct. What's wrong?
The issue is you have setInterval() call within <script> with src pointing to jQuery. There are also extra parentheses at setInterval function which are not necessary. Use .ready() handler to wait until document is loaded before calling setInterval.
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js">
</script>
<script>
$().ready(function() {
var auto_refresh = setInterval(function () {
$("#comments").load('url to comments.php');
}, 1000);
});
</script>
</head>
The problem is you need to enclose your function within the <script> , right now it is started for <script src="jquery">
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
var auto_refresh = setInterval(
(function () {
$("#comments").load('url to comments.php');
}), 1000);
</script>
</head>
DEMO

Using multiple window.onload events in a separate file

I've got a problem and can't figure it out and would be glad if anyone of you could help me. So basically what I am trying to do is to put multiple window.onload events in a seperate file which starts my scripts. To get clear what I mean her is my situation:
Let's say I got these files:
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="kalkevent.js"></script>
<script type="text/javascript" src="reckevent.js"></script>
<script type="text/javascript" src="winonload.js"></script>
</head>
<body>
<div id="topColumn">
...
</div>
<div id="bottomColumn">
...
</div>
</body>
</html>
kalk.js
function kalkInit() {
Array.prototype.slice.call(document.forms[0].elements).forEach(function(element) {
...
});
};
reck.js
function reckInit() {
...
};
So I want to load kalkInit and reckInit on window.onload . This should be handled in a separate file. What I already tried is:
winonload.js
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
addLoadEvent(kalkInit);
addLoadEvent(reckInit);
But it's not working at all. So my question is if it possible what I am trying to do or not. And if it is could someone pls help me out? :)
You can consider using jQuery..
In your winonload.js you need only:
$(window).on("load", kalkInit);
$(window).on("load", reckInit);
Maybe you have to call your onloadfunction:
<body onload="addLoadEvent();">

Winow.setInterval js not working

I am trying to usesetInterval for a javascript function of mine to be called every 5 seconds. Here is what I have for code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="#routes.Assets.at("bootstrap/dist/css/bootstrap.css")" rel="stylesheet"/>
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
<script type="text/javascript">
window.setInterval("myFunction()",1000);
</script>
</head>
I know the function is being loaded in to the window, because I can call it via window.myFunction() and it performs as expected.
Thanks!
In your code this <script> has not closing tag but it is being self closed which is wrong
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
that's why setInterval code is not executing.
Your code have quote "" problem also.
<script src="#routes.Assets.at('javascripts/patientmonitor.js')"/>
//-----------------------------^convert it into single quote-^
<link href="#routes.Assets.at('bootstrap/dist/css/bootstrap.css')" rel="stylesheet"/>
JS
function myFunction (){
alert("your code here");
}
window.setInterval(myFunction, 1000);
Try this:
myInterval = setInterval(function() { myFunction() }", 5000);

Can someone find an error with this code?

When I run this code in the browser, it says that there is no 'fadeIn' method. Is there a reason to it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
Thanks!
have you included jquery js ? like
<script src="http://code.jquery.com/jquery-latest.js"></script>
refer http://api.jquery.com/delay/
Two points
Like stated above, do you have the query library included?
When you're calling your functions, are you waiting for the dom to load before firing them, i.e. document ready?
I took your code and added in document ready and the jquery library and it seemed to work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#blackback").hide();
$("#contactform").hide();
showDiv1();
});
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
</head>
<body>
<div id="blackback">ONE</div>
<div id="contactform">contact Form</div>
</body>
</html>
An example of this running is here
It is jquery function, you have to register jquery javascript framework first

Categories