I'm doing preload page. Here my code:
<style>
#page-preloader { ... }
#page-preloader .spinner { ...}
</style>
<script src="js/jquery.js"></script>
<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>
</head>
<body>
<div id="page-preloader"><span class="spinner"></span></div>
...
All good, but i want to make some condition, and don't know how do it.
I need to preloader work minimum 4 second (even if page load for 1 sec) if session is empty.
Increase delay().
<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(3000).fadeOut('slow');
});
Related
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
window.onload = setupRefresh;
function setupRefresh()
{
setInterval("refreshBlock();",3000);
}
function refreshBlock()
{
$('#time').load("Callgen1.html");
}
</script>
I am stuck and wanted the div to reload after every 3 seconds. Any answer would be helpful.
Thanks in advance.
I have made few changes to your question, you need to pass reference to the function rather then string object in setInterval method.
please refer below answer, it will reload your div every 3 seconds, you can put your load method in place of my code "$('#time').html(new Date());" to solve your purpose
*{color:white;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function setupRefresh()
{
setInterval(refreshBlock,3000);
}
setupRefresh()
function refreshBlock()
{
$('#time').html(new Date());
}
</script>
<div id="time">test</div>
My guess is what you really want is to actually refresh 3 seconds after the prior one has finished so you do not pile up refreshes if it takes longer than 3 to load. I added to the delay just so you can see it is doing that.
async function delay(delayMilliseconds) {
return new Promise(resolve => {
setTimeout(() => {
resolve(timeToWait);
}, delayMilliseconds);
});
}
let timeToWait = 1000;
function redoLoad(forHowLong) {
console.log("called redoLoad: " + forHowLong);
// for fun, change the delay, then reset it again
forHowLong = timeToWait >= 5000 ? 1000 : forHowLong + 1000;
$('#time').load("Callgen1.html", function(responseText, textStatus, jqXHR) {
console.log(textStatus);
timeToWait = forHowLong;
sampleDelay(forHowLong);
});
}
async function sampleDelay(waitTime) {
console.log("before ");
let delayres = await delay(waitTime)
.then(function(v) {
redoLoad(v);
});
console.log("after:" + waitTime);
}
sampleDelay(timeToWait);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time">howdy</div>
I have a list of URL's and i need it to run as slide show on Start and Stop Of button. Currently it is running as a slideshow with out start and stop button.
Additionally I need to design a homepage with thumbnail of all those URL's.On click of thumbnail it has to redirect to that page
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function () {
var urls = ["URL1", "URL2", "URL3","URL4", "URL5", "URL6","URL7", "URL8", "URL9"];
var i = 0;
function loadIframe(url)
{
$('#iframe').attr('src', url);
}
setInterval(function() {
// update the index
i = (i + 1) % urls.length;
loadIframe(urls[i]);
}, 13000);
loadIframe(urls[i]);
});
</script>
</head>
<body>
<iframe id="iframe" height="100%" width="100%"></iframe>
</body>
</html>
You need to trigger the setInterval and save it, to clear it later.
var intvl = false; //Global Variable
$('#StartButton').on('click', function()
{
(!intvl) ? intvl = setInterval(...) : return;
});
$('#StopButton').on('click', function()
{
clearInterval(intvl);
intvl = false;
});
EDIT: changed to disable multiple intervals
You can achieve this by storing setInterval in a variable so that you can use clearInterval() on it. clearInterval() will allow you to stop/pause the setInterval you created.
You also don't need the $(function() {...}) component anymore as you will be the one controlling when the slider starts/stops:
var slideInterval;
var urls = ["URL1", "URL2", "URL3", "URL4", "URL5", "URL6", "URL7", "URL8", "URL9"];
var i = 0;
function loadIframe(url) {
//$('#iframe').attr('src', url);
$('#iframe').html(url);
}
function start() {
if (!slideInterval) { // If an interval is already in-use (ie if the slider is running) don't allow another slider to be made -> continue using the current one.
slideInterval = setInterval(function() {
// update the index
i = (i + 1) % urls.length;
loadIframe(urls[i]);
}, 1000);
}
}
function stop() {
if (slideInterval) { // If an interval doe exsist, we can then clear it, if it doesn't exsist then we have no interval to "clear", and so we don't run this code if one isn't in use
clearInterval(slideInterval);
slideInterval = null;
}
}
loadIframe(urls[0]);
#iframe {
border: 1px solid black;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="iframe" height="100%" width="100%"></div>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
I have a question about my code. What I'm trying to do is if a certain button is clicked and it isn't clicked again within 4 seconds, a element will be showed and another element hide. But if it is clicked within 4 seconds, it stays the same and so on. I think I should use SetInterval() and ClearInterval(). Currently I have two other functions that do other things. Maybe I can my function there?
Hopefully I have made it clear.
Current javascript code:
var clicks = 0;
function clicks5times() {
clicks = clicks+1;
if(clicks == 6){
document.getElementById('scherm3').style.display = 'block';
document.getElementById('scherm2.2').style.display = 'none';
}
}
var clicked = false;
setInterval(function(){
if (!clicked) {
document.getElementById("scherm4").style.visibility = "visible";
document.getElementById("scherm2.2").style.visibility = "hidden";
}
},13000);
document.getElementById("buttontimer").addEventListener("click", function(){
clicked = true;
});
Rather than set interval, I would say a timer would be better. Eg:
var clickTimer;
function startTimer() {
clickTimer = window.setTimeout(function(){
document.getElementById("scherm4").style.visibility = "visible";
document.getElementById("scherm2.2").style.visibility = "hidden";
},4000);
}
function stopTimer() {
window.clearTimeout(clickTimer);
}
function restartTimer() {
stopTimer();
startTimer();
}
document.getElementById("buttontimer").addEventListener("click", function(){
restartTimer();
});
This way when you want to stop the timer or start the timer, you have to just call above functions for other scenarios.
eg:
If you have an init function:
function init() {
...
//some code
startTimer();
}
And maybe call stop timer like so:
function clicks5times() {
...
stopTimer();
}
Split your event handlers in two different functions (eg firstClick and secondClick). The first handler should just add a second event listener and remove it after 4 seconds. For this one-off task, use setTimeout instead of setInterval as you need the task to be done only once after 4 seconds and not every 4 seconds. So I would proceed as follows:
var secondClick = function() {
// DO WHATEVER YOU WANT TO HAPPEN AFTER THE SECOND CLICK
}
var firstClick = function() {
// DO WHATEVER YOU WANT TO HAPPEN AFTER THE FIRST CLICK
document.getElementById("buttontimer").addEventListener("click", secondClick);
setTimeout(function() {
document.getElementById("buttontimer").removeEventListener("click", secondClick);
}, 4000);
};
buttonElement.addEventListener("click", firstClick);
in Javascript
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<button id="buttontimer">fghfgh</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<button id="buttontimer">fghfgh</button>
<script>
document.getElementById('buttontimer').onclick = function(){
document.getElementById("buttontimer").disabled=true;
setInterval(function(){
if (document.getElementById("buttontimer").disabled == true) {
document.getElementById("buttontimer").disabled = false;
}
},10000);
};
</script>
</body>
</html>
and Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var button = $('<button>Click Me</button>');
button.clicked = false;
$('body').append(button);
var clicked = false;
button.click(function(){
button.clicked = true;
button.prop('disabled', true);
clicked = true
setInterval(function(){
if (clicked) {
button.prop('disabled', false);
}
},10000);
});
});
</script>
</head>
<body>
</body>
</html>
once u click button disable the property after the timer finish enable back the property
This is my code. Here the div is animated after 5 sec and hidden after another 5 sec. I need to repeat this every 5 sec. That means every 5 second the div will animate and disappear after another 5 second.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.animate-colors.js"></script>
<script type="text/javascript" src="jquery.animate-colors.min.js"></script>
<script>
$(window).load(function(){
$('#div').delay(5000).fadeIn(function() {
$(this).text('Some other text!').css({'text-align':'center',})
});
$("#div").animate({
left:'450px',
opacity:'0.5',
height:'250px',
width:'250px',
border:'3px solid',
borderColor: 'darkolivegreen',
backgroundColor: '#cccc'
})
$('#div').delay(5000).fadeOut();
});
</script>
</head>
<body>
<div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;">Please login</div>
</body>
</html>
You could use the setInterval() method in javascript.
Summary
Calls a function or executes a code snippet repeatedly, with a fixed
time delay between each call to that function.
MDN Documentation
I've just wrapped your code in the "fader" function, then on document load, setInterval will run every 10 seconds.
<script>
function fader () {
$('#div').delay(5000).fadeIn(function() {
$(this).text('Some other text!').css({'text-align':'center',})
});
$("#div").animate({
left:'450px',
opacity:'0.5',
height:'250px',
width:'250px',
border:'3px solid',
borderColor: 'darkolivegreen',
backgroundColor: '#cccc'
})
$('#div').delay(5000).fadeOut();
};
$(function () {
setInterval(fader,10000);
})
</script>
<div id="blinkText"></div>
<script>
// Takes text to blink and id of element to blink text in
function blinkText(text, id) {
// Blink interval
setInterval(blinker, 5000);
// Flag to see what state text is in (true or false)
var flag = true;
// Number of times to blink text
var blinkNum = 10000;
var i = 1;
//you can select whole div by ajax
var divID = document.getElementById(id);
function blinker() {
if (i < blinkNum) {
if (flag) {
divID.innerHTML = text;
flag = false;
} else {
divID.innerHTML = "";
flag = true;
}
i++;
} else {
// Delete if it's still showing
divID.innerHTML = "";
// Stop blinking
clearInterval(blinker);
}
}
}
blinkText("Hello World", "blinkText");
</script>
According to this thread: how many javascript setTimeout/ setInterval call can be set simultaneously in one page? it is possible to have multiple setIntervals at the sametime.
However, is it possible to have a setInterval and setTimeout at the sametime?
This is not working...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
init();
});
function init() {
$('#startbutton').on('click', handleClick);
}
</script>
</head>
<body>
<script>
var playBeep = function () {
var snd = new Audio("beep-7.wav");
snd.play();
}
var handleClick = function () {
var interval1 = setInterval(updateDisplay, 1);
makeIntervals([1,2,3], playBeep);
}
var makeIntervals = function(timeList,callback){
intervals = []
for(i in timeList){
intervals.push(setTimeout(callback,timeList[i]))
}
return intervals
}
function updateDisplay() {
var value = parseInt($('#timer').find('.value').text(), 10);
value++;
$('#timer').find('.value').text(value);
}
</script>
<button type="button" id="startbutton">Play Beep</button>
<P>
<div id="timer"><span class="value">0</span> ms</div>
<P>
Of course. However just make sure you don't have too many.