Topic on Project:Support desk

In my Custom Skin I have MediaWIki's search field in my navigation bar.

Now this navigation bar uses jQuery to stick to the top of the Browser window when you scroll down the page. This is so my visitors have easy access to the site's navigation and search field even if the they scroll down a wiki page.

However, the search suggestion results don't move along with this 'sticky' navigation bar. (See pic)

This happens because the suggestions element is appended at the end of the HTML document, right before the closing </body> tag.

Is it possible to move this auto-appended code to right after the search input box? Or are there any extensions that replaces MediaWiki's search bar with one that does append it's autocomplete after the search input box?

I have two ideas on this issue:

If I got you right, then the container, which now is displayed too low, should always start at the same position inside the viewport. Wouldn't it help to set its position" to "fixed" with CSS?

As for moving the place, in which the container is inserted inside the HTML code, I think this should be possible with just a few lines of jQuery JavaScript. jQuery offers the functions .appendTo() nd .preprendTo(), which allow you to move a container to a different place. This script would always be executed, if you put it into a/the ResourceLoader module, which your skin is/may be using.

For adjusting the place inside the HTML code, there may theoretically be a hook, which might allow you to modify the place before MediaWiki inserts the container at the "wrong" place. However, I don't know that.

@87.123.10.144

Thanks for the input! I managed to get it working how I want by editing some core code. More specifically, I did the following:

in "/mediawiki/resources/src/jquery/jquery.suggestions.js"

First I changed where the Search Results form is appended into the document. Search for:

.appendTo( $( 'body' ) );

And replace body with the class you want the suggestions element to be INSIDE of.

.appendTo( $( '.navigationBar' ) );

After that I ran into another issue. jQuery was adding additional inline CSS styles to the suggestions box, giving it an absolute positioning on the page, which made scrolling the page move around the element.

What I did was simply editing the lines where that happened and giving each of the inline styles an 'auto' value.

Search for

newCss.

and edit the values to your needs.

I'm unsure why MediaWiki makes everything so hard when it doesn't need to be... Makes customizing it a real pain in the ass. I guess I shouldn't complain since they've done a great job building MediaWiki, but man, is it frustrating sometimes!

That will break all other suggestions used throughout mediawiki, such as the search page, and various special pages.

Ouch.. Hadn't thought of that. I'll have to add a check to see which search form is used... I'll report back when I find a soluton.

So this is quite a quick and dirty fix.

Again, in "/mediawiki/resources/src/jquery/jquery.suggestions.js" I added an If / Else statement to determine if the Search page was being shown or not, and then created a variable where the containing Suggestions element is decided.

		if ( $( "#mw-search-top-table" ).length ) {			
			var searchLocation = '#mw-search-top-table';	
		} else {		
			var searchLocation = '.navigationBar';
		}

Then I simply edited the .appendTo function to include this variable.

.appendTo( $( searchLocation ) );

Lastly, you want to disable the Search field in the navigation bar for that page. I did this by adding the following check to my Template file:

if ( substr($this->getSkin()->getTitle(), 0, strlen('Special:Search')) !== 'Special:Search' ) { // Checks if page title is NOT Special:Search
	// Display Search in navgationBar
}

Editing Core files is evil. Don't do it! You should better do that correctly:

Add a JavaScript file to your skin, in which you move the container accordingly. Then integrate that JavaScript file into the ResourceLoader module of your skin.

For an example, see the Vector skin, which defines some scripts in the ResourceLoader section of skin.json.

I tried this as my first option, but the issue is that MediaWiki keeps adding CSS in the suggestions element on every 'action' like clicking, focusing etc. This makes it especially tricky to set it's position and honestly, it just feels like a bad solution to keep overwriting MediaWiki's odd behavior. My MediaWiki installation is already highly customized, so I have just accepted that I'll have to edit the core files to achieve my goals.