Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 725005eead49aa97c8968e80041d81928c2f96b8 @impressivewebs committed Dec 1, 2011
Showing with 146 additions and 0 deletions.
  1. +7 −0 README.md
  2. +97 −0 index.html
  3. +42 −0 js/script.js
@@ -0,0 +1,7 @@
+# [HTML5 Reverse Ordered Lists (Polyfill)](http://www.impressivewebs.com/html5-reverse-ordered-lists/)
+
+A polyfill that adds support for reverse ordered list. See:
+
+http://blog.whatwg.org/reverse-ordered-lists
+
+http://dev.w3.org/html5/spec/Overview.html#the-ol-element
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>HTML5 Reversed Ordered Lists (Polyfill)</title>
+
+<style type="text/css">
+body {
+ color: #555;
+ font-family: Georgia, "Times New Roman", serif;
+ line-height: 1.5;
+}
+
+h1 {
+ font-family: Arial, sans-serif;
+ font-size: 1.5em;
+ color: #555;
+}
+</style>
+</head>
+
+<body>
+<h1>PolyFill for HTML5's Reverse Ordered Lists</h1>
+
+<p>See: <a href="http://blog.whatwg.org/reverse-ordered-lists">Reverse Ordered Lists</a> and: <a href="http://dev.w3.org/html5/spec/Overview.html#the-ol-List item">The <code>ol</code> List item</a></p>
+
+<p>(The list below is just a normal reversed list)</p>
+
+<ol reversed>
+ <li>List item one
+ <li>List item two
+ <li>List item three
+</ol>
+
+<p>(The list below has two nested lists; one reversed, one not)</p>
+
+<ol reversed>
+ <li>List item one
+ <li>List item two
+
+ <ol reversed>
+ <li>Nested one
+ <li>Nested two
+ <li>Nested three
+ <li>Nested four
+ </ol>
+
+ <li>List item three
+ <li>List item four
+ <li>List item five
+
+ <ol>
+ <li>Nested one
+ <li>Nested two
+ <li>Nested three
+ <li>Nested four
+ </ol>
+
+ <li>List item six
+ <li>List item seven
+</ol>
+
+<p>(No "reversed" on the list below)</p>
+
+<ol>
+ <li>List item one
+ <li>List item two
+ <li>List item three
+ <li>List item four
+</ol>
+
+<p>(The list below has a "start" attribute)</p>
+
+<ol reversed start=435>
+ <li>List item one
+ <li>List item two
+ <li>List item three
+ <li>List item four
+ <li>List item five
+ <li>List item six
+</ol>
+
+<p>(The list below uses XHTML syntax for the "reversed" attribute)</p>
+
+<ol reversed="reversed">
+ <li>List item one
+ <li>List item two
+ <li>List item three
+ <li>List item four
+ <li>List item five
+ <li>List item six
+</ol>
+
+<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
+<script src="js/script.js"></script>
+</body>
+</html>
@@ -0,0 +1,42 @@
+$(function(){
+ // run the code on each ordered list with a 'reversed' attribute.
+ var myLists = $('ol[reversed]'),
+ currCount = null,
+ currChildren = null;
+
+ $(myLists).each(function() {
+
+ // check the existence of the start attribute
+ if ($(this).attr('start')) {
+
+ // if it exists, convert it to an integer
+ currCount = parseInt($(this).attr('start'), 10);
+
+ // If it wasn't a number, it will return 'NaN'; if so, use the number of list items instead
+ if (isNaN(currCount)) {
+ currCount = $(this).children().size();
+ } else {
+ // It's a number, so round it, just in case some sicko tries to use a decimal value
+ currCount = Math.round(currCount);
+ }
+
+ // do this if the start attribute is not present
+ // the first number is derived from the number of list items
+ } else {
+ currCount = $(this).children().size();
+ }
+
+ // grab all the child list items
+ currChildren = $(this).children();
+
+ // go through each list item, adding the 'value' attribute plus currCount number
+ // then subract one from currCount so we're ready for the next one
+ $(currChildren).each(function() {
+
+ $(this).attr('value', currCount);
+ currCount = currCount - 1;
+
+ });
+
+ });
+});

0 comments on commit 725005e

Please sign in to comment.