In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a "blank" slide, then to the last one again and the it start cycling normally forever.
With this example I have to look at and play with it I am using two divs.
It can be viewed here: www.codekrewe.com/fbla
and the javascript code is here:
$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
$('#dateHolder .featureHolder:first').fadeOut(1000)
.next('.featureHolder').fadeIn(1000)
.end().appendTo('#dateHolder');
}, 3000);
});
EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.
Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.
Well I found the fix for this, not quite sure why it had such an effect.
After all of the divs were called, a little <h1> was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.
So moving the <h1> to the top before the divs were called, fixed the blank slide issue.
Related
I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.
When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.
When clicking the "prev" button it needs to perform the reverse animation.
When moving items from the second pile to the first, this needs to happen with an animation.
I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.
I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two ul elements. Also how do I ensure the items are cycled in the correct order?
Does anyone have any ideas on how I should go about this?
Here is a quick idea how to achieve what you want. Add this:
$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
$(prevItem).css('zIndex', '1');
to your next button functionality.
You need to play with the code to make perfect transition.
Here is an updated fiddle
Google animate function for jQuery and you will find more examples
I am trying to make an animated leaderboard using move.js (). There are four sections, and when loaded it should hide the people who are not in first place, do a bit of an animation of the first place people and then fade in the other users.
I have fiddled it up: https://jsfiddle.net/muwc4enz/
and the JS:
$(document).ready(function() {
// on load, animate it...
// set opacity to 0
$('[data-position!="0"]').css({'opacity':'0'});
$('[data-position!="0"]').addClass("fadein");
// now display the first place people..
$('.leader_section_1st').each(function(i, obj) {
// now animate...
move(obj).scale(3.0).duration(500).end(function() {
move(obj).scale(1.0).duration(500).end(function() {
// and load the rest of the section...
$('[data-sectionid="'+i+'"]').css({'opacity':'100'});
});
});
});
});
As you can see, I dont get the animations at all, but I do get the fade. After the fade IN, it goes back to 0 opacity again. I am unsure of why this might be the case and have checked it isnt rerunning the document load function, it isnt.
Without the funky opacity stuff the animation does at least work on THREE of the people at the top of the leader boards, but here is the other problem: The user at the very top, named FAILURE in the fiddle, only animates half correctly... as if it got halfway through the animation and got stuck.
As an extra piece of info, the content is loaded dynamically via a php script.
I suspect its an issue with the timing of when things run, as everything seems to run and I don't get errors (I was worried about the syntax relating to the data variables). I was wondering if anybody could see any reason from the code why it would not do what I expect... which was to reiterate:
Make everything except the top people in each category invisible.
Make those top students really big (scale 3) and then quickly small again ( to scale 1)
When the top students become small again the rest of the students should fade in, and stay faded in.
Thanks.
Alex
I have several divs that I want to have fade in and out depending on a nav panel. I am running into an issue with two of the divs, but the others work fine so I am not sure what is happening.
here is the jQuery code, here the two divs that are wacky have been singled out, the real code generalizes it to work for all divs:
$('#behind_the_lens').click(function() {
$('#gallaries-page').fadeOut(0);
$('#behind_the_lens-page').fadeIn(750);
$('#pricing-page').fadeOut(750);
});
$('#pricing').click(function() {
$('#pricing-page').fadeIn(750);
$('#behind_the_lens-page').fadeOut(750);
});
When the first function runs #pricing-page just hides, no fading and #behind_the_lens-page does fade.
When the second function runs #pricing-page waits for #behind_the_lens-page to fade out, then it instantly shows.
this does not happen for any other combination of divs so it is very strange to me.
as for the contents of these divs, one #pricing-page uses a table and the other uses a floating layout. but there layouts types are not unique from other divs.
In summary, why is it working this way for these divs but not the others? furthermore, why is it doing this at all?
Edit: was able to come up with a fiddle here that shows the problem.
You are fading in and fading out simultaneously. Watch the scrollbar, your "clicked" page is appearing as the currently visible is disappearing, and jumps up into position after the visible completely disappears (display:none).
Use the complete callback on fadeOut so that fading in happens after fading out finishes.
https://jsfiddle.net/u3u8jsqr/2/
JS
if (thisID != visibleID) {
$(visibleID).fadeOut(750, function () {
$(thisID).fadeIn(750);
});
}
I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..
I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/