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 to slide down a jQuery slideToggle when scaling a browser

I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/

Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});

Disable (but still allow) scrolling

I'm looking to recreate the scrolling effect on this site: misfitwearables.com. So far, my approach has been to disable user scrolling, but still detect the scroll direction to allow jQuery to control how the page scrolls. The thing is that it works (yay!) .. but it only works on the first scroll. After the first scroll, it stops responding. How can I get it to listen/respond on every scroll?
$(this).bind( 'mousewheel', function ( e ) {
if (e.originalEvent.wheelDelta < 0) {
// scroll down
$("html, body").animate({ scrollTop: (+50) }, 900, "easeInOutQuart" );
} else {
// scroll up
$("html, body").animate({ scrollTop: (-50) }, 900, "easeInOutQuart" );
}
return false;
});

The animating property value is incorrect, should be "+=50" and "-=50":
$(this).bind( 'mousewheel', function ( e ) {
if (e.originalEvent.wheelDelta < 0) {
// scroll down
$("html, body").animate({ scrollTop: "+=50" }, 900, "easeInOutQuart" );
} else {
// scroll up
$("html, body").animate({ scrollTop: "-=50" }, 900, "easeInOutQuart" );
}
return false;
});
It was only working once because you were always passing 50 and -50 as the value.
Here's a working fiddle, I also added a check to perform only one animation per scroll event

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

slideToggle animates "show" but not "hide"

I have a website with 100% height that has a hidden footer, that needs to slide up and show it when a button is clicked, and when that button is clicked again, it should slide down and hide it.
The problem is that the sliding animation is only working when the footer slides up, and when it should slide down, it bumps without animation.
You can see the problem right here, by clicking on the "More" button in the footer.
The JS code used to manipulate that button is the following:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
Thanks in advance!
Update: I just tried this code:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
And aparently there's an animation going on the footer that I didn't know exist. Maybe that's the cause of this problem?

alright so i gave this a shot:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
demonstration at http://jsfiddle.net/DPq5Z/
same result, another way (using absolute positioning in order to keep elements above undisturbed):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
demonstration at http://jsfiddle.net/9R6L4/

It works as how default animations in jQuery work. If you want to customize this. You need to use jQuery easing plugin. It takes as parameter the easing effect, like easeIn, easeOut, Bounce etc.. that controls the flow. By default it is linear and that is what you see.
Easing Plugin: https://github.com/gdsmith/jquery.easing
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").fadeToggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
jsFiddle: http://jsfiddle.net/vvmYH/4/