Develop Reference

Display loader on load event and remove the loader when background image is loaded

I have two divs.
1 : where background image is loaded
2 : where loader gif is loaded.
what I want is , when there is a window.load() event is called then loader gif should displayed , and when background image is fully loaded , then loader gif should be removed. that's what I want to achieve.
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
// this code is not working.
.background_image_div{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 600px;
height: 300px;
margin: 0 auto;
border: thin black solid;
z-index: 900;
}
.gif_loader_image{
position: absolute;
width: 50px;
height: 50px;
background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif);
// border: thin red solid;
left: 55%;
bottom: 15%;
z-index: 1001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>
Thank you.

instead of $(window).load(function (){ do a $( document ).ready(function() { as,
$( document ).ready(function() {
// Handler for .ready() called.
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
EDIT Caveats of the load event when used with images as taken from here, .load API
EDIT 2 try a poller, keep polling and check for the image inside the div using .length > 0. Do some changes to your html,
Keep a div and then an image tag inside it with this structure, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>
Inside your poller check if $("#backgroundImageDiv > #backgroundImageID").length() > 0
If the condition satisfies, hide the gif loader using .hide(). Check for the syntaxes please.
By poller I mean an interval timer.

You can do as like this way.
Just see this link
<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>
$(function(){
var bgimage = new Image();
bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";
$(bgimage).load(function(){
$(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);
$(".loader").hide();
});
});
http://jsfiddle.net/n4d9xxon

You can try like this :
$(document).ready(function (){
$('.gif_loader_image').fadeOut(1000);
});
body{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 100%;
height: auto;
}
.gif_loader_image{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
z-index: 1001;
background:rgba(0,0,0,.8);
text-align:center;
}
.gif_loader_image img{
width:30px;
margin-top:40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image">
<img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/>
</div>
<div class="background_image_div"></div>

The main problem is that your $(window).load doesn't even fire
Why
This won't work since the .load() method was fully removed by jQuery 3 and since you are working with the version 3.1.1 it's not a surprise that your code doesn't work. You have to use now the .on() method to achieve the same effect
So
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
would turn into
$(window).on('load', function (){
$('.background_image_div').on('load', function(){
$('.gif_loader_image').hide();
});
});
Notice
Since you have already the $(window).load function at the beginning you don't have to define it again for your background image because this method will only be fired when all images are fully loaded so I think in your case this should also do the job.
jQuery
$(window).on('load', function () {
$('.gif_loader_image').hide();
});

Onload function runs before loading of all elements

I have a div on my page which I want to show after all elements (scripts, pictures and so on) finish loading. But it seems that the onload function doesn't work as I can see the page before everything is loaded. I have only one js file linked to my page, and below I showed how I organized the code (hope its a right way). I have also put a broken img link to the page, to test if the function executes without the missing file, and it does.
HTML
<div id="dvLoading"></div>
CSS
#dvLoading{
position: fixed;
height: 100%;
width: 100%;
top: 0;
background: red;
z-index:9999;
}
JQuery
var onLoad = function(){
$(window).load(function(){
$('#dvLoading').fadeOut(500);
});
}
var someFunction1 = function(){
//some function
}
var someFunction3 = function(){
//some function
}
var someFunction3 = function(){
//some function
}
$(document).ready(function(){
onLoad();
someFunction1();
someFunction2();
someFunction3();
});

Try this instead :
$( window ).load(function() {
$('#dvLoading').show().delay(3000).queue(function(n) {
$(this).fadeOut("slow").delay(1000); n();
});
});
CSS
#dvLoading{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: red;
z-index:9999;
}
Your issue could be that you're trying to call a function which fires onload within a document.ready wrapper.
EDIT
This will show the hidden div and delay the fadeout for however long you need once all resources have loaded.
EXAMPLE
JS FIDDLE

jquery transition effect on block

I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.
At the moment I got it so that once you hover over the block it adds a class.
$(document).ready(function () {
$(".container").hover(function () {
$(this).toggleClass("animated-effect");
});
});
Heres my jsfiddle, I can't manage to get the code to work something up with my js:
http://jsfiddle.net/4bgj4959/

You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).
$(document).ready(function() {
$(".container").hover(function() {
$(this).animate({
top: '20px'
})
}, function() {
$(this).animate({
top: '0px'
})
});
});
.container {
width: 500px;
height: 100px;
border: 1px solid #00c;
position: relative;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

you code is working you didn't include jquery see updated fiddle
demo

jquery events are not firing

I have two events that on placed on $('$gallery_slide_main_thumbs img') that are not being fired when I call them. Neither the hover nor the click functions are being called. the mouse pointer changes as it should when I hover over the image.
Jquery::
$('#gallery_slide_main_thumbs img').hover(function(){
$(this).animate({
opacity: 1
});
}, function(){
$(this).animate({
opacity: .66
});
});
<div id="gallery_slide_main_thumbs"></div>
#gallery_slide_main_thumbs{
width: 100%;
height: 100px;
position: absolute;
z-index: 6;
bottom: 0;
opacity: 0;
visibility: hidden;
margin: 0;
text-align: center;
}
#gallery_slide_main_thumbs img{
margin: 5px;
cursor: pointer;
opacity: .66;
}
$('#gallery_slide_main_thumbs img').click(function(){
$('#gallery_slide_main_thumbs img').eq(gallery_active_id).css({
'border': '',
'border-radius': '',
'margin-bottom': ''
});
});
The div with the id "gallery_slide_main_thumbs" is created on start up, and is populated with images when another function is called,
EDIT: The on.('click','img',function(){}) Does not fix the issue.

You need to use event delegation for dynamically created elements by applying .on():
$('#gallery_slide_main_thumbs').on('click','img',function() {
$('#gallery_slide_main_thumbs img').eq(gallery_active_id).css({
'border': '',
'border-radius': '',
'margin-bottom': ''
});
});
for .hover() event, you can use:
$('#gallery_slide_main_thumbs').on('mouseenter', 'seconddiv', function( event ) {
$(this).animate({
opacity: 1
});
}).on('mouseleave', 'seconddiv', function( event ) {
$(this).animate({
opacity: .66
});
});

I believe that images will be inserted dynamically in the following div:
<div id="gallery_slide_main_thumbs"></div>
So this means that images are not present in the initial markup and will be added into the div as a result of some other event.
In this case the good old event binding just does not work. So here another phenomena is involved that is called Event Delegation
Read more about this => https://learn.jquery.com/events/event-delegation/
So the generic code in your case would be.
$(element).on('click',function(){});
$(element).on('hover',function(){});
I hope this works for you. Let me know if you need any more help regarding this.

Agreeing partially with Talha Masood, but this event as a complete code needs to be written on document.ready event or called as a function. So, probably something like below:
$(document).ready(function(){
$(element).on('click',function(){});
$(element).on('hover',function(){
});
});
Let me know if everyone agrees here.

Jquery sidebar slide out/in not working locally

Help! :)
So,
I have been trying to add a slide-in cookiebox with jquery,
it works perfectly on jsfiddle,
but i can't make it work on local,
it acts as if the library wasn't loaded and it just shows the box right away and the buttons dont do anything.
Fiddle: http://jsfiddle.net/u2zz4/1/
How i load the scripts in the header(already checked that both paths are working correctly)
<script type="text/javascript" src="js/jquery.min2-0.js"></script>
<script type="text/javascript" src="js/cookiebox.js"></script>
The used Jquery lib is from https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js
(added the 2-0 behind it to remember its version, tested without 2-0 and it acted the same so i assume that aint the issue)
Cookiebox.js
var slideWidth = 250;
var slides = $('#aboutBox').css('width', slideWidth);
slides.css({
width: slideWidth,
height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
width: 1,
height: slides.height(),
overflow: 'hidden',
display: 'none'
});
$('#show').click(function() {
if(wrapper.is(':visible'))
return;
wrapper.show().animate({
width: '+=' + slideWidth
}, 'slow');
});
$('#hide').click(function() {
wrapper.animate({
width: 1
}, 'slow', function() {
wrapper.hide();
});
});
HTML (added right under the body tag)
<div id="cookiebox">
Cookies
<div id="aboutbox">
<p>We have placed cookies on your computer to make sure this website functions properly.</p>
<p>You can change your cookie settings at any time in your browser settings.</p>
<p>We'll assume you're OK to continue.</p>
<h2>OK</h2>
</div>
</div>
CSS
#cookiebox {
margin-top:25px;
float:left;
}
#aboutBox {
padding: 0px 15px;
max-width:200px;
float:left;
background: rgba( 200, 200, 200, 0.8);
border:1px solid rgb(0,0,0);
}
#aboutBox h1{
margin-bottom: 15px;
}
#aboutBox p {
margin: 15px 0;
}
#aboutBox h2 {
padding: 10px 0;
}
FYI, i have no idea who made the original jquery code, but it wasn't me.
I have already looked around for over one and a half hour for a fix with no luck.
PS, if anyone knows how to make the bottom border show aswell i'd be very happy :)
Could the use of ajax for another item be the issue?
Hope someone can see the issue and help me out :)

You just need to put your code inside a doc.ready function, like this:
$(document).ready(function(){
// your code here
});
That is basically what the onLoad option in your jsFiddle is doing for you.
You could also do this:
$(window).load(function(){
// your code here
});
but .ready will be faster and work fine

You trying to register to events before DOM is ready
You should wrap your code in $(documnet).ready