Automatic highlighting

September 12, 2011 9:51 AM

CSS/Javascript filter: I have a website that is one long page, broken into sections. It includes a side menu; if you click on one of the links in the side menu, it automatically scrolls to that section. How can I set it up so that whichever section is on-screen automatically highlights the side-menu section?

You can see an example here. If you scroll down, the side-menu sections automatically bold.

posted by nushustu to Computers & Internet (4 answers total)

Take a look at this answer: http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling

You just need to create a listener for each menu item and content location pair and toggle the right styles.
posted by michaelh at 10:04 AM on September 12, 2011

Best answer: jQuery for designers has an email about this very subject.
posted by schmod at 10:16 AM on September 12, 2011

er. tutorial. not email.
posted by schmod at 10:43 AM on September 12, 2011

I've looked at this in FireBug for a few minutes and the relevant code is in https://www.nytimes.com/packages/js/nytdesign/2011/sectionFrontViewer/SectionFrontViewer.js. The "menu items" are called ViewTocMini and the definition starts on line 3459. In the setEvents portion of this definition, we find on line 3556

$(window).scroll(function( ) {
    that.updatePosition( );
    that.updateMenuItems( );
});

The updateMenuItems() function is defined on line 3611

updateMenuItems : function( ) {
  if (this.scrolling) return;

    if($("#ViewToc").hasClass("viewCurrent") == true) {

        var i = 0, scrollTop = 0;
        scrollTop = $(window).scrollTop( );
        scrollTop -= $("#header").outerHeight(true);
        scrollTop -= $("#ViewToc .ctnr .ctnt h4").css("padding-top").replace("px", "") * 1;
        scrollTop -= $("#ViewToc .ctnr .ctnt h4").css("margin-top").replace("px", "") * 1;
        scrollTop += 60; //GRACE OFFSET

        $("#ViewToc .ctnr .ctnt h4").each(function( ) {
            if($(this).position( ).top <= scrollTop) i++;
        });

        $("#ViewTocMini .ctnr .ctnt h4").parent( ).removeClass("current");
        $("#ViewTocMini .ctnr .ctnt h4:eq(" + (i - 1) + ")").parent( ).addClass("current");

    }

},                                                                                         

I read this as saying, Once the user stops scrolling, if one of the sections has the class 'viewCurrent', then for each h4 in ViewToc, add 1 to i if the top of the section is less than the current position. Finally remove the class 'current' from whichever ViewTocMini element has it and set it on the element corresponding to i.

Given that there's more than four thousand lines of code in this file, there's obviously a lot more to how this page works, but those seem to be are the parts that highlight menu items corresponding to the page sections as you scroll.

Or, ya know, on preview you could just look at the tutorial schmod linked. :/
posted by ob1quixote at 11:11 AM on September 12, 2011 [3 favorites]