HTML & CSS tutorials
5. Notes in running text

Note: While reading this page, bear in mind that although I have some experience of writing HTML and CSS I'm no expert. If you find errors or have proposals for improvements, please send me a message and help make this a better page for the benefit of future visitors. If you're new to or not that experienced in HTML and CSS, I suggest you go to the Introduction page and follow the instructions. To the left, there are links to more HTML and CSS tutorials.


Want to put notes in the running text of your web pages? Notes that are hidden at first? Notes that become visible when a link is clicked upon? Notes that appear right after those parts of the running text the notes are amendments to? Notes that require very little coding but still works as they should?

I know I wanted to do these things from the moment I started writing web pages a few years ago.

After many fruitless google searches and more or less flawed attempts of my own, I finally came up with a solution I think works well enough to use for real.

First, a working example, that you can try if you like before you copy and paste the code below and start experimenting on you own:

Click on [1] to see the note and to hide the note. [1] This is just a sample note. Real notes can be found on several pages on this site, for example on the pages Start and Links.

Instructions

To complete this tutorial, follow these instructions:

1. Open a new empty document with Notepad++ or some other text editor.

2. Write or copy this code to the document:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add title here</title>
<script type="text/javascript">
function noteInline(id)
{
  if (document.getElementById(id).style.display == 'inline')
  {
    document.getElementById(id).style.display = 'none';
  }
  else
  {
    document.getElementById(id).style.display = 'inline';
  }
  return false;
}
</script>
<style type="text/css">
<!--
body
{
  cursor:pointer;
}
a
{
  color:blue;
}
.noteInline
{
  background:rgb(224,240,255); display:none; padding:0.2em;
}
-->

</style>
</head>

<body>
<p>Click on [1] to see the note and to hide the note. <a onclick="noteInline('note1')">[1]</a> <span id="note1" class="noteInline"> This is just a sample note.</span></p>
</body>
</html>

3. Save the document as notes.html (or whatever as long as the extension is html).

4. Open the file in a browser and check that the note works as the notes on this page.

More important comments

First, two rules you MUST follow:

If you don't follow these two rules, the notes won't show, and you will get error messages.

Less important comments

I have very little experience in writing javascript, so there probably are better ways to write the javascript code.

I added css rules for the properties a and body just to make the page look and behave somewhat nicer. You can change or remove these rules if you like. As long as you more or less know what you're doing, the showing and hiding of notes will still work.

For the note, I used the same background color and padding as I use on this site. Naturally, there are many other possibilities.

The javascript code and the CSS code should be in external files, but in a tutorial like this I think it's better to put all the code in the same file.


Would you like to comment on this page or some other page? Use the contact form. Write the title of the page you want to comment on and your comment in the field Message.