I'm trying to load content into a slider using .load() but I don't seem to be able to get it to work smoothly - with the code below, once the link is clicked the content fades out the footer shoots up to fill the space of the faded out content then a funny double flash of content, and finally the content loads.
The functionality I would like is: on click, get URL (and content via the selector) animate #slider to top of page, fade out the #slider, load content into it then fade #slider back in avoiding the footer jumping up due the slider being faded out.
My markup:
<div id="slider">
<div class="flexslider">
IMAGES / CONTENT
</div>
</div>
and the jQuery so far
//Slider
$('a.test').click(function() {
var address = $(this).attr('href');
$('html,body').animate({
scrollTop: $('#slider').offset().top
}, 500, function() {
$('#slider').animate({opacity: 0}, function(){
$('.flexslider').load(address + ' .flexslider', function(){
$('.flexslider').flexslider({
animation: 'slide',
smoothHeight: true,
});
}, function(){
$('#slider').animate({opacity: 1});
});
});
});
return false;
});
Managed to get this working pretty well. Just need to add an extra div plus the following jquery.
$('a.test').click(function() {
var address = $(this).attr('href');
var slider_outer = $('#slider');
var loadarea = $('#slider-inner');
var current_height = slider_outer.innerHeight();
slider_outer.css({
"height": (current_height)
});
slider_outer.addClass('spinner');
$('html,body').animate({
scrollTop: slider_outer.offset().top
}, 200, function() {
loadarea.animate({
opacity: 0,
display: 'block',
visibility: 'hidden'
}, 500, function() {
loadarea.load(address + ' .flexslider', function() {
$(this).animate({
opacity: 1.0
}, 500, function()
slider_outer.removeClass('spinner');
$('.flexslider').flexslider({
animation: 'slide',
smoothHeight: true,
easing: 'swing',
animationSpeed: 500,
slideshowSpeed: 10000,
touch: true,
prevText: '',
nextText: '',
start: function(slider) {
$('.flex-control-nav').fadeIn(500);
$('.total-slides').text(slider.count);
$('.current-slide').text(slider.currentSlide + 1);
slider_outer.removeAttr('style');
},
after: function(slider) {
$('.current-slide').text(slider.currentSlide + 1);
}
});
});
});
});
});
return false;
});
and the html
<div id="slider">
<div id="slider-inner">
<div class="flexslider">
IMAGES / CONTENT
</div>
</div>
</div>
I'd like it to be smoother so if anyone can see a better / smoother way of doing this that would be great. I'll try and get a demo working for Googlers.
Related
I have panel which contains huge scrollable data, once scroll down the content and collapse the panel/come from other page then data is setting to top, scroll down remains same, its not resetting to top position.
I have tried below code but no luck
please anybody help me to get resolve this
$('#techAssmnt').on('show.bs.collapse', function (e) {
//setTimeout(function(){
//$("techAssmnt").animate({
//scrollTop: $('#page-top-wrapper').offset().top
//}, 800, 'swing',
//function() {});
//},500);
//$( "div.assessmentMainDiv" ).scrollTop( 0 );
//$("#Section_1").animate({ scrollTop: 0 }, "slow");
$("#Section_1").animate({ scrollTop:
$('#templateCollapse3262').offset().top }, 800, 'swing', function() {
});
//$("div.assessmentMainDiv").css(["top","1px", "left","0", 'right':'0','bottom':'0', 'overflow':'auto']);
$("div.assessmentMainDiv").css({
'top' : '1px',
'left' : '0',
'right' : '0',
'bottom' : '0',
'overflow' : 'auto'
});
});
Below code also I have tried
$('#techAssmnt').on('shown.bs.collapse', function (e) {
//alert("sasdas")
var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;
if ( currentScrollbarPosition > topOfPanelContent - panelHeadingHeight) {
$("#Section_1").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}
});
https://www.bootply.com/8bGdJgkmUv
please check this.. In the first panel there is huge content and also scrollable.. Once I open and scroll the content then I close/hide/toggle the panel but content is not all reset to top
You just need to add this jquery
$(".collapse").on('hide.bs.collapse', function(){
$(this).children().scrollTop(0);
});
Working Snippet
I've implemented a scroll left for navigating to sections that works perfectly.
Now I want to add anchors within a section so if you click on them they scroll down on a page to other anchors, smoothly. I'm trying to add the functionality within my existing function but to no avail.
I'm using "jquery.easing.pack.js".
In the original one I have the HTML and JS looks like this:
<!-- scroll left to sections -->
<section id="1" class="section"></section>
<section id="2" class="section"></section>
<section id="3" class="section"></section>
<script type="text/javascript">
$(function() {
var $sections = $('section.section');
$sections.each(function() {
var $section = $(this);
var hash = '#' + this.id;
$('a[href="' + hash + '"]').click(function(event) {
$scrollElement.stop().animate({
scrollLeft: $section.offset().left
}, 1200, 'easeOutCubic', function() {
window.location.hash = hash;
});
event.preventDefault();
});
});
});
</script>
Now I have:
<!-- scroll left to sections -->
<section id="1" class="section">
<a class="scroll-down" href="#bottom-div">scroll down</a><!-- scroll down to div -->
<div id="bottom-div>here we go</div>
</section>
<section id="2" class="section"></section>
<section id="3" class="section"></section>
At the moment if I click on the "scroll down" anchor it will go to the bottom-div but not smoothly. So I've tried adding another function like this but it's not working.. any ideas how to make it work and if possible with my existing function?
$(function() {
var $bottomdivs = $('.scroll-down');
$bottomdivs.each(function() {
var $bottomdiv = $(this);
var hash = '#' + this.id;
$('a[href="' + hash + '"]').click(function(event) {
$scrollElement.stop().animate({
scrollTop: $bottomdiv.offset().top-100
}, 1200, 'easeOutCubic', function() {
window.location.hash = hash;
});
event.preventDefault();
});
});
});
By setting the hash I think you are invoking the standard anchor link functionality to jump to the section. Try handling the scroll yourself like this:
var $sections = $('section.section');
$sections.each(function() {
var $section = $(this);
var hash = '#' + this.id;
$('a[href="' + hash + '"]').click(function(event) {
$('body, html').animate({
scrollLeft: $section.offset().left
}, {queue:false, duration: 1200, easing: 'swing'});
$('body, html').animate({
scrollTop: $section.offset().top
}, {queue:false, duration: 1200, easing: 'swing', done: function () {
window.location.hash = hash;
}
});
});
event.preventDefault();
});
I have put together a fiddle for you here: http://jsfiddle.net/rjE4s/
I am not sure what $scrollElement was so I have removed that from my example. Also I have changed your custom easing as I didn't have the easing pack installed. You can just change that back. Finally, I queued the animations so the left and top scroll at the same time, but you just set:
queue: true
in the animation options and it will animate the left and then the top like in your original function. Not sure if you wanted this or not.
I have a contentSlider with width 200% and i am trying to use .animate to slide the content left and right. But during animation, there is some degree of lag. Here is my animate code.
$("#contentSlider").stop().animate({
left: "-100%"
},{
duration: 1000,
easing: "linear",
complete: function(){
$("#"+page).remove();
$('#contentSlider').css('left', '0px');
pageID = clickedID;
page = pageName;
if($("#audioControl").hasClass('audio')){
enableCowSound();
}else{
$(".moosound").off('hover');
}
$(container).removeClass('animating');
}
});
Appreciate any help!
I used the following javascript:
$('.slide-content #show-effect-1').hover(function(){
$(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
$(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});
What should happen is:
mouseenter the button --> content show
mouseout the button --> content hide
Question: when mouseout on the button is faster than the effect time of mouseenter, the content will be hidden and not displayed when mousenter the button again.
How do I prevent this happening?
Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation:
$(document).ready(function () {
var _duration = 1000;
$('#show-effect-1').hover(function () {
var $next = $('.text-banner');
$next.show();
$next.stop(true, true).css({
'margin-left': $next.outerWidth() * -1,
'margin-top': 0,
'opacity': 0,
'display': 'block'
}).animate({
'margin-left': 0,
'opacity': 1
}, _duration);
}, function () {
var $next = $('.text-banner');
$next.stop(true, true).animate({
'margin-top': $next.height() * -1,
'opacity': 0
}, _duration, function () {
$(this).hide();
});
});
});
Check the Updated fiddle
Note that I had to add a container to accurately reproduce the slide effect, you can test without it and see if it's something you actually need
I want to change the opacity of an object instead of fading in content that was completely hidden so I changed
$(".thumb").each(function(i) {
$(this).delay(500*i).fadeIn(1000);
});
to
$(".thumb").each(function(i) {
$(this).delay(500*i).animate({'opacity' : 1}, 1000, function(){});
});
and the css from display:none to opacity: 0; (in all browsers) but I noticed that the numeral value 1000 isnt doing anything at all.. Maybe it is and I'm not noticing, but I have changed that form 1 to 100000 and I see no difference. Could someone help me understand whats going on?
edit: here is the full code.. maybe something is altering the fade in?
//Showcase
$('#showcase').animate({'opacity' : 0}, 0);
fadeInDivs(['#showcase']);
function fadeInDivs(els) {
e = els.pop();
$(e).delay(750).animate({'opacity' : 1}, 1000, function(){
if (els.length)
fadeInDivs(els);
});
};
$('#showcase').queue(function(){
//fade in each filter
$('#filters li').each(function(i, item) {
setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
});
//fade in each thumbnail
$('.thumb').each(function(i, item) {
setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
});
});
this is what was causing the problem..
<script type="text/javascript">
var $container = $('.isosort')
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
layoutMode : 'fitRows',
animationEngine : 'best-available',
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 5 }
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 5 }
});
});
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
</script>
its at the bottom of my index.php file right before the </body> tag.. is there a better place to put this?
I think this is what you want
$(".thumb").each(function(i, item) {
setTimeout(function() { $(item).animate({'opacity' : 1}, 1000); }, 500 * i);
});
I noticed that the numeral value 1000 isnt doing anything at all
What are you expecting it to do? It is the time the function takes, in milliseconds, to finish its animation cycle.
See:
http://api.jquery.com/fadeIn/
http://api.jquery.com/animate/
See this fiddle:
http://jsfiddle.net/UsMAD/
The higher you set the value, the longer it takes the fadeIn or animate to completely fade in the element.
Update:
updated top post with the whole javascript that animates the page
The new code hides the #showcase, but doesn't hide the #filters li or .thumb elements. So when you fade in the showcase, the filters and thumbs are already visible. The fadeIn effect applied to them won't show, since you're already at 100% opacity.
Here's a modification to your code that should fix that problem. In particular, I'm selecting all those items when setting the opacity value:
http://jsfiddle.net/eU9qU/
//Showcase
$('#showcase, #filters li, .thumb').css('opacity', 0);
fadeInDivs(['#showcase']);
function fadeInDivs(els) {
e = els.pop();
$(e).delay(750).animate({'opacity' : 1}, 10000, function(){
if (els.length)
fadeInDivs(els);
});
};
$('#showcase').queue(function() {
//fade in each filter
$('#filters li').each(function(i, item) {
$(item).delay(500*i).animate({'opacity' : 1}, 10000);
});
//fade in each thumbnail
$('.thumb').each(function(i, item) {
$(item).delay(500*i).animate({'opacity' : 1}, 10000);
});
});