docbook-apps

Dear All,

I've noticed incorrect scrolling the page in Chrome when the URL contains a
hash character.

This seems to be caused by the following script located in the main.js file:

var hash = window.location.hash;
if (hash) {
var targetOffset = $(hash).offset().top - 120;
$('html,body').animate({scrollTop: targetOffset}, 200);
return false;
}

While target offset is -195 in FF, it is 2200 in Chrome. The required anchor
is not scrolled precisely to its location, but ca 300 px towards the bottom.
However, on page reload it is sometimes correct, sometimes more or less than
the initial value. This inconsistency is really weird.

I've found several threads mentioning incorrect Chrome behaviour when
determining offset top value on StackOverflow, but it is not very clear to
me if this is our case.

Has anybody any experience with this or fix?

Thanks, Jan

On 10/27/14, 1:04 PM, Jan Tosovsky wrote:
...
> While target offset is -195 in FF, it is 2200 in Chrome. The required anchor
> is not scrolled precisely to its location, but ca 300 px towards the bottom.
> However, on page reload it is sometimes correct, sometimes more or less than
> the initial value. This inconsistency is really weird.
>
> I've found several threads mentioning incorrect Chrome behaviour when
> determining offset top value on StackOverflow, but it is not very clear to
> me if this is our case.
>
> Has anybody any experience with this or fix?

As you've noticed, that code is trying to compensate for the fact that
there's a fixed header and links to anchors in a page would otherwise
appear under the fixed header (i.e. at the top of the window). I've
recently come across a better solution to that problem that uses only
css. It goes something like this (assuming you're linking to tags
and assuming a header-height of 195px):

a:before {
display: block;
content: " ";
margin-top: -195px;
height: 195px;
visibility: hidden;
z-index: -1;
}

Adjust the selector as needed if the links are to div tags or whatever.
In the case of the DocBook xslts, I think a and div tags that have id
attributes would be the right things to add this rule to.

This strategy is much easier to maintain if you're using sass/scss
because you can use variables, defining $header-height in one place and
then reusing it to define the height of the header and the offests in
rules like this.

My suggestion would be to rip out the javascript and move to a solution
like this.

Regards,
David

On 27.10.2014 19:04, Jan Tosovsky wrote:
> This seems to be caused by the following script located in the main.js file:
>
> var hash = window.location.hash;
> if (hash) {
> var targetOffset = $(hash).offset().top - 120;
> $('html,body').animate({scrollTop: targetOffset}, 200);
> return false;
> }

Could you try replacing $('html,body') with $('#content'). I recall that
there were some problems related to former selector, but I'm not sure
whether this will help here.

Jirka

--
------------------------------------------------------------------
Jirka Kosek e-mail: jirka@kosek.cz http://www.kosek.cz
------------------------------------------------------------------
Profesionální školení a poradenství v oblasti technologií XML.
Podrobný prehled školení http://xmlguru.cz/skoleni/
------------------------------------------------------------------
http://docbook.cz Stránky o dokumentacním formátu DocBook
http://xmlguru.cz Blog mostly about XML for English readers
------------------------------------------------------------------

On 2014-10-29 Jirka Kosek wrote:
> On 27.10.2014 19:04, Jan Tosovsky wrote:
> > This seems to be caused by the following script located in the
> main.js file:
> >
> > var hash = window.location.hash;
> > if (hash) {
> > var targetOffset = $(hash).offset().top - 120;
> > $('html,body').animate({scrollTop: targetOffset}, 200);
> > return false;
> > }
>
> Could you try replacing $('html,body') with $('#content'). I recall
> that there were some problems related to former selector, but I'm not sure
> whether this will help here.

Thanks for the hint. This approach would be much easier, but it unfortunately doesn't help.

In meantime I discovered it works fine for files browsed from local disk, but fails when files are located on a local network or Internet. So I suppose it is somehow related to security.

I've tried to create a minimal example, but I reduced it too much so it is working. I am going to do a better job ;-)

Regards, Jan