Thread:Mathmagician/@comment-93604-20120509230753/@comment-4674838-20120513010237

Okay, I've gotten it working in Monobook. Looks good in Chrome, CSS needs a bit of refinement though for Firefox. Also I made a small tweak to the Oasis CSS (Show Thread button needed to be wider) and rewrote createButton.

Edit: Before doing this, I always assumed that .prepend and .before did exactly the same thing. I learned the hard way that that is not the case... $(function {	if (!$('#WikiaArticleComments').length) return;

var buttonTexts = { toggleComment: { true: 'Hide Post', false: 'Show Post' },			toggleUser: { true: 'Hide User', false: 'Show User' },			toggleThread: { true: 'Hide Thread', false: 'Show Thread' }	};

if (skin == "monobook") { // Set container position to relative so that absolute positioning // works properly for the buttons in Monobook $('.speech-bubble-message').css('position', 'relative'); // Monobook CSS $('head').append(		'' +		'.threadButton { ' +			' display: none; float: none !important; position: absolute; top: -9px;' +			' margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 11px;' +			' height: 16px; width: 75px; line-height: 15px; left: 15px; cursor: pointer;' +		'}' +		'.toggleUser {' +			' left: 105px;' +		'}' +		'.toggleThread {' +			' left: 195px;' +		'}' +		'.speech-bubble-message:hover .threadButton {' +			' display: block;' +		'}' +			'.threadButton:hover {' +			' display: block; width: 81px; height: 20px; top: -11px;'+			' line-height: 19px; margin-left: -3px' +		'}' +		' '); } else { // Oasis CSS $('head').append(		'' +		'.threadButton { ' +			' display: none; float: none !important; position: absolute; top: -5px;' +			' margin: 0; padding: 0; font-size: 11px; height: 16px; width: 90px;' +			' line-height: 15px;' +		'}' +		'.toggleUser {' +			' left: 115px;' +		'}' +		'.toggleThread {' +			' left: 215px;' +		'}' +		'.speech-bubble-message:hover .threadButton {' +			' display: block;' +		'}' +			'.threadButton:hover {' +		' display: block; width: 91px; height: 20px; top: -7px;'+			' line-height: 19px; margin-left: -3px' +		'}' +		' '); }	// Rewritten function createButton (className) { return '' + buttonTexts[className][true] + ' ';	}	// Rewritten $('.article-comm-text', '#article-comments-ul') .before(createButton('toggleComment') + createButton('toggleUser') + createButton('toggleThread'));

$('.threadButton', '#article-comments-ul') .data({		on: true,	}) .click(function {		var on = !$(this).data('on');		$(this).data('on', on)		.text(function  { for (var i in buttonTexts) { if ($(this).hasClass(i)) { return buttonTexts[i][on]; }			}		})		.trigger('toggle');	});

$('.toggleThread', '#article-comments-ul') .on('toggle', function {		console.log( ($(this).data('on') ? 'showing' : 'hiding') + ' thread' );	});

$('.toggleUser', '#article-comments-ul') .on('toggle', function {		console.log( ($(this).data('on') ? 'showing' : 'hiding') + ' user' );	});

$('.toggleComment', '#article-comments-ul') .on('toggle', function {		console.log( ($(this).data('on') ? 'showing' : 'hiding') + ' post' );	}); });