Preventing scroll to top

  • Resolved KTS915

    (@kts915)


    10 years, 7 months ago

    In order to prevent users finding that the page scrolls to the top if they accidentally click on a footnote number within the main text, I have implemented the following code:

    a.side-matter:link {
  pointer-events: none;
  cursor: default;
}

    This works in every modern browser except IE11, although IE11 claims to support the pointer-events: none property. (Perhaps this is only for SVGs?)

    Do you have any suggestion as to how I can achieve the same thing for IE11?

    https://www.ads-software.com/plugins/side-matter/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author setzer

    (@setzer)

    Hi KTS915,

    I’m not sure why the reference numeral links are sending viewers to the top of the page. They should link directly to the corresponding notes in the sidebar. Has this always been the case? If you just want to remove the links entirely (but leave the numerals), it might be easiest to do it with a quick modification of your side-matter.php file.

    Re: your actual question, I’m afraid I don’t know a simple solution to the pointer-events: none issue. Is it possibly an issue with the :link pseudoclass you’re using? (That is, does it work if you just use a.side-matter { pointer-events: none; }?)

    (Google does turn up a kind of complicated workaround that uses JS, but this seems like overkill for what you need.)

    Thread Starter KTS915

    (@kts915)

    Thanks for this, setzer!

    Yes, the links have always sent viewers to the top of the page. I hadn’t really been bothered by this before, but I’ve recently had a few people click on the numbers and been a bit surprised by the behavior!

    I think the pointer-events issue is solely a limitation of Internet Explorer. I’ve tried a number of other classes and pseudo-classes, and none of them worked. But I haven’t actually tried just a.side-matter so will give that a try now. And, yes, I have seen that workaround using JS, but was rather daunted by it, and was hoping you could suggest something simpler!

    The idea of modifying the side-matter.php file sounds like the best option (provided, of course, that it won’t affect the ability of the side-notes to align correctly). Could you suggest how I could do that, please?

    Thread Starter KTS915

    (@kts915)

    OK, I’ve now tried using a.side-matter { pointer-events: none; } but no joy. It’s definitely an IE issue; it only supports pointer-events when applied to an svg.

    Plugin Author setzer

    (@setzer)

    Peculiar stuff. Usually there’s no problem with the reference numeral links jumping to the sidenotes. Is your site publicly available?

    Editing side-matter.php isn’t a perfect solution since your edits won’t be preserved across plugin updates, but you can certainly do it without breaking anything. You want to edit line 495, which specifies the HTML markup for each reference numeral:

    $ref_output = "<a id='ref-{$note_id}' class='{$html_class} {$html_class}-ref' href='#note-{$note_id}'{$figure_color_style}>{$open_sup}{$ref_figure}{$close_sup}</a>";

    To remove the link, just get rid of the href attribute:

    $ref_output = "<a id='ref-{$note_id}' class='{$html_class} {$html_class}-ref'{$figure_color_style}>{$open_sup}{$ref_figure}{$close_sup}</a>";

    You may need to make some CSS adjustments to the appearance of the reference numerals after this change, as well.

    Thread Starter KTS915

    (@kts915)

    Thank you!

    This works perfectly, and I didn’t even need to make any adjustments to the CSS! I also see that the tooltips remain functional too.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Preventing scroll to top’ is closed to new replies.