Hey I have a panel (br_Panel) that contains four divs with the class 'smallPanel' and id br_Panel1, br_Panel2, etc that are of the same and equal size and positioned overlapping each other. When the function runs, every 5 seconds one fades out and shows the one below, and when they have all faded out they all come back with the fadeIn. The problem is the pause between the last div's fadeout and the fadein for all of them is 15 seconds, three times as long as it takes each div to leave. How can I reduce this pause in reset time to 5 seconds?
setInterval(function() {
if(i < 0) {
$('#br_Panel').find($('.smallPanel')).fadeIn();
i = 5;
}
else
i--;
$('#br_Panel').find($('#br_Panel' + i)).fadeOut();
}, 5000);
This is the html (if it helps, each of the innermost divs is positioned absolute to #br_Panel so that they overlap each other):
<div class="height1 panel" id="br_Panel">
<div class="smallPanel" id="br_Panel1">content</div>
<div class="smallPanel" id="br_Panel2">content</div>
<div class="smallPanel" id="br_Panel3">content</div>
<div class="smallPanel" id="br_Panel4">content</div>
</div>
You mentioned that your br_Panel contains four divs with the class smallPanel, but your interval function will run six times before i is reset (5, 4, 3, 2, 1, 0). It may be that your function is running 2 more times than needed, which causes your delay to be 10 seconds longer than it should be.
As an additional note, when using .find(), you need only pass in the string css selector you are using, not the enter jQuery object:
$('#br_Panel').find('.smallPanel').fadeIn();
Related
I am using [this] pre-loader for my personal portfolio.
var h = window.innerHeight;
$('.page-overlay').css('height',h);
var al = 0;
function progressSim(){
document.querySelector('.page-overlay>.text>p').innerHTML =
al+'%';
if(al>=100){
clearTimeout(sim);
}
al++;
}
var sim = setInterval(progressSim,50);
$('.body, .navbar').hide();
setTimeout(function(){
$('.page-overlay').hide();
$('.body,.navbar').show();
},5500);
HTML is like this:
<body>
<div class="page-overlay">
<div class="text"><p></p></div>
<div class="paper-progress-bar"></div>
</div>
<! header, followed by container divs and loads of paragraphs>
</body>
Also, the script is before the closing tag of the body. The animation works fine, it goes from zero to hundred on the page overlay then it shows the body beneath it. But there are two problems here:
I am not sure if this script is actually waiting for the body to load. Note that I am right now coding on local and I don't know if there is any other way to test this. When the website goes live, will this script actually show the percentage of page load? or is it just a simulation or wait time?
I've added the ('.body, .navbar').hide(); but it doesn't work. To add to the gimmick I've set the page-overlay to fixed position with z-index set to high. But the scroll bar is active and the body behind also active while the page is loading. If I am setting the body class display to none it's hiding everything including the page-overlay.
Any help would be appreciated. Thanks in advance. This is my first question on stackoverflow and first time building a website so apologies for any mistakes in question.
p.p.s. I'm using this as preloader https://codepen.io/sanjay8bisht/pen/wKPqVd
I'll start from the second question. The body and navbar hide doesn't work, because you added a "." before the body string.
And the first question:
If we explore the script:
get the window's height.
var h = window.innerHeight;
set the overlay over the page with the height of the page height
$('.page-overlay').css('height',h);
create a variable for keeping the 0 to 100 counter:
var al = 0;
create a function which simulates the page load, later we'll use it
function progressSim(){
show the load counter in a paragraph element on the overlay
document.querySelector('.page-overlay>.text>p').innerHTML = al+'%';
if the value reaches 100 or overrides 100:
if(al>=100){
stop the loop function.
clearTimeout(sim);
}
increase the page load counter.
al++;
finish the function.
}
Now the real part:
repeat the above function with 50 milliseconds interval, so counting from 0 to 100 would take: 50 * 100 : 5000 milliseconds (5 seconds).
var sim = setInterval(progressSim,50);
at the same time, hide the body and the navbar:
$('.body, .navbar').hide();
then after 5500ms (5.5secs) elapses, hide the overlay, and show the body and navbar again.
setTimeout(function(){
$('.page-overlay').hide();
$('.body,.navbar').show();
},5500);
What do you think? It's just an animation. Not a real loader.
You may look at this one: http://github.hubspot.com/pace/docs/welcome/ for something more reliable.
http://jsfiddle.net/czt0mycw/
<body>
<div id="hold_divs">hold divs
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
</body>
This is my first time building a jquery slider and it is exhibiting the strangest behavior. When the page first loads, it slides(automatically) the contents(my 4 divs stacked on top of one another) to the right successfully. But after a full slide show is completed, the slider no longer displays div1(the div with the red background). Instead, it skips(I believe that's whats happening) and shows the parent div("hold_divs").
When I was debugging, I altered the code to slide in only 2 divs, and a similar error occurred. This time, the two divs slid correctly only once (when the page is first loaded). After the first slide show completed successfully, it displayed the first of the 2 divs, but the 2nd div in the was not displayed; the 3rd div in the array was. O.o
http://jsfiddle.net/czt0mycw/1/
You need to reset the divs on the next iteration of the interval. Change:
setInterval(function()
{
var divs=[$("#div4"),$("#div3"),$("#div2"),$("#div1")];
var width=divs[x].width();
divs[x].stop().animate({right:"100%"},"slow");
x+=1;
if(x==4)
{
$("#div4,#div3,#div2,#div1").css("right",0);
x=0;
}
},3000);
to
setInterval(function()
{
if(x==4)
{
$("#div4,#div3,#div2,#div1").css("right",0);
x=0;
return;
}
var divs=[$("#div4"),$("#div3"),$("#div2"),$("#div1")];
var width=divs[x].width();
divs[x].stop().animate({right:"100%"},"slow");
x+=1;
},3000);
What's happening is that you're resetting the divs immediately after you start the animation for the 4th div. Instead, you want to reset the divs immediately before you start the animation again for the 1st div.
Consider having the following objects:
<div id="d1"><span>This is div1</span></div>
<div id="d2"><span>This is div2</span></div>
<div id="d3"><span>This is div3</span></div>
<div id="d4"><span>This is div4</span></div>
<div id="clickhere"><span>Start animation</span></div>
And consider that I would like to apply, using jQuery, an animation on each of the four element listed before.
What I have now
Consider the following code applied in the head section if the page:
function start_anim() {
$("#d1").animate({top:"-50px"},1000,function(){}); // Animating div1
$("#d2").animate({top:"-50px"},1000,function(){}); // Animating div2
$("#d3").animate({top:"-50px"},1000,function(){}); // Animating div3
$("#d4").animate({top:"-50px"},1000,function(){}); // Animating div4
}
$(document).ready($('#clickhere').click(start_anim));
This fragment of script will cause a synchronous translation of the four divs when the event click is fired.
What I would like to have
However I would like to have the first div move first, then I would like to have the second div move when the first div's animation has reached the 50%. The same for the third and the last div.
How can I reach this? Thankyou
Something like:
$("#d1").animate({top:-50}, 1000);
$("#d2").delay(500).animate({top:-50}, 1000);
$("#d3").delay(1000).animate({top:-50}, 1000);
$("#d4").delay(1500).animate({top:-50}, 1000);
Or even better:
var duration = 1000;
$('#d1,#d2,#d3,#d4').each(function(i) {
$(this).delay( i*(duration/2) ).animate({top:-50}, duration);
});
I'm trying to make an animated slide show. This code works but without animation so I see the change of position when the function ends, and it's take the time suppose to animate
function slide()
{
for (var i=0;i<100;i++)
{
setTimeout("realslide(i);",100);
}
};
function realslide(ii){
var I=ii;
var s_e=document.getElementById("slide_element");
var po="-"+i+"px";
se.style.left=po;
};
You have given too less time for observing the animation behavior. Change the time stamp to say 3 seconds, 3000 instead of 1 millisecond 100
See my Comment
OK, so I'm looking for an interesting effect, here. I have 10 different <div> elements. I would like one of them to be chosen at random every 5 seconds, and then have that <div> that has been selected move to the left (if it's the <div>'s 1-5) first, and then back right to where it started (if it was <div>'s 6-10 it would move right first, and then back left to where it began). I'm looking to accomplish this movement via the jQuery plugin spritely.
Let's start with the rng, which I already have taken care of:
setInterval(function() {
var rand = Math.floor(Math.random()*9+1);
if (rand === 1) {
move <div> #1 left and then right
}
else if (rand === 2) {
move <div> #2 left and then right
}
Then, rinse and repeat for <div>'s 3-10. This is obviously not by any means an elegant solution, but it gets the job done, as far as I'm concerned.
Now, the next job we must get done is the actual moving itself. Since we have only 5 seconds between the time a <div> is picked and another one is picked, I was thinking of making the movement left and right each last for 2 seconds. Then, there is a second left open for a break.
In order to implement this, I tried the following:
$("#piranha_smw_gg").oneTime(2000, function() {
$("#piranha_smw_gg").pan({fps: 30, speed: 2, dir: "left"});
});
$("#piranha_smw_gg").oneTime(2000, function() {
$("#piranha_smw_gg").pan({fps: 30, speed: 2, dir: "right"});
});
This would be inserted between the if (rand ===1) { } part of the "rng" code, so to speak.
That code makes use both of spritely, and the jQuery Timers plugin. Now, for some reason, I'm not getting my desired effect with this. Instead of <div>'s 1-5 moving left and then right to where they came from (and the opposite for <div>'s 6-10) I'm getting this odd, spazzing effect.
You can see it here.
Any ideas as to why this is happening?
Thanks!