In-page links and the edit bar -- css to shift when logged in?
Permalink
Looking for advice on using in-page links in a way that isn't interferred with by the concrete5 edit bar.
Situation: I'm currently building pages with simple in-page anchor ("a name=") links that scroll down to sub-headings of the outline. The pages are meant to be used by people who are either logged in or not.
Problem: when logged in, using in-page links causes the concrete5 edit bar to cover whatever outline header is jumped to -- e.g. jumping to a named anchor next to an "h3" tag perfectly covers that heading, making it appear that the page jumped to the middle of the text.
I tried moving the anchors to compensate, but this approach has series drawbacks -- it requires either that anchors be put in unrelated blocks, or else undesirable white space be added to the composition. In either case, the jumping then doesn't work right for the logged-out case.
My proposed solution is to add CSS that only affects logged-in users, and shifts the location of named anchors up by the height of the edit bar. My questions:
- Has anyone tried this, or other approaches to this problem?
- Where is the best place to add logged-in-only CSS to concrete5? (either the base or the default theme).
Situation: I'm currently building pages with simple in-page anchor ("a name=") links that scroll down to sub-headings of the outline. The pages are meant to be used by people who are either logged in or not.
Problem: when logged in, using in-page links causes the concrete5 edit bar to cover whatever outline header is jumped to -- e.g. jumping to a named anchor next to an "h3" tag perfectly covers that heading, making it appear that the page jumped to the middle of the text.
I tried moving the anchors to compensate, but this approach has series drawbacks -- it requires either that anchors be put in unrelated blocks, or else undesirable white space be added to the composition. In either case, the jumping then doesn't work right for the logged-out case.
My proposed solution is to add CSS that only affects logged-in users, and shifts the location of named anchors up by the height of the edit bar. My questions:
- Has anyone tried this, or other approaches to this problem?
- Where is the best place to add logged-in-only CSS to concrete5? (either the base or the default theme).
Thank so much for the link, this was exactly the discussion I was looking for.
The strange thing is, Concrete5 *already* dynamically shifts the site down for the edit bar -- it just doesn't seem to affect the scroll-to behavior of named links, which scroll to the area under the bar (I'm assuming that's just a browser behavior that can't be overridden). I think I may end up using a combination of what you linked, and the solution I originally proposed (offsetting the position of named anchors higher than their contents by a bar-width)... but we'll see.
I'll be interested to hear if others have this specific niggling problem (that named anchors scroll to the top of the screen, not the top-minus-bar). It seems to exist in Plain Yogurt out-of-the-box, and perhaps this calls for a general C5 edit mode solution snippet....
The strange thing is, Concrete5 *already* dynamically shifts the site down for the edit bar -- it just doesn't seem to affect the scroll-to behavior of named links, which scroll to the area under the bar (I'm assuming that's just a browser behavior that can't be overridden). I think I may end up using a combination of what you linked, and the solution I originally proposed (offsetting the position of named anchors higher than their contents by a bar-width)... but we'll see.
I'll be interested to hear if others have this specific niggling problem (that named anchors scroll to the top of the screen, not the top-minus-bar). It seems to exist in Plain Yogurt out-of-the-box, and perhaps this calls for a general C5 edit mode solution snippet....
http://www.concrete5.org/community/forums/chat/background-shift-tri...