style ol before the counter?

@samohtOct 08.2007

Hello all,

I was wondering if there is a way to style a ol ( or ul ) that allows me to insert a word like: “Chapter” before the list counter?

(e.g.
Chapter 1. Blah blah.
Chapter 2. More blah blah.
etc.)

I know that I could insert and img before the counter – but why not text?
Also – I would like to use a non qsuedo-element method (ie. :before) since ie doesn’t like those.

Any Ideas?

to post a comment

CSS

13 Comments(s) _↴

@FangOct 08.2007 — #Generated content will work for supporting browsers, but for the rest JavaScript or a server side language is required.

@samohtauthorOct 08.2007 — #I could not get generated content to work in firefox actually before the counter - only after so the example above looked like:

1. Chapter Blah blah.

2. Chapter More blah.

Anyway, could you suggest a js tutorial?

@FangOct 09.2007 — #A bit of dom and a loop:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;generated content&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 window.onload=function() {
 var aLi=document.getElementsByTagName('li');
 for(var i=0; i&lt;aLi.length; i++) {
 aLi[i].firstChild.data='Chapter '+aLi[i].firstChild.data;
 }
 };
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ol&gt;
 &lt;li&gt;Introduction to JavaScript&lt;/li&gt;
 &lt;li&gt;Lexical Structure&lt;/li&gt;
 &lt;li&gt;Datatypes and Values&lt;/li&gt;
 &lt;/ol&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@samohtauthorOct 09.2007 — #Thanks for the reply,

When I tried out that code I got the same problem:

1. Chapter Introduction to JavaScript

2. Chapter Lexical Structure

3. Chapter Datatypes and Values

the "Chapter" shows up after the counter not before.

what I am trying to achieve is:

Chapter 1. Introduction to JavaScript

Chapter 2. Lexical Structure

Chapter 3. Datatypes and Values

does firstChild.data inlcude the counter? - or just the data contained between <li> and </li> ?

@FangOct 09.2007 — #The 'counter text' can not be accessed, so you must remove it and add it dynamically:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;generated content&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 window.onload=function() {
 var aLi=document.getElementsByTagName('li');
 for(var i=0; i&lt;aLi.length; i++) {
 aLi[i].firstChild.data='Chapter '+(i+1)+' '+aLi[i].firstChild.data;
 }
 };
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 ol {list-style-type:none;} 
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ol&gt;
 &lt;li&gt;Introduction to JavaScript&lt;/li&gt;
 &lt;li&gt;Lexical Structure&lt;/li&gt;
 &lt;li&gt;Datatypes and Values&lt;/li&gt;
 &lt;/ol&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@samohtauthorOct 09.2007 — #very cool!

Thanks for the help. - one last request here,

How can I add a period after the numbers?

@FangOct 09.2007 — #aLi[i].firstChild.data='Chapter '+(i+1)+'. '+aLi[i].firstChild.data;

@samohtauthorOct 09.2007 — #ok, actually I have one more question.

what is the call if I want to only add this to a certain ol ??

do I need to add an id to the <li> or a class to the <ol>?

@samohtauthorOct 09.2007 — #also, I noticed that if you have another tag inside the <li> tag (like and <a> or a <h2> or whatever) the code wont work.

I tried adding an 'a':

var aLi=document.getElementsByTagName('li','a');

but this does not work?

@FangOct 09.2007 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;generated content&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 window.onload=function() {
 var aLi=document.getElementById('chapters').getElementsByTagName('li'); //specific ol 
 for(var i=0; i&lt;aLi.length; i++) {
 var oSpan=document.createElement('span');
 oSpan.appendChild(document.createTextNode('Chapter '+(i+1)+'. ')); // added text
 aLi[i].insertBefore(oSpan, aLi[i].firstChild);
 }
 };
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 ol {list-style-type:none;} 
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ol id="chapters"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Introduction to JavaScript&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Lexical Structure&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Datatypes and Values&lt;/a&gt;&lt;/li&gt;
 &lt;/ol&gt;
 &lt;/body&gt;
 &lt;/html&gt;

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

@samohtauthorOct 09.2007 — #Fang,

Thanks for all the help.

I do have another issue though now that you have solved everything else for me ?

the list I making is for a table of contents and I have nested ul's inside each chapter like:

Chapter 1. Introduction to JavaScript
   The basics.
   Where it began
  Chapter 2. Lexical Structure
   What it's not.
   What it is.
  Chapter 3. Datatypes and Values

since my ul is nested inside the <ol id="chapters"> all of its <li>'s also get a Chapter i++ prefix

How can I turn that off?

@FangOct 09.2007 — #Moving the goalpost :mad:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;generated content&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 window.onload=function() {
 var aLi=document.getElementById('chapters').getElementsByTagName('li'); //specific ol 
 var chapterCount=1;
 for(var i=0; i&lt;aLi.length; i++) {
 if(aLi[i].parentNode.nodeName=='OL') {
 var oSpan=document.createElement('span');
 oSpan.appendChild(document.createTextNode('Chapter '+(chapterCount++)+'. ')); // added text
 aLi[i].insertBefore(oSpan, aLi[i].firstChild);
 }
 }
 };
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 ol {list-style-type:none;} 
 &lt;/style&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;ol id="chapters"&gt;
 &lt;li&gt;&lt;a href="#"&gt;Introduction to JavaScript&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;The basics.&lt;/li&gt;
 &lt;li&gt;Where it began&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Lexical Structure&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;What it's not.&lt;/li&gt;
 &lt;li&gt;What it is.&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Datatypes and Values&lt;/a&gt;&lt;/li&gt;
 &lt;/ol&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Read and learn

@samohtauthorOct 09.2007 — #Thanks for all the help and the links!!

Also in #CSS _↴

css placement / jscript rollovers? help!!How do you make text size changes by pointing to a corresponding stylesheet?How to create box with data in it from design

Success!

Help @samoht spread the word by sharing this article on Twitter...

Tweet This

style ol before the counter?

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

style ol before the counter?

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴