Drawing Math number lines in html

Issue

I would like to draw the number line(as it is in below link) dynamically in html.

http://www.mathsisfun.com/number-line.html

Can you please point to some javascript library to achieve the same?

Thanks, Mugil.

Solution

Simple CSS example. Note that I am pretty rubbish at CSS, this will probably only work in Firefox, Safari, et al and look like crap in IE.

If you are going to do lots of these of different sizes, a script to generate the markup might be handy, but it should generate HTML that is served to the client, not done using script at the client.

.lineContainer {
  position: relative;
}

.line {
  border-top: 1px solid blue;
  border-right: 1px solid blue;
  width: 21px;
  Height: 8px;
  float: left;
  margin: 0;
  padding: 0;
}

.lineRightEnd {
  border-right: 0;
}

.numberContainer {
  position: absolute;
  top: 10px;
  margin: 0;
  padding: 0;
}

.number {
  width: 22px;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}

.numberLeftEnd {
  width: 10px;
  Height: 5px;
  float: left;
  margin: 0;
  padding: 0;
}

<p>A number line</p>
<div class="lineContainer">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line lineRightEnd"></div>
  <div class="numberContainer">
    <div class="numberLeftEnd"></div>
    <div class="number">-5</div>
    <div class="number">-4</div>
    <div class="number">-3</div>
    <div class="number">-2</div>
    <div class="number">-1</div>
    <div class="number">0</div>
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
    <div class="number">4</div>
    <div class="number">5</div>
  </div>
</div>

Answered By - RobG