responsive-container.htm

<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />

    <title>FooTable Responsive Demo</title>
    <style type="text/css">
        body { margin: 5px 10px;padding: 0; font-family:courier new; font-size:12px; }
        
        .frame-border {
          padding: 20px;
        }
        
        .device-selector {
          text-align:center;
        }
        
        .device-selector a {
          background: url(device-sprite.png) no-repeat top left;
          width: 48px; height: 48px;
          margin:0 10px;
          display:inline-block;
          border:solid 5px transparent;
          border-radius:3px;
        }
        
          .device-selector a.tablet{ background-position: 0 0; } 
          .device-selector a.tablet-landscape{ background-position: -96px 0; } 
          .device-selector a.mobile{ background-position: -192px 0; } 
          .device-selector a.mobile-landscape{ background-position: -288px 0; } 
          .device-selector a.desktop{ background-position: -384px 0; }

            .device-selector a:hover {
              background-color:#eee;
            }
          
            .device-selector a.chosen {
              background-color:#ddd;
            }
            
        .demo-selector {
          text-align:center;
        }
        
          .demo-selector p {
            display:inline-block;
          }
          
          .demo-selector a {
            text-decoration:none;
            color:#00f;
          }
          
            .demo-selector a.chosen {
              text-decoration:underline;
              font-weight:bold;
              color:#f00;
            }
            
          .demo-selector .demo-desc {
            font-size:18px;
            font-family:arial;
          }
            
        #demo-frame {
          border: solid 3px #ddd;
          width: 1024px;
          height: 600px;
          margin-left:50%;
          position:fixed;
          left:-512px;
          border-radius:5px;
        }
        
    </style>    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
    		$('.device-selector > a').click(function(e) {
    			e.preventDefault();
          var $this = $(this);
          $this.addClass('chosen').siblings('a').removeClass('chosen');
    			var width = $this.data('width');
          var left = (parseInt(width) / 2) * -1;
    			var height = $this.data('height');
    			$('#demo-frame').animate({ 'width': width, 'left' : left });
    		});
        
        $('.demo-selector > a').click(function(e) {
          e.preventDefault();
          var $this = $(this);
          $this.addClass('chosen').siblings('a').removeClass('chosen');
          var url = $this.data('url');
          $('#demo-frame').attr('src', url);
          $('.demo-desc span').text( $this.data('desc') );
          $('.demo-desc a').attr('href', url);
        });
      });
    </script>
  </head>
  <body>
    <div class="device-selector">
      <p>choose a viewport:</p>
      <a class="mobile" data-width="320px" data-height="480px" href="#mobile"></a>
      <a class="tablet" data-width="768px" data-height="1024px" href="#tablet"></a>
      <a class="desktop" data-width="1224px" data-height="600px" href="#desktop"></a>
    </div>
    <div class="demo-selector">
      <p>choose a demo:</p>
      <a class="chosen" data-desc="This demo shows a really simple table that only contains text (nothing fancy)" data-url="demo.htm" href="#simple">simple</a>
      <a data-url="demo2.htm" data-desc="This demo shows a table with some more involved html, including images and links" href="#html">html</a>
      <a data-url="demo-sorting.htm" data-desc="This demo shows off the sortable plugin, so the table columns can be sorted by clicking the column headers" href="#sorting">sorting</a>
      <div class="demo-desc"><span>This demo shows a really simple table that only contains text (nothing fancy)</span> <a href="demo.htm" title="open demo in new window" target="_blank"><img border="0" src="images/external.png" /></a></div>
    </div>
    <div style="clear: both"></div>
    <div class="frame-border">
      <iframe id="demo-frame" src="demo.htm"></iframe>
    </div>
    <div style="clear: both"></div>
  </body>
</html>