Topic on Skin talk:Chameleon

Hi Friends,

Is it possible to put the TOC (table of content) in a <div> that stays fix while scrolling?

Like what you can see in this page: http://getbootstrap.com/components/

Do you know how can I do that using Chameleon?

Thanks

There is no component that could do this for all pages right now. If you only need it for a few pages, here is a workaround that kinda works (with some caveats):

First you'll need some Javascript. Add the following to your LocalSettings.php:

$wgHooks['ParserAfterParse']['addModules']=function( Parser &$parser, &$text, StripState &$stripState ){
	$parser->getOutput()->addModuleScripts( 'skin.chameleon.jquery-sticky' );
	return true;
};

Then all pages that should have a sticky TOC should have the following structure:

<div class="row">
<div class="sticky col-lg-3 pull-right">__TOC__</div>
<div class="col-lg-9">
YOUR PAGECONTENT HERE
</div>
</div>

I did not test what happens when you use this on mobile devices. And it does not play nice with stickyhead and fixedhead layouts.

I added this as an enhancement request: https://github.com/cmln/chameleon/issues/29

However, I am currently very slowly updating Chameleon to Bootstrap 4, so better do not hold your breath. It may take some time to add any new components.

Thanks a lot. It works for me! :)

Do you know if it's possible to add the class="active" to the TOC item while scrolling.

The idea is to add style to the menu item that is activated while scrolling. In the same way that the bootstrap website: http://getbootstrap.com/components/

Thanks.

Depends on how much coding you are prepared to do. It should not be too hard to create some JS script to do this. A widget might do the trick, but I don't have any experience with widgets at all, so can't help you there. If I had to do it, I would probably just implement it as a mini extension using the ResourceLoader to load the script.

Of course, you could ideally also add this to Chameleon directly and provide a pull request on Github.