Make DIV appear immediately without fadein effect - javascript

I'm using the JavaScript setinterval method, but the DIV appears slowly. Could someone please tell me how to remove the fadein effect? I need for it to appear immediately.
Here is my code:
<script>
setInterval(
function()
{
$('#lista').show().load('pagination.php').fadeIn('slow');}, 0);
</script>

Wow that is a simple question, and one that you could have learned quickly by reading a bit of jQuery documentation. But no matter.
$('#lista').show().load('pagination.php');
You see, you're already showing the element with id lista and then loading some html into it. No need to have the fadeIn on the end.
A possibly better way to achieve the same thing, however only showing the element once the data is loaded, is to pass a callback to the load method:
$('#lista').load('pagination.php', function(){ $(this).show();} );

Related

Cant figure out a way to animate after the given 5 seconds waiting

I'm trying to get a loading page for my site up and running, although its not loading actually it just waits at least 5 seconds before it disappears.
Everything works fine except that I want the given ID that disappears do so with an animation. (For example swiping up out of the screen)
Im still very new to jQuery and Javascript, and Im trying to learn with this along the way.
I tried various methods I know but none of them actually worked with the code i have already. It either doesnt run at all or just doesnt show any kind of animation
As said above: I tried various fade in and outs just to see where the problem is but no animation actually works. Just trying to figuire out what im doing wrong so I can learn from it.
heres some code:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 5000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true).fadeIn(6000);
show('loading', false).fadeOut(6000);
});
Ive tried adding servaeral animations but they either dont show or the whole code starts breaking.
As mentioned I am new to jQuery and Javascript so Im trying to learn. Please give me something I can learn with along the way.
I tried various fade in and outs just to see where the problem is but no animation actually works.
The provided code seems to be a mix of JavaScript and jQuery techniques which are not quite lining up. As your primary objective is animation and you are learning, I suggest use only jQuery at first.
Here is a snippet that performs the animation using jQuery which you should recognize by the use of the jQuery alias $.
It uses the jQuery ready event to make sure the page loads first
It uses the jQuery delay function to wait 5 seconds
It uses the jQuery fadeIn and fadeOut functions for the animation
$(document).ready(function() {
$(".loading").delay(5000).fadeOut();
$(".page").delay(5000).fadeIn();
});
.loading {
position: absolute;
}
.page {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading">Loading...</div>
<div class="page">Welcome</div>

Bootstrap carousel - loading animation when active image is loading

I have a Bootstrap carousel and an invisible div with a loading gif that I want to show while a big image is loading. I'd like to show this div only when I change the active image on the carousel and this image is still loading.
I've already got the HTML and CSS working, I just need an help with jQuery.
I fetch the images links from Imgur and then build the carousel-items that I need with jQuery and append them on the carousel container.
I then attached to the carousel event slide.bs.carousel a function that shows me the loader. and this works
BUT BUT BUT
I'm worried that the loader will show for few milliseconds even if the image is already loaded/cached. How can I prevent this? How can I know if the image that is becoming active is already loaded? Do I really need to worry about this or I just leave it like this?).
I then want to hide the loader when the active image is ready, and I've done this:
$('.carousel-item img').each(function(){
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
});
But it doesn't work. Seems like this load even keeps firing until
all the images of the whole carousel are loaded, and also somehow
the loader doesn't hide in the end, and this is the issue n.2.
Probably I'm approaching this wrong.
Is issue n.1 really a problem? And how can I solve issue n.2?
Thank you!
EDIT 1:
I tried to do this but still doesn't work. When I slide to the next slide I see that the image is already loaded, then the loader appears and doesn't go away anymore.
$(".carousel-item img").each(function(index){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("visibility","visible");
});
$(this).on('load', function(){
$("#loader_container").css("visibility","hidden");
});
$(this).attr("src",links[index]);
});
EDIT 2:
Also, it seems like the browser try to load all the images as soon as possible, even the ones that are not displayed/are not active items.
I'd like to load the images only if the user goes to that slide and makes the item active.
EDIT 3:
I've found a library name jquery.unveil.js that seems like it does exactly what I need and is super easy to use... but somehow it doesn't work.
Maybe AngularJS can help me? Anyone know how can I modify my code to do this with angular? Like using ngui-in-view?
$('.carousel-item img').each(function(){
$(this).on('slid.bs.carousel', function(){
$("#loader_container").css("display","none");
});
});
You can use the slide.bs.carousel and slid.bs.carousel instead
Solved with lazy loader, here the code:
$(".carousel.lazy").on("slide.bs.carousel", function(ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
if(lazy.length > 0){
$("#loader_container").css("visibility","visible");
$(".carousel-item img").on("load",function(){
$("#loader_container").css("visibility","hidden");
});
lazy.attr("src", lazy.data('src'));
lazy.removeAttr("data-src");
}});
I needed that if(lazy.length > 0) because once I did a full round of the carousel and all the images where loaded, somehow the loader would show up and never go away. I tried with if(img.complete) but it didn't work so I used that technique.

synchronize css animation with page load

I know there is a bunch of questions like this but none really answering my question.
I had make a preloader with css animation and I want to be synchronised with page load. I can trigger the animation on page load but I want to manage the time that animation last somehow so to follow exactly the page load (even if it's too fast).
An example : http://jsfiddle.net/RgPU7/
I want the 'filling' effect to follow page load time.
Right now I just apply a delay and a fadeout effect to the modal that wraps the css animation.
jQuery(window).load(function(){
$(".modal").delay(3000).fadeOut(1000);
});
Any suggestions would be great. Thanks!
You can always delay a function like this
setTimeout(function() { your_func(); }, 5000);
or you can do something like this
$(this).fadeOut(500, function(){
//Do something
$(this).fadeIn(700);
});
I hope this helps.

Cycle through multiple images onmoueover using javascript

I have an image, and when the div it is inside is mousedover, I want a slideshow-type thing to start, where it fades to the first image, fades to the second image, fades to the third etc... and on mouseout it fades back to the original image.
I tried using the Cycle plugin with jQuery, but the site I'm using is hosting an incompatible version of jquery, and it is unfortunately uneditable. So, I tried to make my own, but there are so many problems.
HTML:
<div class="pro_feature" onmouseover="cyk()" onmouseout="norm()">
<div><img id="cykimg" src="sweet2.jpg" /></div>
<span>
<h2>Sweet</h2>
<p>lots of text</p>
View Products
</span>
</div><!-- end pro_feature -->
The JS:
function cyk(){
setTimeout(one1(),3000);
setTimeout(two2(),6000);
setTimeout(three3(),9000);
setTimeout(four4(),12000);
}
function one1(){
$("#cykimg").attr("src","/SXW-AOC-1D.jpg");
}
function two2(){
$("#cykimg").attr("src","/SXW-AOVB-1D.jpg");
}
function three3(){
$("#cykimg").attr("src","/SXW-CC-1D.jpg");
}
function four4(){
$("#cykimg").attr("src","/SXW-SCCS-1D.jpg");
}
function norm(){
$("#cykimg").attr("src","/sweet2.jpg");
}
The Problems:
It immediately goes to the last image, called by four4();
It does not fade
It does not cycle through
I've been searching for quite a long time for a solution, but I really haven't found anything that has gotten me remotely close (excluding Cycle, which I can't use). Any help or input is appreciated. I would be fine using jQuery if that is possible/easier.
You need to provide the function itself as a callback, and instead it is called when setting the timeout.
So instead of :
setTimeout(one1(),3000);
It should be
setTimeout(one1, 3000);
It looks like the functions aren't being called inside your setTimeout correctly. you can try something like:
setTimout(function () {
one1();
},1000);
Here's a fiddle with a small example that might help: http://jsfiddle.net/JeffreyTaylor/WTUA5/2/

Wait for jquery .html method to finish rendering

I have div with vertical scroll bar. Div is being updated dynamically via ajax and html is inserted using jQuery's .html method.
After div is updated scroll bar returns to top and I am trying to keep it in the previous position.
This is how I'm trying it:
var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos
$.ajax({...
success: function(data) {
$('div#some_id').html(data.html_content); //insert html content
$('div#some_id').scrollTop(scrollPos); //restore scroll pos
}
});
This fails. My best guess is that it is failing due to inserted html not rendered (ie. no scroll).
For example this works.
setTimeout(function(){
$('div#some_id').scrollTop(scrollPos);
}, 200);
But this is dirty hack in my opinion. I have no way of knowing that some browsers won't take more then these 200ms to render inserted content.
Is there a way to wait for browser to finish rendering inserted html before continuing ?
It's still a hack, and there really is no callback available for when the HTML is actually inserted and ready, but you could check if the elements in html_content is inserted every 200ms to make sure they really are ready etc.
Check the last element in the HTML from the ajax call:
var timer = setInterval(function(){
if ($("#lastElementFromAjaxID").length) {
$('div#some_id').scrollTop(scrollPos);
clearInterval(timer);
}
}, 200);
For a more advanced option you could probably do something like this without the interval, and bind it to DOMnodeInserted, and check if the last element is inserted.
I will just like to point out one difference here: One thing, is when the .html() have completed loading, but the browser actually render the content is something different. If the loaded content is somewhat complex, like tables, divs, css styling, images, etc - the rendering will complete somewhat later than all the dom ellements are present on the page. To check if everything is there, does not mean the rendering is complete. I have been looking for an answer to this by myself, as now I use the setTimeout function.
Such callback does not exists because .html() always works synchronously
If you are waiting for images loading, there's one approach https://github.com/desandro/imagesloaded

Categories