SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict dbr's Avatar
    Join Date
    Aug 2006
    Location
    Tucked away in the mountains...
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Ordered Lists <ol> Counting order

    Is there any way to make an ordered list count from the bottom up instead of the top down? In other words: reverse the order. e.g.

    List:
    3. Third and last item entered in list
    2. Second Item
    1. First Item

    Instead of the typical:
    1. First Item
    2. Second Item
    3. Third and last item entered in list

    Thanks,
    Dave
    Last edited by dbr; Oct 1, 2006 at 11:22.
    "Three components make an entrepreneur:
    the person, the idea, and the resources to make it happen."
    Anita Roddick ~British entrepreneur
    dbr founder of: ProximityCast.com

  2. #2
    SitePoint Enthusiast icovey's Avatar
    Join Date
    Jul 2006
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dave,

    As far as I'm aware there's no way to do this using pure html or css.

    To ensure that the list stays dynamic you'll have to use a script.

    Cheers
    Cheers,
    Ian.

    7879 | Web Marketing Lichfield

  3. #3
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do this, though it is not that elegant just yet:
    http://johnwozniak.com/code-lab/list...-reversed.html

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In theory you can do this with CSS, but AFAIK only Opera supports it.
    Birnam wood is come to Dunsinane

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    In theory you can do this with CSS, but AFAIK only Opera supports it.
    You can reorder content with CSS? How?
    Simon Pieters

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I misread the question!
    <excuse type="lame">Monday morning</excuse>

    I thought it was only about changing the list numbering. Sorry.

    In theory, you might be able to achieve this with some creative use of position:relative, but it wouldn't be a general solution.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a simple document that reverses the order of a three-item list:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
      <title>Reverse List</title>
      <style type="text/css">
        li {position:relative; line-height:1.5}
        li:first-child {top:3em}
        li+li+li {bottom:3em}
      </style>
    </head>
    <body>
      <ol>
        <li>First item.</li>
        <li>Second item.</li>
        <li>Third item.</li>
      </ol>
    </body>
    </html>
    It won't work if the list items wrap over multiple lines, though.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Addict dbr's Avatar
    Join Date
    Aug 2006
    Location
    Tucked away in the mountains...
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question One question begets another

    I appreciate the all the input. The use would be for a list that perpetually grows. Rather than having to scroll to the bottom of the page to see the most recent item, it would appear at the top in a reverse order list.

    AutisticCuckoo, that is a pretty clever solution. Too bad the list can't continue to grow.

    Searching the internet, I've noticed I'm not the first to ask this question, so there is wider interest in this feature.

    NEXT QUESTION: Anyone know where one would start researching the specifications for CSS and petitioning to have a feature added?
    I do see a problem with how I'm assuming css works: FROM THE TOP DOWN, so any implementation would propably need a total number of list items in the <ol> tag. eg. <ol total="120"> and this number would have to be manually adjusted everytime another item was added to the list.
    "Three components make an entrepreneur:
    the person, the idea, and the resources to make it happen."
    Anita Roddick ~British entrepreneur
    dbr founder of: ProximityCast.com

  9. #9
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Have you thought about using a <dl>, using server side scripting to insert the numbers for you, and styling appropriately?

    HTML Code:
    <dl>
       <dt>3</dt>
       <dd>Item 3</dd>
       <dt>2</dt>
       <dd>Item 2</dd>
       <dt>1</dt>
       <dd>Item 1</dd>
     </dl>
    I know it isnt as good as if it did it automatically, but I've used it before when i wanted to alter the text in an ordered list (from '1' to 'Step 1'), and it works quite well.

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not so sure this is a 'feature' that should be added to CSS. You'd rely on styling, but what about those user agents that don't support CSS (not only Lynx, but also search engines). I think you should put your markup in the logical order, especially if you're using an OL which implies that the order has semantic meaning.

    What if this were to be added to CSS? Imagine a very big list with thousands of items. A user agent would then have to read through all of that (which can take some time on a slow connection) before it could start rendering anything. We'd be back to table performance (or the lack thereof).
    Birnam wood is come to Dunsinane

  11. #11
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if no one bothered to view my earlier post, but just to reiterate:
    Code:
    <h1>Cross Browser Reversed Ordered List</h1>
    
    <ol>
    <li value="3">Makes this list item number 3.</li>
    <li value="2">Makes this list item number 2.</li>
    <li value="1">Makes this list item number 1.</li>
    <li>Makes this list item number 2.</li>
    </ol>

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John, the original question said that the items should appear in order 1, 2, 3 in the markup, but be displayed in order 3, 2, 1.

    Besides, the value attribute for LI is deprecated.
    Birnam wood is come to Dunsinane

  13. #13
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird - that is not how I read this:
    Is there any way to make an ordered list count from the bottom up instead of the top down? In other words: reverse the order. e.g.

    List:
    3. Third and last item entered in list
    2. Second Item
    1. First Item
    Is this not just 1, 2, 3 reversed including the list item itself?

    The code in question appeared to validate to XHTML strict so I didn't see how it could be deprecated (as much as it looked like it should be).

    My fatal error here was relying/just looking at the Firefox Tidy Extension instead of the "real" validator - doh! I wish it behaved 100% the same .

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John Wozniak
    Is this not just 1, 2, 3 reversed including the list item itself?
    As you see, the first element says, 'Third and last item entered in list'. I take it that means that it's the last LI in the markup.

    Quote Originally Posted by John Wozniak
    The code in question appeared to validate to XHTML strict so I didn't see how it could be deprecated
    In the XHTML 1.0 Strict DTD, the declaration of the li element type is:
    Code:
    <!ELEMENT li %Flow;>
    <!ATTLIST li
      %attrs;
      >
    The attrs entity is defined as,
    Code:
    <!ENTITY % attrs "%coreattrs; %i18n; %events;">
    which expands to
    Code:
    <!ENTITY % coreattrs
     "id          ID             #IMPLIED
      class       CDATA          #IMPLIED
      style       %StyleSheet;   #IMPLIED
      title       %Text;         #IMPLIED"
      >
    
    <!ENTITY % i18n
     "lang        %LanguageCode; #IMPLIED
      xml:lang    %LanguageCode; #IMPLIED
      dir         (ltr|rtl)      #IMPLIED"
      >
    
    <!ENTITY % events
     "onclick     %Script;       #IMPLIED
      ondblclick  %Script;       #IMPLIED
      onmousedown %Script;       #IMPLIED
      onmouseup   %Script;       #IMPLIED
      onmouseover %Script;       #IMPLIED
      onmousemove %Script;       #IMPLIED
      onmouseout  %Script;       #IMPLIED
      onkeypress  %Script;       #IMPLIED
      onkeydown   %Script;       #IMPLIED
      onkeyup     %Script;       #IMPLIED"
      >
    As you can see, there is no value attribute in the Strict DTD. This is the same as for HTML 4.01 Strict, of course.
    Birnam wood is come to Dunsinane

  15. #15
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    As you see, the first element says, 'Third and last item entered in list'. I take it that means that it's the last LI in the markup.
    I was simply showing what would happen to the list item if a value was not placed on the 4th list item, not that the list should look like the example verbatim.

    As far as "value" being deprecated I never needed it so I didn't realize and I don't always remember to run in through the "full" validator" (usually don't need to fortunately).

    Most of what I have learned is not deprecated I have learned by using it/trying to use it and having the validator choke - so I will add this one to the list .

    When I really am in the mood for a "good yarn", I read the spec .

  16. #16
    SitePoint Addict dbr's Avatar
    Join Date
    Aug 2006
    Location
    Tucked away in the mountains...
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Sorry

    Quote Originally Posted by John Wozniak
    Not sure if no one bothered to view my earlier post, but just to reiterate:
    Code:
    <h1>Cross Browser Reversed Ordered List</h1>
    
    <ol>
    <li value="3">Makes this list item number 3.</li>
    <li value="2">Makes this list item number 2.</li>
    <li value="1">Makes this list item number 1.</li>
    <li>Makes this list item number 2.</li>
    </ol>
    Sorry, I did not give your eearlier post a better look. This may indeed do just what I'm interested in. On my post about changing css to add a reverse order I mentioned having to place the highest number in the initial tag e.g. <ol total="120"> which should preclude the problem
    Quote Originally Posted by AutisticCuckoo
    What if this were to be added to CSS? Imagine a very big list with thousands of items. A user agent would then have to read through all of that (which can take some time on a slow connection) before it could start rendering anything. We'd be back to table performance (or the lack thereof).
    Autistic Cuckoo brought up.

    It is not that much more trouble to add a new value= each time instead of updating <ol total=...>

    I'm going to give your suggestion a try. Thanks for posting and sorry I didn't pay closest attention previously.

    Dave

    ps Does indeed do what I want. Too bad it has been depreciated.
    Last edited by dbr; Oct 3, 2006 at 07:45. Reason: add a post script
    "Three components make an entrepreneur:
    the person, the idea, and the resources to make it happen."
    Anita Roddick ~British entrepreneur
    dbr founder of: ProximityCast.com

  17. #17
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, as someone said, it doesn't make sense semantically. An ordered list is axactly that - a list, in order. Not reverse order.

  18. #18
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider
    Not reverse order.
    Reverse is still an order though. Think of SQL: you can either order by ascending or descending.

  19. #19
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeh, I did think that actually. Maybe they need a dir="asc|desc" attribute for <ol> :P


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •