Question

I’m building a progressively-enhanced, Bootstraped web application that features task-centric help on every page. The help area div (id="help_area") loads in a hidden state; generally when the user clicks on the “help” button (a id="nav_help_button"), the main content div condenses from span12 to span9, and the help area is revealed as a span3. This works well.

Because I want to support mobile and tablet, I’m using Bootstrap’s responsive scaffolding. So if you are viewing the page on a narrow viewport, clicking on the help button “reveals” the hidden help area at the bottom of the page‡. I’m trying to use jQuery’s .slideToggle()‘s callback method to execute JavaScript (window.location.hash = "help_area";) that “jumps to” the help area after it is revealed, but having no luck with the jumping (it doesn’t error; it just doesn’t move browser focus to the help area).

How can I reveal a div at the bottom of a page, then jump to it? I’m also using preventDefault so the browser won’t try to jump to the internal link before the target is revealed. Could that be the conflict?

Here’s the relevant ECMA script:

$('#nav_help_button').click(function(event) {
    "use strict"; //let's avoid tom-foolery in this function
    event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
    //adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
    if ( $('#help_area').attr('aria-hidden')==='true' ) {
        $('#content_container.span12').switchClass('span12', 'span9', 300);
        $('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');   
    }
    else {
        $('#help_area').slideToggle(300).attr('aria-hidden', 'true');
        $('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
    }
});

I have also set up a JSFiddle that illustrates the problem.
To duplicate

1. open http://fiddle.jshell.net/jhfrench/HdCbu/7/show
2. then resize that browser window until “PTO, AIT Life, Hours Worked”, etc stacks on top of each other
3. click on the button in the upper-right corner (the one with three white horizontal bars) to reveal the nav menu
4. click on the blue “help” button to execute the reveal/jump-to.

‡ As the right-most div, everything to the left of it gets stacked on top, so the newly “revealed” help area is generally below the visible portion of the page.

Related:

• Javascript to make the page jump to a specific location
• http://api.jquery.com/event.preventDefault/
• http://api.jquery.com/slideToggle/

Answer 1

Your JSFiddle does jump when I do exactly as you say (steps 1-4) for my browser, which is Chrome 24. What’s your browser?

But perhaps this is your problem. If I navigate to http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (note the appended hash tag) and perform your steps 1-4, my browser does NOT jump. Note that when you first navigate to that URL, there is no visible #help_area. Thus, the URL you’re navigating to specifies a hash tag that’s invisible. Perhaps the browser is a bit confused by this and just leaves the #help_area hash tag in a bad state. It won’t allow scrolling to it from then on, even after it becomes visible. Speculation, but I hope it’s helpful!