0

TL;DR: How to force IE7 to load all elements hidden by a scrollable div?

I am building a 'collapsable' menu to navigate through a set of pages. This menu has two states imploded and exploded.
The menu items are like chapters of a book, as a user progresses through the content the 'active' menu item is shifted down.
Upon pageload, I want the <div> where the items are located in to scroll downwards instantly(!) to the active menu item, minus some offset.

As usual, this works perfectly on chrome and ff, but not on ie7.

In exploded state, it seems that ie7 does not bother to 'load' items when they are not visible on page load. What's happening is that ie7 starts the menu div without a scrollbar (or a very small one). When I set the scrollTop to required amount. The div is just scrolled downwards until the scrollbar 'bumps' into the 'bottom of the div', then ie7 starts loading the next bits of content, and I can scroll further until I find another 'bottom', etc.

I managed to work around this by using an animation with a length of 1000ms (just picked a number). It does not meet specified requirements (and looks ugly) and I wonder how I can force ie7 to load this content before it is requested, as it seems to be not loading it.

IE7 users are our largest target group, so there is no skipping this. And making things available to users without javascript is a huge plus.

In imploded state there are no issues, I tried using parts of the imploded states CSS in the exploded states and later setting them to the right values, did not help.

Here's some code:

scrollToCurrent = function(length){
    var prev = $("div.scroller div.selected").prev();

    // Check if previous exists
    if($(prev).length > 0) {
        // number of previous items * height of an item - half an items height
        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 any more, let me know.

EDIT: Basic jsfiddle: http://jsfiddle.net/AmazingDreams/keeUY/ http://jsfiddle.net/AmazingDreams/keeUY/embedded/result/

5
  • 2
    IE7 users are our largest target group — seriously? You have a sad reality. By the way, you've already tried some plug-in? I know, isn't your real problem, but can be a saving of time — even when working with conservative people. To complete, take a look here — it is a very good choice to you. And finally, to help your real question, can you post a jsFiddle? Jul 10, 2013 at 14:13
  • IE7 users are our largest target group I think you're the only man who has IE7... 0.8 % have IE7... Jul 10, 2013 at 14:24
  • That 0.8% would be our target group, I can't help it. I'll see if I can put together a jsFiddle. And take a good look at that plugin. Jul 10, 2013 at 14:28
  • Yesterday I managed to fix it by placing an extra (dummy) menu item at the bottom of the menu. We were getting ready to push to the live environment but this morning it broke again, same issue. Jul 11, 2013 at 7:33
  • IE7 seems to work correctly in the fiddle. Another thing I noticed is that it starts working correctly after the 'selected' item 'leaves' the page. Also IE7 works on the fiddle and it looks like the question is too localized for SO. Jul 11, 2013 at 8:10

1 Answer 1

0

UPDATE

The final solution proved to be really simple. As nothing seemed to work and fixing one situation broke another (There were major differences between whether or not the selected item was visible initially) I decided to just bash the sh*t out of the scrollbar:

I deleted all old 'fixes'

scrollToCurrent = function(length){
        var prev = $("div.scroller div.selected").prev();

        // Check if previous exists
        if($(prev).length > 0) {
            // number of previous items * height of item - half an items height
            var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight() / 2);

            if(length === 0) {
                var i = 0;
                var maxpushes = 100;

                // Push just as long as needed to get the scrollbar to where we want it to (fixes ie7 issue)
                while($("div.scroller").scrollTop() < scrollY) {
                    $("div.scroller").scrollTop(scrollY);

                    // Make sure it can never turn into an endless loop
                    i++;
                    if( i > maxpushes) {
                        break;
                    }
                }
            } else {
                $(".scroller").animate({
                    scrollTop : scrollY
                }, length);
            }
        }
    };

OLD NON-WORKING ATTEMPTS

I managed to 'fix' it by placing this as an extra item: UPDATED FIX BELOW

    <div class="cycle inactive">
        <?php // I fix IE7 issues ?>
    </div>

I think the newline in the <div> does 99% of the work. So keep that line in there.

I don't think this is 'the' fix and I'll leave this question open, first I want this thing to be stable for a while.

EDIT:

Well, this 'major update' just turned the issue around (i.e., imploded stopped working, exploded worked). Updated fix:

<?php // Only show if menu starts exploded ?>
<?php if( ! $imploded): ?>
    <div class="cycle inactive">
        <?php // I fix IE7 issues ?>
    </div>
<?php endif; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.