Documentation

Documentation

What I am trying to do here is to add a box around quoted text and add a link to the source which can be followed if the visitor clicks on the text.

This is an example of a paragraph tag within a div tag

Javascript and CSS

The main reason for this page was to tie-in my pages on Javascript and CSS with a better means of documenting the code snippets.

I have defined a class called "syntax"

It can be appled to a div as I have here.

The div can have any content and I can also mix it with my quote class

  • Like lists
  • Item 2

The syntax class has a border of 1px and a width of 80%, a left margin of 30px and an auto overflow so it displays a scroll bar if the text gets too wide

I have even worked out a way to add an eventhandler to the element with the class so that I can load another page (the source quoted or my page saying that the text is not my own.)

The class defintion for "syntax" and adding the event listener to the cited source: 

.syntax {color:red; border:1px solid black; padding: 2px;   background-color: #eee; padding:10px; width:80%; margin-left: 30px; overflow:auto; }

Adding an event listener:
<script>document.getElementById("test").addEventListener("click", function() { location.href = "quoted.html" }) ;</script>

Background

If I were an IT manager this would be one of the things that I would be looking for in a programmer. However, this aspect is something that you can pay a lot of lipservice to and at the end of the day it is often overlooked. There are many theories why this is the case, from lazyness to job security, but I think that the reason is a whole lot simpler. The quest is to get something to work and when you do you often just move on to the next task.

I find that documenting my own code helps me understand what is going on and I don't really care if it makes sense to others!If it does help others then all the better.

Using a Modal or popup for documetation

Modals and possibly a Timed Modal.

Choice of cursor

When styling and adding actions to documentation methods I am trying to establish a convention:

  • Help linking will have the cursor:help
  • Events to execute code will use cursor:cell
  • Quoted text - cursor:pointer - with hyperlink to quoted.html
  • Links to source of code - The default for select

Adding an EventListener

<script>document.getElementById("test").addEventListener("click", function() { location.href = "quoted.html" }) ;</script>

Quoting and documenting code using the W3 Framework

I am quite pleased the way that this works out.

" This is a quoted paragraph.
To get this to work on an "old" page I need to add the Framework css link and the override in the header section. "

Links

External Sources

Documentation - January 2021