There are several issues for various components that all come down to bad integration with each other. We have:

  • toolbar: this adds a fixed element at the top of the page for links,
  • tableheader: it allows a table header to stick at the top of the page while we're scrolling over a table,
  • overlay: adds an iframe on top of the current page to display administrative pages without getting the user lost in admin (it doesn't use AJAX!),
    now removed from D8
  • url fragment: a 30 or so years old technology that allow a link to refer to a specific part of an HTML page using an element's id

Over the year we managed to break pretty much everything at different levels.

  1. toolbar + tableheader: both stick elements on top of the page. Elements which overlaps. instead of fixing this all on the js-side, PHP and a javascript eval got involved to compute the offset required to display tableheader properly under toolbar. #1417378: Remove eval() from tableHeader JavaScript. fixed
  2. tableheader + overlay: it works, but not like it should, fixed
  3. toolbar + tableheader + overlay: Since the PHP+eval thing for toolbar did not account for the creation of the overlay module, overlay had to override the function to add it's own value that adds an offset to properly display tableheader under the toolbar, inside the iframe. The fix isn't actually needed — because (for the people who had to deal with this) topOffset is always undefined, what is defined is <strong>parent</strong>.Drupal.overlayChild.prevTableHeaderOffset because it's in an iframe.
    #787670: Clean up tableheader.js interesting stuff in there.
    fixed, using a listener on the 'offsettopchange' event to update the CSS inside the overlay. Some jQuery trickery was needed.
  4. tableheader + fragment: the browser will scroll so that the element with the targeted id shows up at the top of the screen. If you have elements set with position:fixed the fragment targets is hidden behind. #567754: Wrong anchor adjustment in tableheader.js
  5. overlay + fragment: now this is totally broken, since bqq used for ajax bookmarking of admin url uses the # to store the state, it completely override what it was supposed to do and it's not even trying to scoll to the right element. The fragment information is still available but that requires to be processed "by hand" #1129578: Overlay doesn't respect internal anchor links.
  6. toolbar + fragment: this patch is supposed to fix it #546126: Toolbar interferes with anchor links but it does not work.
  7. Now: toolbar + tableheader + overlay + fragment should be working but right now every piece of the chain is broken somehow.

I didn't really want another meta but we need to take a step back from this mess and come up with a clean solution that doesn't involves PHP.
I think #787940: Generic approach for position:fixed elements like Toolbar, tableHeader should be put back on track and simplified as much as possible, perhaps taking the fragment part to an other issue.

Anyway what is certain is that this all need to be though as a whole and a generic solution needs to be found that allow easy opt-in for contrib while not messing up the 30 years old fragment feature. There are two main issues, fragment focus in the different situations, and having a way to compute an offset for tableheader that doesn't invlove PHP, eval or monkey-patches.

If you feel this would be better as a summary in #787940: Generic approach for position:fixed elements like Toolbar, tableHeader just tell me I'll (or anyone :) update the summary there and close this. I felt like a new thread would scare people less compared to a 2+ year issue with nearly a hundred reply. If this one is closed all the other issues linked here should be closed too.

And seeing the state of this thing, that's a bug, not a feature request.

Related:

Comments

nod_’s picture

Issue tags: +JavaScript clean-up

tagging

nod_’s picture

Issue summary: View changes

add related

nod_’s picture

Less obnoxious issue summary.

eigentor’s picture

Oh yeah this is still very much valid.
Evertime I go to the permissions page using a direct link I get reminded of this not working, cause the scrolling does not take toolbar into account.

nod_’s picture

When there is an error during form validation, an HTML5 browser will focus on the error field, and the toolbar gets in the way.

cosmicdreams’s picture

nod_: I just wanted to point your attention to a possible alternative for sticky table headers: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-stick...

A little internet research didn't uncover any examples that used this technique for tableheaders but it's worth a try.

nod_’s picture

Indeed, someone pointed it out to me a couple weeks ago last week (time flies).

The current tableheader implementation is doing waaay less work on scroll than it used to do. And we should be using a debounce function for this kind of things anyway. Will definitely be interesting once it's supported by *cough* IE or a decent polyfill is around.

cosmicdreams’s picture

nod_: that was also me. I did a search for a display: sticky polyfill and found this: http://codepen.io/FWeinb/pen/xLakC

I bet there's a better one but this seems pretty concise.

seutje’s picture

Some quick analysis leads me to believe position:sticky; doesn't even try to solve the anchor problem, it seems like it's just a conditional position:fixed; with less flexibility on the positioning...

evanbarter’s picture

I just ran in to the issues with displacement while working on a custom module so I'll start tracking this and see if there's anything I can help out with. I took a look at #787940: Generic approach for position:fixed elements like Toolbar, tableHeader and my brain melted, so maybe we do need to refocus.

evanbarter’s picture

Issue summary: View changes

"Without the extreme sarcasm"

nod_’s picture

1, 2, 3) have been fixed by other patches.

We now have a offsettopchange event, and data-offset-top attribute used to compute the total top offset. Interesting code is in tableheader.js.

nod_’s picture

New toolbar, same issues some related changes in the JS though :D

#1846970: [meta] Responsive Toolbar follow-ups

nod_’s picture

nod_’s picture

Issue summary: View changes

update with current status.

cosmicdreams’s picture

Issue summary: View changes
Related issues: +#2088121: Remove Overlay
cosmicdreams’s picture

Now that Overlay is gone, how does is this issue impacted?

nod_’s picture

Title: [Meta] the big javascript toolbar/tableheader/overlay/fragment mess » [Meta] the big javascript toolbar/tableheader/fragment mess

Pretty much like that.

A good thing is that tableheader is not much of an issue anymore since it's disabled by default, only the permission table uses it.

LewisNyman’s picture

Issue tags: +JavaScript, +frontend
mgifford’s picture

Manuel Garcia’s picture

SKAUGHT’s picture

[removed]

SKAUGHT’s picture

Issue summary: View changes
SKAUGHT’s picture

Issue summary: View changes

sorry, i see my cross post may not related in the same way..

SKAUGHT’s picture

Title: [Meta] the big javascript toolbar/tableheader/fragment mess » [Meta] javascript toolbar/tableheader fragment mess | URI #hash

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

nod_’s picture

Title: [Meta] javascript toolbar/tableheader fragment mess | URI #hash » [Meta] javascript toolbar/tableheader with url fragment mess
andrewmacpherson’s picture

Issue tags: +Accessibility, +keyboard focus

tagging accessibility, highly relevant to sighted keyboard-only users.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

nod_’s picture

Status: Active » Closed (duplicate)
Issue tags: -JavaScript +JavaScript