Develop Reference

jQuery Preloader with min-time

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.

Run function if data changed

I am new in jQuery and can't figure how to succesfully run the script I use in my pages. The problem is I need to fade in and out text only if there are changes in my load.php file but not constantly like it is now, please help anyone... Many thanks!
Here is my code:
$(document).ready( function(){
$('#auto').load('load.php');
refresh();
});
function refresh()
{
setTimeout(function() {
$('#auto').fadeOut('fast').load('load.php').fadeIn('fast');
refresh();
}, 2000);
}

Try this:
function refresh()
{
setTimeout(function() {
$.get('load.php', function(data) {
if (data !== $('#auto').html()) {
$('#auto').fadeOut('fast').html(data).fadeIn('fast');
}
refresh();
});
}, 2000);
}
This makes the request outside of load(), and only fades in/out + replaces the content if it's different.

setTimeout with Bootstrap Modal not displaying after time out

I'm trying to delay showing a Bootstrap modal until 5 seconds have passed. Here is the section of my code. It seems write from what I have read on MDN. The modal does not appear after any amount of time. Any help would be appreciated.
var timeout;
function modalAlert(message){
$("#myModalLabel").text("Hey Look!")
$('.modal-body').html("<img src='"+message+"'>");
timeout = window.setTimeout(showModal,5000);
}
function showModal(){
console.log("HERE")
$("#myModal").modal('show')
}
Vijay Ramamurthy helped me find the solution:
var timeout;
function modalAlert(message){
$("#myModalLabel").text("Hey Look!")
$('.modal-body').html("<img src='"+message+"'>");
window.setTimeout(function(){showModal();},5000);
}
function showModal(){
console.log("HERE")
$("#myModal").modal('show')
}

Use the "shown" event handler to register a timeout on the modal and then hide it. You can chain the functions together since it's a jQuery plugin.
$("#myModal").modal("show").on("shown", function () {
window.setTimeout(function () {
$("#myModal").modal("hide");
}, 5000);
});

try making the last line in the modalAlert function
timeout = window.setTimeout(function () {showModal();}, 5000);

how to delay call to JS function - animated gif not working in IE

I'm struggling to get an animated gif to run in IE. Works in all other browsers, but in IE it just freezes. I've researched this and looks like a delay using setTimeout might work. Not too sure how I add this to the following function:
<script type="text/javascript">
$(function(){
$('#photo_form').on("submit", function () {
$('#loading').show();
});
});
</script>
The gif is inside a div called 'loading' which is hidden. Would I add the timeout to onClick of the button or within the function itself?
Why does IE make things so difficult!?
Any help with solving this problem would be very helpful.

You mean something like this?
$(function() {
$('#photo_form').on("submit", function () {
setTimeout(function () {
$('#loading').show();
}, 100);
});
});

Try this curde, untested psedo-code:
var startTime;
var thread;
$(function(){
$('#photo_form').on("submit", function () {
$('#loading').show();
startTime = time();
thread = setInterval("showLoadingGif", 1);
});
function showLoadingGif() {
var timeToWait = 5; //change interval as needed
if(timeToWait + startTime <= currentTime) {
//show the gif
clearInterval(thread);
}
}
It's been a long time since I've worked with javascript, so this almost certainly needs adjustment; but the principle is the same: keep calling that function, and let that function decide when to stop being called.
setTimeout() will cause your page to freeze while you wait. setInterval will run your code asyncronously.

Getting jquery to delay after adding a class

I want a script to halt before continuing after adding a class, below are two attempts that seem to fail.
window.setTimeout($("#"+item).addClass("highlight"), 5000 );
$("#"+item).addClass("highlight").delay(5000);
Where am I going wrong here?

Another way:
$("#"+item).addClass("highlight");
setTimeout(function(){
//rest of the code
}, 5000);

You want something like:
function addClassAndDelay(item, nextMenu) {
$("#"+item).addClass("highlight");
window.setTimeout(function() { restOfCode(nextMenu); }, 5000);
}
function restOfCode(nextMenu) {
jQT.goTo('#'+nextMenu, 'slide');
}

May be you are looking for the jQuery Highlight plugin?
$("#mydiv").click(function () {
$(this).effect("highlight", {}, 3000);
});