JQuery scroll on hover or mousedown - javascript

I have a gallery with thumbnails inside a container with overflow:hidden which I need to scroll. I already have it scrolling in steps on click, using .scrollLeft(). How to make it scroll smoothly on mouseover, or preferably on mousedown to the end of list? I'm looking for a way without plugins.
This is what I got for scroll on click.
$("#slider").scrollLeft($("#slider").scrollLeft() + 200);

do you mean something like:
$("#someEle").hover(function(){
$("#slider").scrollLeft($("#slider").scrollLeft() + 200);
},function(){
$("#slider").stop();
});

Related

I want to scroll use only button on scrollify

I'm using a scroll animation through the "scrollify".
i want limit any scroll function.
i want to scroll only use button click scrolling, but not use touch scroll and mouse scroll.
if it's hard, expedient also good. Is there aother way?
I think touch events are currently not supported. But for the mousewheel you could do:
JQuery:
$('body').bind("mousewheel", function() {
return false;
});

Scroll both divs on mousewheel scroll on one another

I am using this code http://jsbin.com/uhozam/1/edit?html,output for scrolling divs but when i change in code, scroll both divs on mouse wheel of one another, then issue is that mousewheel working too slow.
Try this:
var subCatContainer = $(".sub-category-container");
subCatContainer.scroll(function() {
subCatContainer.scrollLeft($(this).scrollLeft());
});
DEMO

Why is my jQuery transition is glitchy?

I have a jQuery transition with a css overlay that will work fine if the user mouses over for a second or more....however if the user mouses over quickly then the overlay text stays put without the overlay background. Here is my jQuery code:
$(".cascade-t1").hover(function(){
$(".cascade-corner").fadeOut();
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){
$(".cascade-overlay-content").fadeIn(200);
});
}, function(){
$(".cascade-corner").fadeIn();
$(".cascade-overlay-content").fadeOut(200, function(){
$(".overlay-t1").animate({"left": "130px"}, 300);
});
});
Here is the script in action
It looks like the issue is that you don't fadeIn() the .overlay-t1 text until the mouseenter animation is done, and on mouseleave you fadeOut() the text out right away before the animation. When you move your mouse in and out faster than initial the animation the code will fade out the text and then fade it in again (the issue you're seeing).
One possible solution is to slightly alter your bottom (mouseleave) function to resemble your top (mouseenter) function more closely. Something like:
$(".cascade-corner").fadeIn();
$(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function () {
$(".cascade-overlay-content").fadeOut(200);
});
The .stop() is there to keep the animation from playing over and over when someone spams the box.
FIDDLE DEMO
Not sure how jquery animate works under the hood but it's possible it's using javascript to animate instead of css transitions. The benefit of css transitions is that it does all of the animation calculations before the animation begins and is hardware accelerated. Javascript is at the mercy of the scheduler at a very high level so it will always be choppy.
Try jquery transit.
http://ricostacruz.com/jquery.transit/

Detect scrolling attempts in overflow:hidden page?

I want to detect when the user is trying to scroll up or down on my page, but since I don't want to allow the actual scrolling I have set an overflow:hidden body. The code is something like this:
$('html,body').css('overflow','hidden');
$(window).scroll(function(event){
console.log("scroll");
});
The problem is that since there is no actual scrolling I cannot fire the event, I have thought about removing the overflow style and somehow preventing scrolls but I cannot figure out how to do it.
Anyway is there a way to fix the scrolling while detecting scrolling attempts? Thanks
Try using jQuery mousewheel https://github.com/brandonaaron/jquery-mousewheel. You can detect the mousewheel movement. The other option is to not set the overflow to hidden but instead catch the scroll attempt and scroll them yourself. There are also a bunch of libraries for JS scrolling, I like http://manos.malihu.gr/jquery-custom-content-scroller/.
Here's a jQuery-solution.
$(document).bind('mousewheel', function(e) {
var delta = e.originalEvent.wheelDelta;
console.log('The mouse delta is : ' + delta);
});
jQuery Doc - .bind()

jQuery - If I'm moving a div with the keyboard

If I have a div with a fixed height and width, which I am moving using keypress (or keydown/keyup). Can I get the window to "follow" that div?
I know you can auto scroll a page, but can you get the co-ordinates of a div and scroll the page as the div moves?
are you using a javascript framework? If you use jQuery you can get the position of the div using:
jQuery('#yourdiv').position().top()
jQuery('#yourdiv').position().left()
Also, if you use jQuery, the window will automatically scroll to keep the Div in view anyway with no further work from you.
In response to your comment:
You can use jQuery('body').animate({scrollTop:xPosOfDiv});
One way:
$(document.body).bind('keydown', function(){
$('#somediv')[0].scrollIntoView(true);
});
Another way:
$(document.body).bind('keydown', function(){
$('#somediv').css('top', $(window).scrollTop() + 'px');
});
Smooth way:
$(document.body).bind('keydown', function(){
$('#somediv').animate({'top': $(window).scrollTop() + 'px'}, 1000);
});
var pos = $("#theDiv").position();
window.scrollTo(pos.left, pos.top);

Categories

Resources