chessboardjs
chessboardjs copied to clipboard
oakmac
chessboard is unable to work properly
the chessboard animation doesn't seem to load properly, just getting a line down the left side for the chess pieces.
code below,
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template
in the editor.
-->
<html>
<head>
<link rel="stylesheet" href="css/normalize-2.1.2.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
<link rel="stylesheet" href="css/site2.css" />
<link rel="stylesheet" href="css/chessboard.css" />
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.color.min.js"></script>
<script src="js/json3.min.js"></script>
<script src="js/chess.js"></script>
<script src="js/chessboard-0.3.0.js"></script>
<script src="js/chessboard.js"></script>
<script src="js/home.js"></script>
<script src="js/prettify.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="board2" style="width: 400px"></div>
<input type="button" id="startBtn" value="Start" />
<input type="button" id="clearBtn" value="Clear" />
<script>var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);</script>
</body>
</html>
Looks okay over here. Try downloading the original from http://chessboardjs.com/ and see if it has the same problem. If not, you can compare the two to track down the issue.
@mattds9 not sure if you're still having trouble getting the board to appear.
The issue may have to do with how the chess piece images are being served. By default, they should be reachable on your host at /img/chesspieces/wikipedia/{piece}.png. Take a look at config.pieceTheme and /img/chesspieces/ for more inspiration.
