Ordered list inside ordered list

Discussion in 'Javascript' started by DL, Nov 9, 2009.

  1. DL

    DL Guest

    I'm wondering if there's a way to support ordered list inside an
    ordered list. In other words, the ability to create multi-level
    structures such as
    1. Products
    1.1 Pen
    1.2 Computer
    1.n Food

    2. Users
    2.1 Generic consumers
    2.2 College students
    2.n ...

    3 Comments
    ....

    Browsers: IE7? IE8? Firefox 3.5?

    I've tried to even create the second level manually, e.g.
    1.1, bla bla,
    1.2 more bla bla.
    Had some success with Firefox 3.5 two nights ago but completely out of
    luck with IE7, tried Firefox again today but failed. The web page
    uses frame with execCommand of InsertOrderList.

    Thanks.
     
    DL, Nov 9, 2009
    #1
    1. Advertising

  2. DL

    SAM Guest

    Le 11/9/09 1:22 AM, DL a écrit :
    > I'm wondering if there's a way to support ordered list inside an
    > ordered list. In other words, the ability to create multi-level
    > structures such as
    > 1. Products
    > 1.1 Pen
    > 1.2 Computer
    > 1.n Food
    >
    > 2. Users
    > 2.1 Generic consumers
    > 2.2 College students
    > 2.n ...
    >
    > 3 Comments
    > ...
    >
    > Browsers: IE7? IE8? Firefox 3.5?
    >
    > I've tried to even create the second level manually, e.g.
    > 1.1, bla bla,
    > 1.2 more bla bla.
    > Had some success with Firefox 3.5 two nights ago but completely out of
    > luck with IE7, tried Firefox again today but failed. The web page
    > uses frame with execCommand of InsertOrderList.


    I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
    but ... not for IE (6 or 7) (8 maybe ?)


    <style type="text/css">
    ol li { counter-increment: compteur; }
    ol ol li {
    counter-increment: sub_compteur;
    list-style: none;
    }
    ol ol li:before {
    display: marker;
    content: counter(compteur)"."counter(sub_compteur)" ";
    }
    </style>
    <ol>
    <li>item 1
    <ol>
    <li>sub-item 1.1
    <li>sub-item 1.2
    </ol>
    </li>
    <li>item 2
    <ol>
    <li>sub-item 2.1
    <li>sub-item 2.2
    </ol>
    </li>
    </ol>


    --
    sm
     
    SAM, Nov 9, 2009
    #2
    1. Advertising

  3. DL

    DL Guest

    On Nov 8, 9:23 pm, SAM <>
    wrote:
    > Le 11/9/09 1:22 AM, DL a écrit :
    >
    >
    >
    > > I'm wondering if there's a way to support ordered list inside an
    > > ordered list.  In other words, the ability to create multi-level
    > > structures such as
    > > 1. Products
    > >    1.1 Pen
    > >    1.2 Computer
    > >    1.n Food

    >
    > > 2. Users
    > >    2.1 Generic consumers
    > >    2.2 College students
    > >    2.n ...

    >
    > > 3  Comments
    > > ...

    >
    > > Browsers: IE7?  IE8? Firefox 3.5?

    >
    > > I've tried to even create the second level manually, e.g.
    > >   1.1, bla bla,
    > >   1.2 more bla bla.
    > > Had some success with Firefox 3.5 two nights ago but completely out of
    > > luck with IE7, tried Firefox again today but failed.  The web page
    > > uses frame with execCommand of InsertOrderList.

    >
    > I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
    > but ... not for IE (6 or 7) (8 maybe ?)
    >
    > <style type="text/css">
    > ol li { counter-increment: compteur; }
    > ol ol li {
    >    counter-increment: sub_compteur;
    >    list-style: none;
    >    }
    > ol ol li:before {
    >     display: marker;
    >     content: counter(compteur)"."counter(sub_compteur)" ";
    >   }
    > </style>
    > <ol>
    >         <li>item 1
    >                 <ol>
    >                         <li>sub-item 1.1
    >                         <li>sub-item 1.2
    >                 </ol>
    >         </li>
    >         <li>item 2
    >                 <ol>
    >                         <li>sub-item 2.1
    >                         <li>sub-item 2.2
    >                 </ol>
    >         </li>
    > </ol>
    >
    > --
    > sm


    Interesting. I'll check it out. Thanks, Sam.
     
    DL, Nov 9, 2009
    #3
  4. DL

    RobG Guest

    On Nov 9, 12:29 pm, DL <> wrote:
    > On Nov 8, 9:23 pm, SAM <>
    > wrote:
    >
    >
    >
    > > Le 11/9/09 1:22 AM, DL a écrit :

    >
    > > > I'm wondering if there's a way to support ordered list inside an
    > > > ordered list.  In other words, the ability to create multi-level
    > > > structures such as
    > > > 1. Products
    > > >    1.1 Pen
    > > >    1.2 Computer
    > > >    1.n Food

    >
    > > > 2. Users
    > > >    2.1 Generic consumers
    > > >    2.2 College students
    > > >    2.n ...

    >
    > > > 3  Comments
    > > > ...

    >
    > > > Browsers: IE7?  IE8? Firefox 3.5?

    >
    > > > I've tried to even create the second level manually, e.g.
    > > >   1.1, bla bla,
    > > >   1.2 more bla bla.
    > > > Had some success with Firefox 3.5 two nights ago but completely out of
    > > > luck with IE7, tried Firefox again today but failed.  The web page
    > > > uses frame with execCommand of InsertOrderList.

    >
    > > I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
    > > but ... not for IE (6 or 7) (8 maybe ?)

    >
    > > <style type="text/css">
    > > ol li { counter-increment: compteur; }
    > > ol ol li {
    > >    counter-increment: sub_compteur;
    > >    list-style: none;
    > >    }
    > > ol ol li:before {
    > >     display: marker;
    > >     content: counter(compteur)"."counter(sub_compteur)" ";
    > >   }
    > > </style>
    > > <ol>
    > >         <li>item 1
    > >                 <ol>
    > >                         <li>sub-item 1.1
    > >                         <li>sub-item 1.2
    > >                 </ol>
    > >         </li>
    > >         <li>item 2
    > >                 <ol>
    > >                         <li>sub-item 2.1
    > >                         <li>sub-item 2.2
    > >                 </ol>
    > >         </li>
    > > </ol>

    >
    > > --
    > > sm

    >
    > Interesting.  I'll check it out.  Thanks, Sam.


    It really is a CSS question:

    <URL: http://www.w3.org/TR/CSS21/generate.html#scope >

    You may want to ask in comp.infosystems.www.authoring.stylesheets:

    <URL: http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets?lnk=
    >


    The Google Group interface is swamped by spam (thanks Google).


    --
    Rob
     
    RobG, Nov 9, 2009
    #4
  5. DL

    SAM Guest

    Le 11/9/09 3:29 AM, DL a écrit :
    > On Nov 8, 9:23 pm, SAM <>
    > wrote:


    >> I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
    >> but ... not for IE (6 or 7) (8 maybe ?)

    >
    > Interesting. I'll check it out. Thanks, Sam.


    As it is only a question of CSS
    this page example :
    <http://cjoint.com/data/ljnTuMlbC1_ordered-list_ol_ie.htm>
    seems to work fine on most modern browsers and IE8
    For IE<8, it would have to show something acceptable.
    Tests, windows and linux for some browsers:
    <http://browsershots.org/http://cjoint.com/data/ljmBhYPveV_ordered-list_ol_ie.htm>

    --
    sm
     
    SAM, Nov 9, 2009
    #5
  6. DL

    DL Guest

    On Nov 8, 9:23 pm, SAM <>
    wrote:
    > Le 11/9/09 1:22 AM, DL a écrit :
    >
    >
    >
    > > I'm wondering if there's a way to support ordered list inside an
    > > ordered list.  In other words, the ability to createmulti-level
    > > structures such as
    > > 1. Products
    > >    1.1 Pen
    > >    1.2 Computer
    > >    1.n Food

    >
    > > 2. Users
    > >    2.1 Generic consumers
    > >    2.2 College students
    > >    2.n ...

    >
    > > 3  Comments
    > > ...

    >
    > > Browsers: IE7?  IE8? Firefox 3.5?

    >
    > > I've tried to even create the second level manually, e.g.
    > >   1.1, bla bla,
    > >   1.2 more bla bla.
    > > Had some success with Firefox 3.5 two nights ago but completely out of
    > > luck with IE7, tried Firefox again today but failed.  The web page
    > > uses frame with execCommand of InsertOrderList.

    >
    > I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
    > but ... not for IE (6 or 7) (8 maybe ?)
    >
    > <style type="text/css">
    > ol li { counter-increment: compteur; }
    > ol ol li {
    >    counter-increment: sub_compteur;
    >    list-style: none;
    >    }
    > ol ol li:before {
    >     display: marker;
    >     content: counter(compteur)"."counter(sub_compteur)" ";
    >   }
    > </style>
    > <ol>
    >         <li>item 1
    >                 <ol>
    >                         <li>sub-item 1.1
    >                         <li>sub-item 1.2
    >                 </ol>
    >         </li>
    >         <li>item 2
    >                 <ol>
    >                         <li>sub-item 2.1
    >                         <li>sub-item 2.2
    >                 </ol>
    >         </li>
    > </ol>
    >
    > --
    > sm


    No luck with the above. Neither Firefox 3.5 nor IE7 on an XP prof
    box. The list was created via frame with execCommand of
    InsertOrderList. Or I didn't know the correct way for your above
    approach, it can't be hard coded stuff since my interface is part of a
    tool.
     
    DL, Nov 21, 2009
    #6
  7. In comp.lang.javascript message <79444cdd-5297-4aa5-bd8f-3a574c389cac@m1
    6g2000yqc.googlegroups.com>, Sun, 8 Nov 2009 16:22:16, DL
    <> posted:
    >
    >I'm wondering if there's a way to support ordered list inside an
    >ordered list. In other words, the ability to create multi-level
    >structures such as
    >1. Products
    > 1.1 Pen
    > 1.2 Computer
    > 1.n Food
    >
    >2. Users
    > 2.1 Generic consumers
    > 2.2 College students
    > 2.n ...
    >
    >3 Comments
    >...


    To do that with CSS you should ask in a CSS newsgroup, maybe in
    comp.infosystems.www.authoring.*.

    It should be easy enough using JavaScript :

    <div class=XXX>
    <div>Products
    <div>Pen</div>
    <div>Computer</div>
    <div>Food</div>
    </div>
    <div>Users
    <div>Generic consumers</div>
    <div>College students</div>
    <div>...</div>
    </div>
    <div>Comments
    <div>...</div>
    </div>
    </div>

    Onload JavaScript searches for class XXX then proceeds to walk the
    contained element tree, keeping track of the situation and adding the
    necessary numbering. You could hand-write dots to represent the
    numbers; then the source would look somewhat more like the display.

    If your entries are not simple text, then you may want to class the
    inner DIVs, to help identification.

    OR : use in the source <UL> <LI> throughout, with CSS to remove the
    bullets; and make the script insert the numbers in those.

    Untested.

    --
    (c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
    Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)
     
    Dr J R Stockton, Nov 21, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Newbie
    Replies:
    1
    Views:
    526
    Andrew Thompson
    Apr 7, 2004
  2. Arvind Ganesan

    ordered list (OL) tag with tables

    Arvind Ganesan, Sep 6, 2003, in forum: HTML
    Replies:
    10
    Views:
    10,525
    Nico Schuyt
    Sep 6, 2003
  3. Replies:
    3
    Views:
    2,164
  4. Replies:
    3
    Views:
    3,551
    Toby Inkster
    Apr 5, 2006
  5. michael Rogowski

    Searching Point x/y in a ordered List

    michael Rogowski, Jul 22, 2004, in forum: C++
    Replies:
    1
    Views:
    466
    Victor Bazarov
    Jul 22, 2004
Loading...

Share This Page