Quick question...
Is there any way to change the default behavior of a scrollbar from moving one pixel at a time (continuous motion), to jumping say 100px at a time (less continuous more discrete jumps). I have an animation that jumps between pictures and I want to use the scrollbar to show one picture at a time.
Whenever I try changing the behavior of the scrollbar it either jumps all over the place or does some screwy stuff. BTW I'm scrolling the bar, not using arrows to move it. That way I can manually make the animation faster or slower.
Use the Control.ScrollBar.scrollBy() function to scroll by any number of pixels.
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
$('scroll_down_50').observe('click',function(event){
scrollbar.scrollBy(-50);
event.stop();
});
EDIT: To disable the scrollbar try: scrollbar.disable()
From: http://livepipe.net/control/scrollbar
Related
Is there any way to make an image move up when users scroll the page? I have 2 square images (each 400px in wide and height), both are visible. The left image is fixed by position. The right image is positioned 200px below the left image. I need to make the right image to move up by 200px (get aligned with the left image) when we scroll the page. Then the it stays still on that position.
I found the one on this page is quite the same with what I'm trying to create http://jessandruss.us/#waiting The difference is my images are all visible, while on this page the overflow of the left image is hidden and it gets back to its original position when users scroll up.
Really appreciate any help on this matter. Thank you.
$(document).ready(function(){
var aligned = false; // A flag to tell us when the images are aligned
$(window).scroll(function(){
if($(this).scrollTop() == 192 ) { // when the window scroll to the alignment point...
aligned = true; // the images are aligned
}
if (aligned) { // if they're aligned...
$(".image-2").css("top", 8 + $(this).scrollTop()) // match .image-2's top css property
} // to the window's scrollTop value, +
// 8px for the body's margin.
})
})
Here's a JSFiddle with what I think you want.
There's simply a boolean to tell us when the images are lined up. When they are, image-2's CSS property 'top' is matched to the window's scrollTop value.
The boolean variable is currently hard coded to tell us when the images are lined up (I looked at the window's scrollTop value when they were lined up, 192 in this case). This isn't a great approach since it won't account for changes in the images' positions or sizes, but this should be enough to get to going.
EDIT
https://jsfiddle.net/eLdo0s3w/5/
Here's another method to achieve the same result. As long as having the second image position: fixed is OK, then it should be more efficient, and will hopefully avoid the jumping around that OP says happened with the first method.
It targets image-2's top CSS property and matches it to the window.scrollTop value, until image-2 reaches the necessary point.
Again, this code isn't very reusable, but it should work fine for a one-off situation. If anyone wants improve on it, please do so!
Sounds like you need to use jQuery to link the picture's transform: translateY() property with scrollTop(). It's a little hard to explain in words, but if you provide a jsfiddle I'll show you what I mean.
I have a bunch of long modals that leave no space at the top when they are first rendered. BUT when I scroll up a thin line of background shows at the top. I like this functionality because it indicates that the top of the modal has been reached but my client doesn't and he pays the bills.
You can see this behavior here: http://jschr.github.io/bootstrap-modal/ by scrolling to the last demo, "Long Modals," launching that demo and attempting to scroll higher than the top (I use a Mac so I drag with two fingers).
HOW DO I STOP THE LITTLE LINE OF BACKGROUND FROM SHOWING?
this is what's setting the gap on top:
.modal-overflow.modal.fade.in { top:1% }
if you set that to 0 you'll delete the gap
This page uses a bit of JS to prevent the top of the left-side panel from scrolling past the top boundary of the viewport.1
Under Chrome 31 and Firefox 25, the left-side panel remains rock-solid as one scrolls past the top of the containing div, but in other browsers (e.g. IE 11 and Safari 6) the left-side panel "bounces" vertically as one scrolls. (Once the scrolling stops, the position of the left-side panel stabilizes.)
Here's the JS/jQuery code responsible for this effect:
(function () {
var w = $(window),
lc = $('.left-panel');
w.scroll(function () {
var st = w.scrollTop(),
ot = lc.offset().top;
$('.vfloat').css('top', Math.max(0, st - ot));
});
}());
Question: How can I eliminate this unwanted "bouncing" of the left-side div?
EDIT: cleaned up and simplified the code snippet.
1To make this effect possible, you may need to resize your window's vertical dimension so that enough of the right-side panel falls outside the viewport.
It is the way each browser fires scroll event. You use height calculations which are very expensive and cause reflows of the webpage, and it depends on browser how it handles that.
I can suggest you 2 options that will solve your problem:
1) Simply use jQuery animate to change position of your left div, that way the position will change smoothly, you can use even very fast speeds. If you don't want to use jQuery you can simulate the same behavior by writing your own code and using timers to change top position smoothly or even css3 animations.
2) The second way (and I think this is the preferred way) is not to use javascript for position manipulation in this case and use javascript only to assign position: fixed class to your left container on some conditions. It will still cause reflows, but you won't have such delay caused by scroll event.
Solution 1 - using css3 transition and jQuery for smooth animation: http://jsfiddle.net/6bYhx/4/ (the same can be accomplished with jQuery.animate())
Solution 2 - using position: fixed and addClass (the problem with IE still persists as scroll event is delayed): http://jsfiddle.net/S5Sgu/
So I think that the optimal solution would be smooth animation (Technique 1) with some modifications.
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.
I have a list of divs, and everytime I want to go to the next div I press a key. I need to check if that div is offscreen, and if so, I need to move the screen to show that div either using anchors or another method.
What is my best option for doing this?
Just to clairify, offscreen in my case means something that can't be seen right now without scrolling down. So if you are on the StackOverflow Home Page at the top, the last question on the entire page is offscreen.
Best option is to scroll your page to the element by getting its y-offset, and checking window height and calculating where to scroll page and then you can animate your page to that point.
//height of your div
var scroll = 250;
//animate from actual position to 250 px lower in 200 miliseconds
$(window).animate({"scrollTop": "+="+scroll+"px"}, 200);
so this is not the complete code but it might give you the idea.
check out jquery scrollTop
hope it helps,
Sinan.