I have a div as a container for a file view. This div has scrolling in y direction.
I want to automatically scroll the content inside this container div to a specific position when loading the page, but without to scroll the whole page. I have tried with <a name="scrollHere"> and location.hash = 'scrollHere'; but this scrolls the whole page.
Do you have any ideas?
Use scrollTop on the container element with a value calculated from the y position of the element inside the container.
Mozilla Element.scrollTop
stackoverflow: javascript-textarea-scrolltop
Using scrollTop requires that you know the position you are going to, and it could change as content changes. A possible solution is to add an anchor tag and call focus on it when the page loads, the browser takes care of scrolling it for you.
If you use Ext, you can use Element.scrollIntoView. otherwise, you can look at their source code for inspiration on how to do implement scrollIntoView.
http://www.extjs.com/deploy/dev/docs/source/Element.scroll-more.html#method-Ext.Element-scrollIntoView
Related
I am thinking about using JavaScript to make a div in the parent webpage to follow the position of another element inside an iframe; the position of the element in the iframe changes when the size of the window changes (responsive design), so is it possible to make the div at the parent page change position accordingly as well? I simply don't know where to start
You can get the element inside the iframe:
document.getElementById('iFrame').contentWindow.document.getElementById('x');
Once you get the element you can work with his position, to get element position with pure javascript look this.
It's simpler to do this with jquery, but maybe with javascript it's more efficient.
After all, just position your div according to the position of the element.
I've seen scrollTo used for an entire page, but I'm looking to scroll content within just a div.
In the image, I have an element I want to scroll to. How to I bring the scroll to the top of the containing div (which already scrolls, I just want it to be automatic).
There is plenty of text below the highlighted element to facility scrolling.
You can set the scrollTop of the element which contains that element. And the value to set is actually the top position of that element which can be obtained using $(element).position().top.
So, the code you need is:
$j(scrollable_div).scrollTop($j(other_element).position().top)
NOTE: you made need to find the offset between other_element's containing element and the top of the page for it to scroll accurately.
I have a dynamic page where clicking a link triggers some javascript that sets some page elements to display:none, and thus changes the height of the page. The typical browser behavior for this is that the scroll position from the top of the page is retained. I want to retain the scroll position from the bottom instead, because the link is near the bottom of the page and I would like the user's cursor to remain over the link after it is clicked.
The code I have to do this is:
var scrollBottom=getDocHeight()-getScrollTop();
//do stuff to change height
window.scrollTo(0,getDocHeight()-scrollBottom);
(using cross-browser functions I found to obtain document height and scroll position).
This works fine in chrome and internet explorer, but in firefox, there is a small delay between the page height changing and the scroll position changing. As a result there is a flicker as the page quickly realigns itself, which is bothering me a great deal.
Can anyone suggest a fix or a more natural way to remember the scroll position from the bottom of the page instead of the top?
Thank you.
I have a div which is set to overflow:scroll;. I get scrollbars which is what I want. However when scrolling the div with the mousewheel it scrolls the rest of the page when it reaches the top or bottom of the div's content.
How can I scroll only the div or the entire page based on what's hovered ?
First I don't think you can override the scroll event. So here is what I would do. I don't know jquery but here is some straight javascript.
document.getElementById('scrollDiv').onmouseover=function(){
document.getElementByTagName('body')[0].style.overflow='hidden';
}
document.getElementById('scrollDiv').onmouseout=function(){
document.getElementByTagName('body')[0].style.overflow='';
}
Obviously you could tweak this a little, but this is the basic idea. Also, if you need to you could do other test cases. Like if the div has focus then do the same thing. Depends on your setup.
You could test the mouse position and cancel the scroll events for the document if the mouse is within the bounds of the div.
In this case, I think you'll have to override the default onscroll event for the body. In your handler, you'll need to manually scroll the div's contents.
I have a div tag and I want to hold the scroll position even if the page is refreshed.How do i implement in JavaScript. Any help would be appreciated. Need just In IE.
Thanks
If the entire page refreshes, you'll have to store the scroll position of the DIV in a cookie (or send/retrieve that position from the server, which is more trouble), then add a listener to the window.onload event that resets the DIV to the correct scroll position.