Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" xml:lang="en">
- <head>
- <meta charset="utf-8">
- <title>Weekly Schedule Demo</title>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
- <style type="text/css">
- html { font-size: 62.5%; }
- body {
- font-family: 'Open Sans', Arial, sans-serif;
- font-size: 1.4rem;
- }
- table {
- width: 100%;
- border-collapse: collapse;
- font-weight: 300;
- border: 1px solid #ccc;
- }
- table td,
- table th {
- padding: 1.3333rem;
- border: 1px solid #ccc;
- }
- table th {
- font-size: 1.6rem;
- text-transform: uppercase;
- }
- thead td { font-weight: bold; }
- .inline {
- list-style: none;
- margin: 0;
- padding: 0;
- text-align: center;
- margin-bottom: 1.5rem;
- }
- .inline li {
- display: inline-block;
- margin: 0.5rem 10rem;
- }
- .inline li a {
- text-decoration: none;
- color: #AB0000;
- font-weight: 300;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- transition: all 0.3s;
- }
- .inline li a:hover { color: #900; }
- </style>
- </head>
- <body>
- <div class="schedule">
- <h2>Week Beginning </h2>
- <div class="controls">
- <ul class="inline">
- <li><a href="/extras/arc/hours.php?week=2014-08-11">Previous Week</a></li>
- <li><a href="/extras/arc/hours.php?week=2014-08-18">Current Week</a></li>
- <li><a href="/extras/arc/hours.php?week=2014-08-25">Next Week</a></li>
- </ul>
- </div>
- <table>
- <thead>
- <tr>
- <th>Facility</th>
- <th>Mon</th>
- <th>Tue</th>
- <th>Wed</th>
- <th>Thur</th>
- <th>Fri</th>
- <th>Sat</th>
- <th>Sun</th>
- </tr>
- </thead>
- <tr>
- <td>Aztec Recreation Center</td>
- <td>Open 24 Hours</td>
- <td>Open 24 Hours</td>
- <td>Open 24 Hours</td>
- <td>Closed</td>
- <td>12am - 10pm</td>
- <td>8am - 10pm</td>
- <td>8am - 11:59pm</td>
- </tr>
- <tr>
- <td>ARC Express</td>
- <td>12pm - 6pm</td>
- <td>12pm - 6pm</td>
- <td>12pm - 6pm</td>
- <td>12pm - 6pm</td>
- <td>12pm - 6pm</td>
- <td>Closed</td>
- <td>Closed</td>
- </tr>
- <tr>
- <td>Aztec Aquaplex</td>
- <td>9am - 8pm</td>
- <td>9am - 8pm</td>
- <td>9am - 8pm</td>
- <td>9am - 8pm</td>
- <td>9am - 8pm</td>
- <td>9am - 6pm</td>
- <td>9am - 6pm</td>
- </tr>
- </table>
- </div>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".controls a").click(function(e) {
- e.preventDefault();
- $.get($(this).attr("href"), function(data) {
- var $data = $.parseHTML(data);
- // console.log($(data).find(".schedule"));
- console.log(data);
- $(".schedule").fadeOut(200, function() {
- $(this).html(data).fadeIn(200);
- });
- });
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement