TL;DR: How can I make IE7 load all hidden elements within a scrollable div?
I'm creating a collapsible menu for easy navigation through a series of pages. This menu has two states: collapsed and expanded.
Think of the menu items as chapters in a book, with the 'active' menu item moving down as the user progresses through the content.
Upon page load, I want the <div> containing the items to instantly scroll down to the active menu item, with a slight offset.
This works flawlessly on Chrome and Firefox, but IE7 is causing some trouble.
In the expanded state, it seems that IE7 doesn't bother loading items that are not initially visible. What happens is that IE7 starts the menu div without a scrollbar (or a very small one). When I set the scrollTop to the required amount, the div just scrolls down until the scrollbar hits the bottom, prompting IE7 to start loading the next bit of content so I can continue scrolling down, repeating this process.
To work around this issue, I used an animation with a duration of 1000ms (just picked a number). While it's not ideal and looks rough, I need to figure out how to force IE7 to load this content before it's needed since it's failing to do so on its own.
We have a significant number of IE7 users, so skipping this problem isn't an option. Additionally, making the content accessible to users without JavaScript is a big priority.
In the collapsed state, there are no issues. I attempted to apply parts of the collapsed state's CSS to the expanded state temporarily, but it didn't resolve the problem.
Here's some code:
scrollToCurrent = function(length){
var prev = $("div.scroller div.selected").prev();
// Check if previous exists
if($(prev).length > 0) {
// Calculate scroll position based on previous items
var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight() / 2);
if(length === 0) {
$("div.scroller").scrollTop(scrollY);
} else {
$(".scroller").animate({
scrollTop : scrollY
}, length);
}
}
};
If you need more information, please let me know.
EDIT: Basic jsfiddle: http://jsfiddle.net/AmazingDreams/keeUY/ http://jsfiddle.net/AmazingDreams/keeUY/embedded/result/