To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Jamie Balfour'sPersonal blog

When I first released my website, there were occasional pages with expletives within them but as my website became more and more public and eventually used within my role as a teaching assistant I had to make the decision - remove them all or just hide them.

At first, the latter appealed to me more. I developed a JavaScript (using jQuery) script that would simply hide the words and show them when the user hovers over the word. I have since decided to remove this in favour of removing the words altogether but I thought I'd share my original code with you:

//Swear words
if (showSwearing) {
	jQuery(".swear").mouseenter(function() {
		var sword = jQuery(this).attr("data-sword");
		var nword = jQuery(this).html();
		jQuery(this).attr("data-nword", nword);
	.mouseleave(function() {
		var m = jQuery(this).attr("data-nword");

This very simple script works on the basis that each word contains an nword (normal word) and sword (swear word) set in the data attributes on the span element that contains the word. As I say, it's a simple little implementation that works well enough for the job, but you could do it quite easily with CSS.

BalfBar has had a significant improvement to make it even easier to get your website the way you want it. You can now forget about setting the height when BalfBar becomes a fixed menu - it figures it out itself. Now all you need to do is tell it you want it to check for this and it will make the decision as to when to float the menu.

On top of this, a significant chunk of JavaScript has been removed from the core, making it much more streamlined and lighter. Suggestions for future versions can still be made on my website.

Posted by jamiebalfour04 in BalfBar
Powered by DASH 2.0 (beta)
Code previewClose