Topic on Project:Support desk

I modified the vector skin using only css to add design with a fixed header and nav, only problem I am having is the links scroll to 0px which is behind the header. I have tried to adjust this with css but I am unable to get the scroll to go anywhere other than to 0px behind the header. Any thoughts would be appreciated.

Hi!

I assume you are speaking of the links inside the menu? Without seeing your skin with the modifications it is hard to say, but

• maybe you can fix that with a z-index?
• maybe you did a nesting with an absolutely positioned element, which causes other elements to behave unexpectedly

I always suggest using Firebug for Firefox to inspect the CSS and to see, which styles exactly are actually being used for the different elements. For me that has often been a great help!

Sorry I did not describe the issue that well. I am running current versions of everything. In place of the entire page scrolling I used fixed positioning to lock the header and left navigation in place, which keeps the clients logo and site navigation visible at all times. The page opens correctly positioned as expected and the content scrolls properly with the header and left navigation remaining in a fixed position.

The problem I am having is when I click a link, such as in the auto-generated contents index menu, and it scrolls to a section, the div content.mw-body scrolls to position at the top of the page as if the header was scrolled out of the way, it does not scroll to the position under the fixed header which is now 152px in height, This causes the correct heading to be hidden behind the fixed header. I cannot use a z-index as this will cause the content to appear on top of the fixed header. Everything I have tried to change using css has had no affect on the position the links scroll to, always 152px too far. Again, any thoughts are appreciated.

You say that you have set the header and the left menu at a fixed position. Now when you click a link, e.g. in the table of contents, then this section heading is scrolled to the top of the viewport. The content then ends up at the same place, where your fixed header is so that the content is partly invisible.

Basically this could be solved with an iframe, which sits directly below your fixed menu and all the content is in that iframe. Iframes are old techniques and I don't know how to get MediaWiki to put your stuff inside an iframe.

I thought about whether it might be possible to give mw-body a margin-top of additional 152px, however, this would also move it down, when you are at the top of the page, which is not wanted.

I think maybe it is possible to do that by using a mixture of fixed and absolue positions, but I currently don't know how: I think it does not help to position the body with an absolute position: It then would start at the right place, but when you scroll, it would still go below the header. Also using a fixed position for the content does not help, as you basically want the content to scroll through the viewport.

So you want the element to be positioned relatively or absolutely, but its margin-top should be positioned fixed. This will not work; at leat not when you want both with the same element.

Maybe it is possible to fix that with jQuery? When someone clicks a link to an anchor inside the content (inside .mw-body?), then let jQuery scroll the viewport these 152 pixels up so that the heading appears in the visible area.

You are correct but I cannot use an iframe with this project. I have gone through adjusting the top margins, creating an empty area below the header when the page loads, but the links still direct the anchor to the top of the viewport hidden by the fixed header.

It appears that the links anchor position is being set by script and scrolls it to the top of the viewport. I have yet to find where that is so I can offset it by the header height. Any input is appreciated.

No, I think the link anchors are IDs, which are always present. Is clicking the TOC even the deciding event? The fact that the content also starts being hidden when you just scroll down - without clicking a link - is no problem as it just does not matter that the top-part of the content is not visible then.

But I think that is a problem for any link, which leads to an anchor; either to one on the same page or to one on another page.

I would try this with jQuery: When you click a link inside .mw-body and this link leads to an anchor, then let jQuery move the viewport additional 152px down.

Yes you are correct, the anchors are ID's that are always present, the .mw-body is repositioning to place the anchor at the top of the viewport, and it does occur for any link to a topic. Links to other pages are positioned correctly unless directed to a topic on the page.

I am going to try and resolve this with jQuery as you suggested, maybe change the offset or add to the scroll position. I am trying to find where the click event is occuring for the vector skin and where I can capture it to change the scroll event across all pages. Any idea where to find this event?

You've got me there: I don't know how that can be achieved in code.

However, I can tell you which logic I would use:

I would try to do this based on a change in the URL: If the URL changes and if it contains an anchor, then scroll additional 152px down.

I did get this to work using jQuery.

Added a function to vector.js that watches clicks in #bodyContent, if it contained a hash it will grab the hash and animated a scrollTop: anchorTag.offset.top - 152

Easy enough and done. Thanks for the input.

Can you post the whole code, which you added to vector.js, please? I would like to know how that works as well! :-)

One further note: Instead of changing vector.js, which will get overwritten after each MediaWiki update, you should try, if it also works, if you add your code to the wiki page MediaWiki:Vector.js.

I was hoping to modify the click event that is already occurring, but I could not find it.

This code was added to the jQuery function of vector.js and is providing the results I needed. It adds an animated scroll and offsets the scrollTop position of the anchor.

$('div#bodyContent a').click(function(e) {
	if ($(e.target.hash)) {
		var hash = e.currentTarget.hash.substring(1);
		var anchorTag = $("span[id='" + hash + "']");
		$('html, div#content.mw-body').animate({
			scrollTop : anchorTag.offset().top - 152
		}, 250);
	}
});