Heyo,
I was wondering if there would be a way to set a min-time to an onload function so that the div is shown min 2sec. Basicly the same as with min-width or min-height. If the site is taking longer than 2sec to load, the div will still be shown untill the site is fully loaded but when the site takes less than 2sec to load the div will still be displayed for a minimum of 2sec.
Here is my current code:
$(window).on('load', function() {
$('.preloader').delay(350).fadeOut('slow');
});
Try this:
$(window).on('load', function() {
setTimeout( function(){
$('.preloader').fadeOut('slow');
}, 2000 )
});
So I take it you want a function to be run when either: the page loads or after 2 seconds, whatever comes later.
First, define a function to be called:
function load_func() {
$('.preloader').delay(350).fadeOut('slow');
}
Then, let's define a way to call the function in either situation:
var pageLoaded = false;
var timeoutElapsed = false;
$(window).on('load', function() {
pageLoaded = true;
if (timeoutElapsed) {
load_func();
}
});
setTimeout(function() {
timeoutElapsed = true;
if (pageLoaded) {
load_func();
}
}, 2000);
This way, if the page loads before 2 seconds, it will wait the timeout to call the function.
Otherwise, if the page loads after 2 seconds, it will call it whenever that load event happened.
Related
I want to run the function continuously. But it only works first time properly. Is there any solution for working this function continuously?
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
}, 15000);
});
If the code inside the setInterval takes longer than the time you have set it will create another process before the function finishes messing everything up. So choosing setTimeout is actually better.
To make a function loops in setTimeout use a following syntax:
function function1() {
// something here
}
function runner() {
function1();
setTimeout(function() {
runner();
}, time);
}
runner();
Given the comment under the question explaining your goal:
I want to trigger a button to show a div after 15 secs when the page is loaded, and 50 secs later another trigger for closing the div. & I want to run this continuously
I would suggest that you chain setTimeout() calls instead of using setInterval() which will cause the events to overlap and become a mess. I'd also suggest that you call show() and hide() directly on the required elements instead of faking click events in the DOM. Try this:
function openBand() {
$('#yourElement').show();
setTimeout(closeBand, 50000);
}
function closeBand() {
$('#yourElement').hide();
setTimeout(openBand, 15000);
}
$(document).ready(function() {
setTimeout(openBand, 15000);
// or just call closeBand() here directly, if the element starts as hidden
});
You should change your current function with this one
$(document).ready(function() {
setInterval(() => {
$('#open-band').trigger('click');
}, 15000);
setTimeout(() => {
$('#close-band').trigger('click');
}, 50000);
});
I am creating a chat, everything works perfectly, it scrolls down when i click the "Send" button, but I want it to scroll all the way down when the document is ready. I have done this by adding the scrolling function to setInterval, but the problem with that is that the user basically cant scroll up to see previous chat messages because he gets scrolled down every 0.1 seconds. My code is:
$(function () {
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); Doesnt work at all
function updateChat(){
$("#messages").load('chat/ajaxLoad.php');
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); This works but the user cannot scroll up anymore
}
setInterval(function () {
updateChat();
}, 100);
$("#post").submit(function(){
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
$("#messages").append('<div>'+data+'</div>');
$("#messages").scrollTop($("#messages").prop("scrollHeight")); // This works but only when the user presses the send button
$("#text").val("");
});
return false;
});
});
Add this to your code.
var chat = $("#messages").html();
setInterval(function () {
updateChat();
if(chat !== $("#messages").html()){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
chat = $("#messages").html();
}
}, 2000);
I think this should work (didnt test), but there are some better ways you can optimise this like not saving the whole .html() into a variable.
The idea here is that it checks if the content is changed every 2 seconds. If it is, it scrolls down.
I see what's your problem and I have 2 ideas for you :
You scroll down only when a new message is post, for example with an Ajax request you could check if number of messages is > in compare with the last 0.1s, if yes you scroll if not you ignore.
You scroll down every 1-2s only if the scroll is at the maximum bottom position. If the scroll is not at the maximum you do not scroll. I feel this solution is better.
You need to seperate the actions on your application,
also you missed many checks that can make the application work properly and will
make it easy to maintain.
How i suggestion the code will look:
$(function () {
function updateMessages(){
var messages_before_update = $("#messages").html();
$("#messages").load('chat/ajaxLoad.php');
var message_after_update = $("#messages").html();
if(messages_before_update !== message_after_update){
scrollToBottom();
}
}
function scrollToBottom(){
var scroll_height = $("#messages").prop("scrollHeight");
var scroll_top = $("#messages").scrollTop();
if(scroll_height !== scroll_top){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
}
}
function addMessage(message){
$("#messages").append('<div>' + message + '</div>');
}
setInterval(updateMessages, 100);
$("#post").submit(function () {
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
addMessage(data);
scrollToBottom();
$("#text").val("");
});
return false;
});
});
I have an ajax loader that appears after a button is clicked with the following code:
jQuery(document).ready(function($){
{
$.getElementById('form').onsubmit = function () {
$.getElementById('submit').style.display = 'block';
$.getElementById('loading2').style.display = 'block';
};
}(document));
});
HTML:
<input type="submit" class="button alt" onclick="$(\'#loading\').show();" name="woocommerce_checkout_place_order"/>'
I would like the ajax loader to disappear after like 10seconds.
Please let me know
You can use this to hide your loader after 10 seconds.
setTimeout(function() {
$('#loading').hide(); // I wasnt sure which one you wanted to hide
$('#loading2').hide();
}, 10000);
Also looking at your code im not sure if that would have worked anyway. Also if you are using jQuery then you don't really need to use vanilla Javascript so your code could be changed to this.
jQuery(document).ready(function($){
$('#form').submit(function () {
$('#submit').css('display', 'block');
$('#loading2').css('display', 'block');
});
});
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 10 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#loading").hide('blind', {}, 500)
}, 10000);
});
Note: In order to make you jQuery function work inside setTimeout you should wrap it inside
function() { ... }
I have a javascript that retrieves the values checked from a set of checkboxes and loads a DIV passing those values.
Currently I show a "loading" .gif before the load of the DIV. However, it has time fixed.
I would like to set the time of this GIF until the DIV has loaded its contents completely, so the user knows that data is loading in case sometimes is slower than others.
Any idea?
Thanks!
$(function() {
$("input[type='checkbox']").on('change', function() {
var colors = [];
$("input[type='checkbox']:checked").each(function() {
colors.push(this.value);
});
if (colors.length) {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
$(".indexMain").fadeIn(slow);
});
$(".loadingItems").fadeOut(300);
} else {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php', function() {
$(".loadingItems").fadeOut(300);
});
}
});
});
As suggested by #Fabricio Matte, the solution was to put the first Fade Out inside the load
inside the function launched with the load:
$(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
$(".indexMain").fadeIn(slow);
$(".loadingItems").fadeOut(300);
});
I'm using some jQuery code to create tabs in which the page's content is broken up into (navigable from the top of the tab block) and am looking to do the following when a "next" or "previous" link (placed at the bottom of each tab's content) is clicked:
The page to scroll up to the top of the tab block (successfully implemented using ".scrollTo" plugin) over 750ms
Once scrolled, the tab to change to the corresponding "previous" or "next" tab (identified by a hashtag url) - 250ms later.
Using the following code:
$(".external_link").click(function() {
$.scrollTo(515, 750, {easing:'easeInOutQuad'});
setTimeout(changeTab($(this).attr("href")), 1000);
return false;
});
the two happen at the same time at the mo. If anyone could shed some light on what I'm doing wrong I'd be really appreciative.
The code in full:
$(document).ready(function() {
$(".tab_content").hide();
$("ul.content_tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$('.content_tabs li').each(function(i) {
var thisId = $(this).find("a").attr("href");
thisId = thisId.substring(1,thisId.length) + '_top';
$(this).attr("id",thisId);
});
function changeTab(activeTab) {
$("ul.content_tabs li").removeClass("active");
$(activeTab + '_top').addClass("active");
$(".tab_content").hide();
$(activeTab).fadeIn();
}
//check to see if a tab is called onload
if (location.hash!=""){changeTab(location.hash);}
//if you call the page and want to show a tab other than the first, for instance index.html#tab4
$("ul.content_tabs li").click(function() {
if ($(this).hasClass("active"))
return false;
changeTab($(this).find("a").attr("href"));
return false;
});
$(".external_link").click(function() {
$.scrollTo(515, 750, {easing:'easeInOutQuad'});
setTimeout(changeTab($(this).attr("href")), 1000);
return false;
});
});
Am I right to be attempting to do this with setTimeout? My knowledge is incredibly limited.
setTimeout(changeTab($(this).attr("href")), 1000);
That's the wrong one, you have to put in a function, not the result of executing a function, and 250 ms makes more sense. changeTab is a function, changeTab(argument) is executing a function. So try
var that = $(this);
setTimeout(function() {changeTab(that.attr("href"))}, 250);
I think the reason they execute at the same time is because you call the changeTab-function directly when you set the timeout, and the previous function waits for 750ms before proceding.
You are passing a function call to setTimeout(). You need to pass a function reference. The call will get executed immediately, but a function reference will be executed when the timeout expires. Call setTimeout() like this:
setTimeout(function() { changeTab($(this).attr("href")); }, 1000);
Also, you should consider taking advantage of the onAfter option of the .scrollTo() plugin which indicates a function to be called when the scrolling is completed. It may make more sense to go:
$.scrollTo(515, 750, {
easing: 'easeInOutQuad',
onAfter: function () {
setTimeout(function() { changeTab($(this).attr("href")); }, 250);
}
});