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.
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.
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);
});
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();
I have 50 record of data in div elements and I just see 10 at the beginning, the other 40 are display: none. When I click to the next, then the next button scrolling down and 10 new div will be visible. The problem is that, if I open more record, what can be visible on the screen, then the next button runs out of the screen.
So when I load the page first time the distance of the next button from the top of the page for example 300 px. Then I click on next and this distance will be 600 and finally runs out, but the page should scroll to the bottom position of the next button. An other problem is that, at the end not always 10 record will appear, so a static method for the problem can't be correct.
So this for example almost good:
$("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);
But at the end, when there are less then 10 record it scrolls down with 10 and just for the next click (when there is no element) will scroll down with the proper height.
Are there any method to scroll down always to the bottom of a div even if the div is moving? It would be better without any plugin.
Here is more code:
HTML:
<body>
<div id="content">New elements appears here if there was click</div>
<div id="next-button">Next 10</div>
<div id="footer">Lot of data</div>
</body>
Js:
$("#next-button").click(function() {
//Scroll down the new results and after:
$("html, body").animate({ scrollTop: 2*$('#next-button').offset().top-$(document).height()}, 1000);
});
I ran into a problem that comes with jquery animation. I am having the user be able to click a button and based off that button direction they click it slides all the list(li) elements to that opposing direction. The problem comes in that I have it set to wrap-around inside a div, so when a list element ends on one side it getting the animation to slide off the div sight but getting the css style attribute set to the opposite side off the screen so it can be ready to scroll down for the next button click. But when the user clicks the button multiple times it queues up all the elements on top of each other because the animation hasn't finished. So then I attached the stop() animation to the elements, but then the second problem comes in that when the user clicks the button fast multiple times it, The elements never get to wrap around, they will just stay dissappeared until you click the button slowly or if you start pressing the button faster after some of them are dissappeared then start back slow then only the ones that were visible when slow are still wrapping in the div until the next wrap around:
quick example:
function Rotate(){
$("li.headline").each(function(){
var left= $(this).css("left");
left=left-100;
if(left>99){
$(this).stop().animation({left:left}, 'slow', function(){
$(this).css("left",left);});
}else{
$(this).stop().animation({left:left}, 'slow', function(){
$(this).css("left",max);}); //max is the max "left" calculated from all list items
}
});
}
$("button.next").click(function(){
Rotate();
});
could someone help me
html/css example
#scroll{
position:relative;
overflow:hidden;
width:300px
}
.headline{
position:absolute;
float:left
}
<div id="scroll">
<ul>
<li class="headline"><a>First</a>
<li class="headline"><a>Second</a>
<li class="headline"><a>Third</a>
<li class="headline"><a>Fourth</a>
<li class="headline"><a>Fifth</a>
</ul>
<div>
Have you tried this?
$(this).stop(true, true) // remainder of your code
It will clear the animation queue for the matched element and complete the animation. The default for both is false, which means any queued animations are still run (only the current animation is stopped) and the current animation is not completed.
http://api.jquery.com/stop/
I corrected the problem by adding a extra check in the if condition as so
var index;//this is the current li at the head that is incremented by the button click
//and updated outside this function
$("li.headline").each(function(i){ //added i to get the current index the each is on
if(left>99&&index==i){
$(this).stop(true, false).animation({left:left}, 'slow', function(){ //also made the first true
//and second false, so the animation wouldn't rush across the screen but true so it wouldn't
// build up the queue
$(this).css("left",left);});
}else{
$(this).stop(true, false).animation({left:left}, 'slow', function(){
$(this).css("left",max);}); //max is the max "left" calculated from all list items
}