Question

I’m transfering a client’s site from Flash to HTML, using jQuery to replicate the Flash animation’s effects. This particular one uses .animate to change the value for “top” in CSS. All affected elements have their CSS position set to absolute or relative.

Here’s the top-changing code:

function maskUp(height, length) {
    var contentMask = $('#left-content .content-mask');

    contentMask.animate({top: 312}, 500, function(){
        contentMask.delay(100).animate({top: height}, length, function(){
            contentMask.children('.active').removeClass('hide');
        });
    });
}

(edit: site address removed)

The animation works every time I hit Reload, however if I just select the address bar and hit Enter, when the animation completes, the element jumps to a completely different place than it’s supposed to. Chrome’s developer tools show that it has the correct value for “top”, however it is in the wrong place, and changing the value in Chrome’s developer tools doesn’t change the position at all, making me think that I’ve broken it somehow.

Thanks in advance!

Answer 1

Ok so what the issue is (as far as I can tell) is that it keeps jumping the viewport to the location of your a-sorry-state div. If you pass an id as the location.hash of a page, it will scroll to that element with that id. Thus, I would say use a query parameter instead of the hash part of the url. Looking at your code in tabs.js I would say you could change the following function

function getHash( url ) {
    var hashPos = url.lastIndexOf ( '#' );
    return url.substring( hashPos + 1 );
}

to

/*might want to change the name too*/
function getHash() {
    return location.search.slice(1); // .search will return the part of the url
                                     // that follows the ? symbol. string.slice(1)
                                     // returns all but the first character of
                                     // the string (the ?).
}

And then use a url like

http://panaceaentertainment.com/wp/television?a-sorry-state