Tag Archives: javascript

Inserting Paragraph Numbering

One of the idiosyncrasies of the public sector is that paragraphs in documents such as press releases are numbered. Rather than code entire press releases in ordered lists when paragraph tags are a better choice semantically, I opted to use javascript to insert paragraph numbers.

Fellow blogger Divya Manian;
was kind enough to contribute a slice of javascript for this purpose, given that my own javascript skills are non-existent.

// contributed by Divya Manian (http://nimbupani.com/)

function insertParaNumbers () {
var paradiv = document.getElementById('media-body');
var paras = paradiv.getElementsByTagName('p');
j = paras.length;

for(var i = 0; i < j ; i++ )
lineno = i+1;
insertvalue = "<span class='lineno'>"+lineno+"</span>";
paras[i].innerHTML = insertvalue+paras[i].innerHTML;

window.onload = insertParaNumbers

Problem is, paragraphs within #media-body that fall under lists (ordered or unordered) do not need the insertion of paragraph numbers. How would you exclude these paragraphs from the loop?

I tried to use Prototype’s childElements to define paradiv as only children and not grandchildren of #media-body. Didn’t manage to get it to work.


Non-javascript Navigation

We finally solved the navigation problem. Though the number of users who have CSS-enabled but javascript disabled is small, untangling this dead-end was a priority for us because it is one of the basic guidelines for good accessibility.

The Solution

The current navigation needed javascript to function, so we wrapped a <script> tag around it and had it generated via a document.write. We added a <noscript> underneath it that called a server-side include for a non-javascript version of the navigation. Clicking on the roles without javascript enabled now brings you to separate websites housing the links you’d get from the slidedown menu.

It took a while to shift pieces of code for reusability’s sake, but I’m glad we got this out of the way.