When the module is in "Fixed" mode, it displays above the sticky headers that come with Drupal, removing them from view. To fix it, there would need to be some way to alter the JavaScript parameters in Core so that it sticks just under the top of the screen. A quick and dirty fix would be to add table.sticky-header { top: 23px !important } (!important to override the inline style generated by the javascript) to the SimpleMenu CSS (that's for blackblue), but it still doesn't look right. It doesn't become visible until it hits the top of the page, rather than the top of the visible page.

Comments

AlexisWilke’s picture

AlexisWilke commented

Okay, I applied your suggested change. Although the top should be 21, not 23 pixels (it could be that your font is bigger too...)

It works for me, and yes, the trigger Y position should also somehow changed to 21px instead of 0px.

I put that CSS in the template since you should not change the sticky table position if you don't use the Fixed to Top feature.

Thank you.
Alexis

AlexisWilke’s picture

AlexisWilke commented

meustrus,

With the -dev version and the following small fix, does it work for you?

  // file: misc/tableheader.js

  ...
  var visState = (vOffset > 0 && vOffset < e.vLength) ? 'visible' : 'hidden';
  ...

Change the vOffset > 0 with vOffset > -21.

That way, it will mark the title as visible 21 pixels sooner.

Thank you.
Alexis Wilke

meustrus’s picture

meustrus commented

A related problem with a similar fix is that #jump-links don't go to the "right" place either. The following assumes that any <a> tag without an href is empty and exists for this purpose:

a {
  position: relative;
  top: -22px;
}

a:link, a:visited {
  top: 0;
}

A "better" way to do this with attribute selectors (not well supported) might be:

a[name] {
  position: relative;
  top: -22px;
}
AlexisWilke’s picture

AlexisWilke commented

Hmmm... The first definition a {...} would apply to all a tags.

Also, I have a module (Table of Contents) that uses identifiers as anchors. That is, I use entries such as <h1 id="anchor-name"> and it works great but your code would fail.

I'm wondering whether that should not instead be viewed as a theming problem.

I otherwise had another idea which would be to use an IFRAME. But I think it would generate the same problems.

And we could have a theme that makes the background of the simplemenu 50% transparent...

Thank you.
Alexis

meustrus’s picture

meustrus commented

Yes, there are many complications in fixing this problem. Another selector might be a:empty, or even *:empty to catch any empty tags. It wouldn't fix your Table of Contents thing, though. I don't know about the compatibility implications of using <h1 id=''> tags for hash links, but it would be impossible to fix this sort of thing with styles. What I can think of right now is something like:

* {
  margin-top: -22px;
  padding-top: 22px;
}

But that has obvious compatibility issues, and does weird things when floats are involved.

As for making the background transparent, I'm going to save everyone the trouble of looking for CSS to achieve the effect. The only way to achieve a partially transparent background without transparent text is to use an image with transparent pixel(s). The most promising CSS3 feature to achieve this effect is the rgba() color definition, which is not well supported anywhere right now.

AlexisWilke’s picture

AlexisWilke commented

Yeah... another way would be to take everything in the body and move it inside an IFRAME. That would work... but it's rather ugly and may have bad side effects to any AJAX functionality. (it should not, but I'm not totally sure.)

In my case, I use the Simplemenu for administration only (At least so far.) But I can see that would be a problem if you want to use it for your users...

We could also run a jQuery looking for all the tags with an identifier or <a name="...">. And change them with a simplemenu class as in simplemenu-anchor. Then have the corresponding CSS.

Thank you.
Alexis

meustrus’s picture

meustrus commented

Even better, the javascript could search for all <a> tags where href begins with '#', then search for each element with name or id associated with that identifier.

meustrus’s picture

meustrus commented

This seems to have the first part fixed, although it should be theme-dependent since the new "simpleblack" theme doesn't have a height of 21px like the main CSS declares to fix the sticky-table problem.

AlexisWilke’s picture

AlexisWilke commented

Actually, I noticed the other day that even on the same Linux computer, browsing the same website, the height changes between SeaMonkey and Chrome. So that's a problem indeed...

From what I recall, without that size, we don't get the right anything with the mode 'fixed'. The problem is the background I add there so the top of the website is pushed below the menu. If someone has an idea on how to fix the CSS so that works properly without forcing the size this way... I'll be glad to look into it.

Thank you.
Alexis