10

I am attempting to use a javascript chessboard here: http://chessboardjs.com/ . Unfortunately, I don't know javascript or CSS, and am rusty in HTML, so I don't understand the documentation, even though this seems to be a standard javascript chessboard.

How exactly does one install and use this package in order to render a chessboard? The "examples" are all snippets of HTML or javascript, useless to me without being embedded in a working web page. And the source to sample web pages do not work when copied to my home directory. For example, the web page http://chessboardjs.com/examples/1000 here purports to render and empty board, and does on their server, but when I copy the source to my local directory, only a blank page renders. The source of that page does not make sense to me anyway, for example, it refers to files "js/chessboard.js" and "js/json3.min.js" , neither of which are in the distribution. (Nor does the render work when "chessboard.js" is replaced with the name of the javascript file in the distribution).

I assume the issue has something to do with where img files are searched for, and where files are stored. And presumably these are so obvious to javascript experts that it's all implicit in this package and aren't ever explained in the documentation.

So, what I would like is a file foo.html that, when copied to my local machine, will render a chessboard using the chessboard.js source.

kdog
  • 1,583
  • 16
  • 28
  • Go to that example page and make sure you select "Webpage, Complete" or something similar when you save it. – Heretic Monkey Aug 12 '16 at 22:39
  • Where is the file "js/chessboard.js" in the distribution? Where is the webpage getting that file from? – kdog Aug 12 '16 at 22:44
  • To be clear, I want to use a local copy of any javascript, since eventually I hope to modify it. I don't know if that webpage is used a "chessboard.js" from its own server somehow, a file not in the distribution, or if my distribution is corrupted or what. So again, where do you see "chessboard.js" in the downloaded distribution? – kdog Aug 12 '16 at 22:46
  • Well the example still doesn't work for me even if I rename "chessboard.js" in the HTML code to "chessboard-0.3.0.js" . I am using a file:///.... URL if that matters. Then there are all the other js/... files that don't exist in the distribution but are referenced in the HTML example, like json3.min.js – kdog Aug 12 '16 at 22:49

1 Answers1

27

Create a new text file, and paste this inside:

<!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
    <link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/chessboard-1.0.0.min.js"></script>
  </head>
  <body>
    <div id="board1" style="width: 400px"></div>
    <script>
        var board1 = ChessBoard('board1', 'start');
    </script>
  </body>
</html>

Then save it with the .html or .htm extension.

Next, download their distributable from their download page. And unzip the folder.

Next, put your HTML file in the same folder as the js, img, and css folders from the unzipped distributable.

Double click/Run the HTML file. The URL should say file:///C:/path/to/the/file.html.

You should see

enter image description here

4castle
  • 32,613
  • 11
  • 69
  • 106
  • 4
    Thank you very much! I am sure this looks obvious to people with expertise in javascript and CSS, but I spent at least an hour playing around with things and could not get it to work. This works and is exactly what I wanted. – kdog Aug 12 '16 at 23:05
  • 4
    @kdog Happy to help! I can see how the process was confusing. They didn't make it well known that jQuery was a dependency that wasn't included in their distributable. – 4castle Aug 12 '16 at 23:07
  • @Astrydax Please ask a new question, explaining what you tried and what's happening – 4castle Dec 16 '20 at 06:06
  • 1
    Make sure that the links are the same as the filenames - i.e. `css/chessboard-0.3.0.min.css` is now `css/chessboard-1.0.0.min.css`. – ezChx May 09 '21 at 16:13