Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://test.jobfeedpro.com/battleship/includes/css/bootstrap.css">
  <link rel="stylesheet" href="http://test.jobfeedpro.com/battleship/includes/css/style-override.css">
  <link rel="stylesheet" href="http://test.jobfeedpro.com/battleship/includes/css/jquery-ui.css">
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="http://test.jobfeedpro.com/battleship/includes/jquery/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="http://test.jobfeedpro.com/battleship/includes/jquery/jquery-ui.js"></script>
  <script type="text/javascript" src="http://test.jobfeedpro.com/battleship/includes/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="ships well well-md">
        <h3>Boats</h3>
        <div class="draggable boat boat-small ui-draggable ui-draggable-handle"></div>
        <div class="draggable boat boat-medium ui-draggable ui-draggable-handle"></div>
        <div class="draggable boat boat-medium ui-draggable ui-draggable-handle"></div>
        <div class="draggable boat boat-large ui-draggable ui-draggable-handle"></div>
        <div class="draggable boat boat-xlarge ui-draggable ui-draggable-handle"></div>
      </div>
      <!-- <div class="well well-md"> -->
      <div class="well well-md">
        <h3>Attack</h3>
        <button id="bomb-attack" class="btn btn-danger">Bomb!!</button>
      </div>
      <!-- <div class="well well-md"> -->
    </div>
    <!-- <div class="col-md-3"> -->
​
    <div class="col-md-9 col-md-offset-0 well well-md">
      <div class="col-md-6">
        <div id="yourBoard" class="boards">
          <h3>My Board</h3>
          <table id="drop_here" class="table table-bordered board-bg">
            <tbody>
              <tr>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable">1</td>
                <td width="1%" class="ui-droppable">2</td>
                <td width="1%" class="ui-droppable">3</td>
                <td width="1%" class="ui-droppable">4</td>
                <td width="1%" class="ui-droppable">5</td>
                <td width="1%" class="ui-droppable">6</td>
                <td width="1%" class="ui-droppable">7</td>
                <td width="1%" class="ui-droppable">8</td>
                <td width="1%" class="ui-droppable">9</td>
                <td width="1%" class="ui-droppable">10</td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">A</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">B</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">C</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">D</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">E</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">F</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">G</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">H</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">I</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
              <tr>
                <td width="1%" class="ui-droppable">J</td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
                <td width="1%" class="ui-droppable"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- <div id='yourBoard' class='boards'> -->
      </div>
      <!-- <div class="col-md-6"> -->
​
      <div class="col-md-6">
        <div id="oponentBoard" class="boards">
          <h3>Oponent</h3>
          <table class="table table-bordered board-bg">
            <tbody>
              <tr>
                <td width="1%"></td>
                <td class="ui-droppable" width="1%">1</td>
                <td class="ui-droppable" width="1%">2</td>
                <td class="ui-droppable" width="1%">3</td>
                <td class="ui-droppable" width="1%">4</td>
                <td class="ui-droppable" width="1%">5</td>
                <td class="ui-droppable" width="1%">6</td>
                <td class="ui-droppable" width="1%">7</td>
                <td class="ui-droppable" width="1%">8</td>
                <td class="ui-droppable" width="1%">9</td>
                <td class="ui-droppable" width="1%">10</td>
              </tr>
              <tr>
                <td width="1%">A</td>
                <td id="options" class="A-1"></td>
                <td id="options" class="A-2"></td>
                <td id="options" class="A-3"></td>
                <td id="options" class="A-4"></td>
                <td id="options" class="A-5"></td>
                <td id="options" class="A-6"></td>
                <td id="options" class="A-7"></td>
                <td id="options" class="A-8"></td>
                <td id="options" class="A-9"></td>
                <td id="options" class="A-10"></td>
              </tr>
              <tr>
                <td width="1%">B</td>
                <td id="options" class="B-1"></td>
                <td id="options" class="B-2"></td>
                <td id="options" class="B-3"></td>
                <td id="options" class="B-4"></td>
                <td id="options" class="B-5"></td>
                <td id="options" class="B-6"></td>
                <td id="options" class="B-7"></td>
                <td id="options" class="B-8"></td>
                <td id="options" class="B-9"></td>
                <td id="options" class="B-10"></td>
              </tr>
              <tr>
                <td width="1%">C</td>
                <td id="options" class="C-1"></td>
                <td id="options" class="C-2"></td>
                <td id="options" class="C-3"></td>
                <td id="options" class="C-4"></td>
                <td id="options" class="C-5"></td>
                <td id="options" class="C-6"></td>
                <td id="options" class="C-7"></td>
                <td id="options" class="C-8"></td>
                <td id="options" class="C-9"></td>
                <td id="options" class="C-10"></td>
              </tr>
              <tr>
                <td width="1%">D</td>
                <td id="options" class="D-1"></td>
                <td id="options" class="D-2"></td>
                <td id="options" class="D-3"></td>
                <td id="options" class="D-4"></td>
                <td id="options" class="D-5"></td>
                <td id="options" class="D-6"></td>
                <td id="options" class="D-7"></td>
                <td id="options" class="D-8"></td>
                <td id="options" class="D-9"></td>
                <td id="options" class="D-10"></td>
              </tr>
              <tr>
                <td width="1%">E</td>
                <td id="options" class="E-1"></td>
                <td id="options" class="E-2"></td>
                <td id="options" class="E-3"></td>
                <td id="options" class="E-4"></td>
                <td id="options" class="E-5"></td>
                <td id="options" class="E-6"></td>
                <td id="options" class="E-7"></td>
                <td id="options" class="E-8"></td>
                <td id="options" class="E-9"></td>
                <td id="options" class="E-10"></td>
              </tr>
              <tr>
                <td width="1%">F</td>
                <td id="options" class="F-1"></td>
                <td id="options" class="F-2"></td>
                <td id="options" class="F-3"></td>
                <td id="options" class="F-4"></td>
                <td id="options" class="F-5"></td>
                <td id="options" class="F-6"></td>
                <td id="options" class="F-7"></td>
                <td id="options" class="F-8"></td>
                <td id="options" class="F-9"></td>
                <td id="options" class="F-10"></td>
              </tr>
              <tr>
                <td width="1%">G</td>
                <td id="options" class="G-1"></td>
                <td id="options" class="G-2"></td>
                <td id="options" class="G-3"></td>
                <td id="options" class="G-4"></td>
                <td id="options" class="G-5"></td>
                <td id="options" class="G-6"></td>
                <td id="options" class="G-7"></td>
                <td id="options" class="G-8"></td>
                <td id="options" class="G-9"></td>
                <td id="options" class="G-10"></td>
              </tr>
              <tr>
                <td width="1%">H</td>
                <td id="options" class="H-1"></td>
                <td id="options" class="H-2"></td>
                <td id="options" class="H-3"></td>
                <td id="options" class="H-4"></td>
                <td id="options" class="H-5"></td>
                <td id="options" class="H-6"></td>
                <td id="options" class="H-7"></td>
                <td id="options" class="H-8"></td>
                <td id="options" class="H-9"></td>
                <td id="options" class="H-10"></td>
              </tr>
              <tr>
                <td width="1%">I</td>
                <td id="options" class="I-1"></td>
                <td id="options" class="I-2"></td>
                <td id="options" class="I-3"></td>
                <td id="options" class="I-4"></td>
                <td id="options" class="I-5"></td>
                <td id="options" class="I-6"></td>
                <td id="options" class="I-7"></td>
                <td id="options" class="I-8"></td>
                <td id="options" class="I-9"></td>
                <td id="options" class="I-10"></td>
              </tr>
              <tr>
                <td width="1%">J</td>
                <td id="options" class="J-1"></td>
                <td id="options" class="J-2"></td>
                <td id="options" class="J-3"></td>
                <td id="options" class="J-4"></td>
                <td id="options" class="J-5"></td>
                <td id="options" class="J-6"></td>
                <td id="options" class="J-7"></td>
                <td id="options" class="J-8"></td>
                <td id="options" class="J-9"></td>
                <td id="options" class="J-10"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- <div id='oponentBoard' class='boards'> -->
      </div>
      <!-- <div class="col-md-6"> -->
    </div>
    <!-- <div class="col-md-8 col-md-offset-1 well well-md"> -->
  </div>
  <!-- <div class="row"> -->
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moshfeupro
0viewers