i have horizontal set of divs each holding score table game. intent have user on phone slide / swipe game table , when user removes finger, program snap next div. example, if game 1 appears, user swipes , lifts finger when game 1 , game 2 both showing, program advance game 2, not continuing sliding. code below , demo here. , appreciated.
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style type="text/css" media="screen"> table.swingtable { border-collapse: collapse; font-size: 12px; margin: 0px 0px 20px; /* original: margin: 10px 10px 20px; */ text-align: left; width:100%; } table.swingtable thead th.rounded-company { background: #ccc; } table.swingtable thead th.rounded-q4 { background: #ccc; } table.swingtable th { background: none repeat scroll 0 0 #cccccc; color: #222222; font-size: 11px; /*font-size: 10px;*/ font-weight: bold; padding: 6px; /*padding: 8px;*/ text-transform: uppercase; } /*table.swingtable th#hole-shot{ width: 50;}*/ table.swingtable td { background: none repeat scroll 0 0 #eee; border-top: 1px solid #ffffff; color: #333; padding: 8px; } table.swingtable tfoot td.rounded-foot-left { background: #eee; } tabletfoot.swingtable td.rounded-foot-right { background: #eee; } table.swingtable tbody tr:hover td { background: none repeat scroll 0 0 #ddd; } .slidecontainer { white-space: nowrap; } .horizontal{ display: inline-block; margin:0 auto; border:2px solid; /*border-radius:25px;*/ white-space: normal; width: 100%; /*left:0;right:0; */ } </style> <script> $(document).ready(function() { }); // end main </script> </head> <body> <div class="slidecontainer"> <div class="horizontal" style="background: #dbdbdb"> <table class="swingtable" > <caption><strong>game 1</strong></caption> <tr> <th>swing#</th> <th>start</th> <th>h-dis</th> <th>s-dis</th> <th>sg</th> <th>flags</th> </tr> <tr> <td>1</td> <td>t</td> <td>400</td> <td>300</td> <td>0</td> <td></td> </tr> <tr> <td>2</td> <td>f</td> <td>100</td> <td>90</td> <td>0</td> <td></td> </tr> <tr> <td>3</td> <td>g</td> <td>10</td> <td>10</td> <td>sg</td> <td>ho</td> </tr> </table> </div> <div class="horizontal"> <table class="swingtable" > <caption><strong>game 2</strong></caption> <tr> <th>swing#</th> <th>start</th> <th>h-dis</th> <th>s-dis</th> <th>sg</th> <th>flags</th> </tr> <tr> <td>1</td> <td>t</td> <td>400</td> <td>300</td> <td>0</td> <td></td> </tr> <tr> <td>2</td> <td>f</td> <td>100</td> <td>90</td> <td>0</td> <td></td> </tr> <tr> <td>3</td> <td>g</td> <td>10</td> <td>10</td> <td>sg</td> <td>ho</td> </tr> </table> </div> <div class="horizontal" style="background: #dbdbdb"> <table class="swingtable" > <caption><strong>game 3</strong></caption> <tr> <th>swing#</th> <th>start</th> <th>h-dis</th> <th>s-dis</th> <th>sg</th> <th>flags</th> </tr> <tr> <td>1</td> <td>t</td> <td>400</td> <td>300</td> <td>0</td> <td></td> </tr> <tr> <td>2</td> <td>f</td> <td>100</td> <td>90</td> <td>0</td> <td></td> </tr> <tr> <td>3</td> <td>g</td> <td>10</td> <td>10</td> <td>sg</td> <td>ho</td> </tr> </table> </div> <div class="horizontal"> <table class="swingtable" > <caption><strong>game 4</strong></caption> <tr> <th>swing#</th> <th>start</th> <th>h-dis</th> <th>s-dis</th> <th>sg</th> <th>flags</th> </tr> <tr> <td>1</td> <td>t</td> <td>400</td> <td>300</td> <td>0</td> <td></td> </tr> <tr> <td>2</td> <td>f</td> <td>100</td> <td>90</td> <td>0</td> <td></td> </tr> <tr> <td>3</td> <td>g</td> <td>10</td> <td>10</td> <td>sg</td> <td>ho</td> </tr> </table> </div> <div class="horizontal" style="background: #dbdbdb"> <table class="swingtable" > <caption><strong>game 5</strong></caption> <tr> <th>swing#</th> <th>start</th> <th>h-dis</th> <th>s-dis</th> <th>sg</th> <th>flags</th> </tr> <tr> <td>1</td> <td>t</td> <td>400</td> <td>300</td> <td>0</td> <td></td> </tr> <tr> <td>2</td> <td>f</td> <td>100</td> <td>90</td> <td>0</td> <td></td> </tr> <tr> <td>3</td> <td>g</td> <td>10</td> <td>10</td> <td>sg</td> <td>ho</td> </tr> </table> </div> </div> </body> </html>
Comments
Post a Comment