We Keep Coding

Auto-Scroll div horizontally to the very end with overflow-y set to scroll (jQuery)

I am using this jQuery script that automatically scrolls a div horizontally based on the width of the div. But I need it to scroll to the very end of the div based on the end of the content that is inside of the div. The div has an 'overflow-y: scroll' attribute, so I'd like it to scroll through all of the content until it reaches the end.
This is the script I'm currently using:
function animatethis(targetElement, speed) {
var width = $(targetElement).width();
$(targetElement).animate({ marginLeft: "-="+width},
{
duration: speed,
complete: function ()
{
targetElement.animate({ marginLeft: "+="+width },
{
duration: speed,
complete: function ()
{
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 5000);
It does scroll, but it's not scrolling to the very end of the content inside of the div. Here is a jFiddle that shows what I mean:
http://jsfiddle.net/rKu6Y/535/
How can I get it to auto-scroll horizontally to the END of the content rather than just the width of the div?
I hope this all makes sense. Thanks.

You can animate the scrollLeft property, using scrollWidth and clientWidth:
function animatethis(targetElement, speed) {
var scrollWidth = $(targetElement).get(0).scrollWidth;
var clientWidth = $(targetElement).get(0).clientWidth;
$(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollLeft: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 5000);
The result can be seen in this jsfiddle.

How do I use .load() with flexslider

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.

jquery stop() not working when combining jquery fade and slide jquery-ui

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

jQuery UI Bounce for progress bar

How would i add jQuery's UI Bounce feature to this script? The script currently slides out a progress bar to a set position. I would like that when it reaches the position it bounces back and forth a few times and then rests.
I tried a few previous stack overflow answers but none of them work.
$(function () {
$(".meter .bar").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 900);
});
});

Try the following. It uses an object after the CSS mods in animate() to set the properties.
You can use bounce just change the direction in options.
$(function () {
$(".meter .bar").each(function () {
$(this).data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 700)
.effect('bounce', {times: 3,
direction: "right",
distance: 10}
, 700);
});
});
Demo: jsFiddle

It is a hack, check whether it is acceptable.
Because in order to use the bounce animation we need to call show on a hidden item, check whether the blinking effect is acceptable, then you can use it.
Try using the animate callback
$(function() {
$(".meter .bar").each(function() {
$(this).data("origWidth", $(this).width()).width(0)
.animate({
width : $(this).data("origWidth")
}, 900, function(){
$(this).effect("bounce", {
times:3,
direction: 'right'
});
});
});
});
Demo: Plunker
Demo: Effect

Jquery animation looping

I am trying to make this animation loop
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
duration: 200,
easing: 'easeInCubic',
});
}
});
})
});
<div class="example">
<h4>Bounce</h4>
<div class="jquery_bounce bounce">
<img src="images/bounceimg.png" class="bounceimg" />
</div>
</div>
Please help.

try this~
$(function(){
$.extend({
show:function(){
$(".jquery_bounce").ready(function(){
$("img", this).animate({ marginLeft : '20px' } , {
duration: 200,
complete:function() {
$(this).animate({ marginLeft : '0px' } , {
specialEasing: {
left: 'swing',
top: 'easeOutBounce'
}
});
}
});
})
}
});
setInterval("$.show()",1000);
});
Demo:
http://jsfiddle.net/VpKw2/

Why don't you use setInterval()?
Edit:
Your animation bounces once, then stops, because...
You trigger the margin=20 part.
Upon completeness, another animation is scheduled: margin=0.
That's it. It doesn't loop because nothing is rescheduled to happen after the first pass.
Read the documentation on setInterval(): it's a function that let's you call another function at fixed (in milliseconds) intervals.
If you still want to do it as above, you must fix the problem I pointed out. Try thinking your way around it, and I'll help if you can't figure it out :).
Cheers.

Setup a bounce function that will continue the animation, either moving the element left or right:
function bounce(elm, leftZero) {
var px = leftZero ? '0px' : '20px';
elm.animate({ marginLeft : px}, {
duration: 200,
complete:function(){
//Continue bouncing
setTimeout(function(){
bounce(elm, !left);
},1);
}
});
}
$(".jquery_bounce").ready(function(){
$("img", this).each(function(){
//Start bouncing
bounce($(this), false);
});
})
});