I am wondering if anyone can tell me in theory how to lock 2 DIVs together when scrolling.
I need to create a large graph but can only show a small portion at a time. I need the labels to show in a stay locked to the data, but remain visible.
I'm essentially trying to replicate the manner you can scroll through an excel worksheet.
So the labels on the side would scroll vertically with the data but stay fixed when scrolling horizontally. and vise versa with the labels on top.
This is all going to end up in a Rails app that will display a timeline of employees that worked for my fire dept over the last 100 years.
the years will be along the top, and the ranks and positions will be along the side (50-60 lines)
I'll only have the room to display 15 years and about 20 lines at a time and still be readable.
Any ideas would be appreciated.
You can put listeners on both divs and then whenever one of them changes, make sure both of them get the same vertical offset.
You could try position:fixed to lock the position of a div relative to the viewport while scrolling http://www.w3.org/Style/Examples/007/menus.en.html
$('#center').ready(function(){
var left
$('#center').on("scroll", function(){ //activate when #center scrolls
left = $('#center').scrollLeft(); //save #center position to var left
$('#top').scrollLeft(left); //set #top to var left
});
});
Related
I am trying to do something similar this guy did here
However, I want my animation to go from left to right as opposed to right to left.
Now since all divs are actually positioned inline i have tried to specify direction: rtl on the parent div, but it still does not work. (my view remains on the left side on the page, I would like to see the rightmost div first and then when I slide the left divs they move to the right).
Thank you.
L.E: Here is the solution for those interested http://jsfiddle.net/oq4p28wg/
From moving left to right in the example referenced they add margin-left to move between slides, until reaching a maximum number of slides. In your case to move in the opposite direction you will need to start with the maximum margin-left and substract margin to move from right to left in the slides until reaching the first slide and therefore margin-left:0.
I am trying to create a Leaflet menu based on the properties of the Layer Control code of Leaflet.
This menu becomes automatically scrollable if it is greater than the space left between the top of menu and the bottom of the map.
Javascript:
var acceptableHeight = this._map._size.y - (this._container.offsetTop + 60);
if (this._form.clientHeight > acceptableHeight) {
this._form.style.height = acceptableHeight + 'px';
L.DomUtil.addClass(this._form, 'menu-scrollbar');
}
else {
L.DomUtil.removeClass(this._form, 'menu-scrollbar');
}
CSS:
.menu-scrollbar {
overflow-y: auto;
padding-right: 10px;
}
The scroll bar is perfectly created depending on the size of the form, but it always moves to the top when the mouse cursor goes out of the scrolling bar zone (that is the line which the bar follows). Something also strange is that the bar stays on the same place only if the mouse is quickly changing its cursor type (such as when located on an HTML input zone).
An image can be better than a long explanation:
screenshot of the menu.
I've been looking around similar problems with the scrolling bar:
"Why the vertical scroll bar moves automatically?"
"Scroll bar goes up"
But the answers are not exactly related to the same issue, and I would like to use pure JavaScript rather than mix it with jQuery. One of the feasible solution could be to get the scroll bar position (how to get it) and set it manually (how to do it).
But I am sure that this problem comes from something else tht i don't get.
Can someone help me with this ?
Fiddle example: http://jsfiddle.net/LnzN2/1121/
Thank you in advance.
I know there are a lot of tutorials to let a div appear after scroll down a certain amount of pixels.
But what I want is to let a div appear when the user scrolls past another div. And when they scroll back up it has to disappear again.
Why not after an amount of pixels? I want to use this for my menubar to appear on the top of my page after the user scrolls past the banner image. BUT when you scale down the browser (mobile, tablet, small screen...) the banner image will scale down to! The image will not be the same height as before. The menubar would appear to late or to earlier;) that's why I want the menubar to appear after that image (div).
Hope you guys can help!
Now that we are talking in abstract terms, I will try to explain to the best of my ability.
Can't you get the current position of the targetDiv (the div, after which scrolling down would show the menubar), and then use the same code of making the menuDiv appear after scroll down a certain amount of pixels.
This answer might help you in getting the current position of the targetDiv.
So, do the following steps and let me know how it went:
1) Get jquery.appear
2) Apply the disappear event on your selector:
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
// this element is now outside browser viewport
});
3) On that event just make the other div dissapear.
$('theStuffToHide').toggle()
4) Final result
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
$('theStuffToHide').toggle()
});
This should be the only thing you need.
Cheers, hope it helps.
You can check for the pageoffset to cross the amount (top offset of the target + height of the target element ) and show the div.
And when the pageoffset comes less that the calculated amount, make the div hide
Scroll bar moves freely pixel by pixel which i don't need .What i need to do is a scroll bar scrolls the table 1 element right or left .Whatever i try schooling should not divide elements . Is it possible to make a scroll-bar that scrolls let say 200px at a time?
use scrollBy(xnum,ynum)
look at this
http://www.w3schools.com/jsref/met_win_scrollby.asp
update
using this : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
i was partially able to do it. it kind of works with the mouse. it might be improved.
http://jsfiddle.net/btevfik/EZpdA/
Ok I have a page with stacked div's and anchors which use a jquery slide slide down. When the bottom of a stacked div reaches the top of the screen I want the jquery to automatically scroll to the next div, which may be 1000px south.
How can i do this in javascript?
my idea is to put an image the bottom of the div and somehow check the screen to see if the image is in the top half of the monitor which would call a function to scroll to the next anchor..
Is this possible?
var wHeight =$(window).height()/2;
$(window).scroll(function(){
var imgOff = $('#two').offset().top-$(window).scrollTop();
if(imgOff<wHeight){
alert('Kill BILL!');
}
});
havent tried this out but it should work
Edit: this works try it here
http://jsfiddle.net/BG2Cz/
P.S. Be warned it will spam alerts once u pass the middle