CSS/jQuery Line Numbers - UL Version

BR version

This is an exercise to mimic a coding software environment with line numbers in a left column.

Notable Notes

  • The black border is a container with 'overflow-y:scroll', allowing for a scroll bar only on the vertical, not the horizontal.
  • The line numbers are being generated by jQuery, up to 1500. The extra numbers are hidden by 'overflow:hidden'.
  • Both the line number column and the content column are floated left.
  • I've moved the #nums to an unordered list. This allows for the jQuery :even selector to manipulate the list items within. Zebra striping is nice.

Possible Improvements

  • Capture the #content height. Divide by line-height. Enter into the less-than/equal value in the 'var num' function. This would extract that piece of layout from the application and make the line number generator truly dynamic based on content.
  • Capture each line in #content, possibly scrubbing for a <br /> or \n. Tie that to the line number generator loop. This would mimic a 'soft return' or '¬' character, resulting in 2 or more visual lines for one actual line of code.
  • Use jQuery's :even selector to zebra-stripe the code lines.
  • Write a conditional clause where if the content area is shorter than the #wrapper, the #wrapper will take on the height of the content.

Thanks for your interest.

Acknowledgements:
jQuery assistance: isaac van name
conversation on codesnipp.it: jQuery line numbers