We Keep Coding

Jquery/Ajax loader's time to depend on page's loading time

Situation:
I am looking for a jquery/ajax loader and found this thread helpful.
Now I am using this fiddle as my loader.
Everything works fine but I only have one concern.
Below the js code, 'responseTime' is fixed to 2.5 secs.
$.mockjax({ url: "/mockjax", responseTime: 2500 });
So if my page loads more than 5 secs, the loader only runs at 2.5 secs.
Question:
How am I going to depend the loader's time to my page's unpredictable loading time?
Your help is very much appreciated. Thanks!

You can show loader gif until window loads completely by
$(window).load(function(){
}
And do it like:
$(window).load(function(){
$('#cover').fadeOut(1000);
});
#cover {
background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />
It will start with showing gif and will be faded out once content gets loaded completely.

I found what I'm looking for from this site.
Below is the code I use.
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
$('#button-upload').click(function() {
$('#spinner').show();
});
});
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
text-align:center;
z-index:1234;
overflow: auto;
width: 100px;
height: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>
<input type = "submit" value = "Upload" id="button-upload" />
The loader is indefinite in this snippet, but it runs perfectly on my site.
Thanks guys for the help anyway =)

Sliding div out with css and jquery without triggering scrollbar?

I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})

Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}

How to make jQuery loading screen view at least 3 seconds?

I just created my own loading screen with this code:
HTML CODE: <div class="loader"></div>
CSS CODE: .loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../Images/page-loader.gif) 50% 50% no-repeat rgb(249,249,249);}
jQuery CODE: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
AND
$(window).load(function() {
$(".loader").fadeOut("slow");})
Each time the page loads, the loading screen only displays for a fraction of a second. Im trying to display the loading screen at least 3 seconds. What jQuery code should I add?

use setInterval
$(window).load(function() {
setInterval(function() {
$(".loader").fadeOut("slow")
}, 3000);
});

To delay the fadeOut action you can use the delay() function in jQuery
https://api.jquery.com/delay/
This will delay your fadeout by 3s (3000ms).
$(window).load(function() {
$(".loader").delay(3000).fadeOut("slow");
})

Show loading spinner/overlay BEFORE page elements appear

I would like to show a loading spinner before any of the page elements load, and then load the page elements while the loading overlay is still on. Is this possible? I am using this code but the page still loads elements before the spinner shows up.
$(document).ready(function () {
setTimeout(function () {
$.loader.close();
// Do something after 5 seconds
}, 3000);
});

Add the below div right below the opening <body> tag.
<div class="loader"></div>
Add some .css
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
And jquery in header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
At the end, look after a loading gif image. Google is full :)

jQuery fadeIn fadeOut background problem

When I fadeIn a div, and this animation finished, the background suddenly disappears (this time only in Firefox).
I have a container, with two nested elements in it. The second element has a negative margin, so it appears on top of the first.
My script:
jQuery(document).ready(function($) {
$(".second_element").hide();
$(".container").each(function () {
$(this).mouseover(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeIn(250, 'linear');
});
$(this).mouseout(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeOut(100, 'linear');
});
});
});
CSS:
.container{
width: 221px;
height: 202px;
display: block;
float: left;
position: relative;
}
.first_element {
height: 200px;
width: 219px;
}
.second_element {
display:none;
background: #fff !important;
margin-top: -51px;
width: 219px;
height: 50px;
}
And for clarity, this a HTML example
<td class="container">
<div id="first_element">...</div>
<div id="second_element">...</div>
</td>
My second problem is, that when my mouse is hovering above the second element, the function is executed again (so the second element fades out and in). While the second element is just IN the container

This is shorter, and also, for first run, it is better that hide target by fadeOut() instead of hide()
$(".caption").fadeOut(1);
$(".container").each(function() {
$(this).mouseover(function() {
$(".caption", this).stop().fadeIn(250);
});
$(this).mouseout(function() {
$(".caption", this).stop().fadeOut(250);
});
});

Complementing the last comments; I got it. I tried it in several ways, and also with the caption to position: absolute, but instead I had to set the first element to position: absolute... now it works (however not with fading, but this is fine). I thank you very much for all your help and support!