JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<div id="mask">
    <ul>
        <li>
            <h3 >
                <a href="http://acs.graphicsmayhem.com/smf/index.php?action=calendar;year=2010;month=10">October 2010</a>
            </h3>
            <table cellspacing="1">
                <tr>
                    <th>Su</th>
                    <th>M</th>
                    <th>Tu</th>
                    <th>W</th>
                    <th>Th</th>
                    <th>F</th>
                    <th>Sa</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="collapse">1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                </tr>
                <tr>
                    <td class="today">17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                    <td>29</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td></td>
                    <td></td>
                    <td></td>
           ...

CSS

#mask                       {height:150px; width:170px; border:1px solid; overflow:hidden; position:relative;}
ul                          {position:absolute; top:0px; left:0px; margin:0; padding:0; overflow:hidden;}
li                          {float:left; display:inline; margin:0; padding:0; height:152px; width:170px;}
li h3                       {margin:0; padding:0; font-size:12px; text-align:center;}
li table                    {text-align:right; width:160px;}
li table th                 {font-size:10px; text-align:right;}
li table td                 {text-align:right; height:20px; font-size:10px;}

#controls                   {width:170px; overflow:hidden;}
#controls .nextButton       {float:right; display:inline;}
#controls .previousButton   {float:left; display:inline;}
.cText       {text-align:center; display:inline;}

JavaScript

$(document).ready(function(){
            // Count the number of li's.
            var liCount = $('li').length;
            
            // Generate the width of needed for the ul.
            var ulWidth = liCount * $('li:first').outerWidth();
            
            // Set the ul width.
            $('ul').css({width: ulWidth});
            
            var maskWidth = $('#mask').outerWidth();
            var listWidth = $('#mask ul').outerWidth();
            var roomToMoveW = maskWidth - listWidth;
            var currentLeftPos = $('#mask ul').position().left;
            
            $('#nextLink').click(function(){
                 if(currentLeftPos > roomToMoveW){
                        var widPos = currentLeftPos - maskWidth;
                        if(widPos < roomToMoveW){
                            widPos = roomToMoveW;
                        }
                        $('#mask ul').animate({
                            left: widPos
                        });
                        currentLeftPos = widPos;
                 }
            });
            
            $('#prevLink').click(function(){
                if(currentLeftPos < 0){
                        var widPos = currentLeftPos + maskWidth;
                        if(widPos > 0){
                            widPos = 0;
                        }
                        $('#mask ul').animate({
                            left: widPos
                        });
                        currentLeftPos = widPos;
                }    
            });
        });