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.
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
Related
I am recreating a javascript game which requires tables, but when I link my javascript file to my index.html the grid does not show on my browser, but when I directly add my javascript inside the script tag in my html, the grid shows on the browser.
Any help would be appreciated thank you!
This is my code by referencing a js file inside html(the tables do not show)
html with js link
This is my code without referencing a js file(tables do show)
html without js link
This is my main.js
main js
This is the browser without linking js file
browser without js file
This is my browser with linking js file
browser with js reference
First I linked the js file with script src=js path but it did not work but it worked when I put the javascript directly inside the html script tag. I was wondering how I can make it work with referencing a separate js file for a cleaner html code.
It's due to that your local paths are not resolving correctly. Without seeing directory structure I can't know what could be wrong.
First of all, please re-check and verify that both files main.js and index.html are in the same directory.
Alternatively, you could create folder called js inside of your main directory (where index.html is) and then move the main.js into that folder and try:
<script type="text/javascript" src="/js/main.js"></script>
index.html and main.js files must be at the same directory in order to include .js file as you did
<script type="text/javascript" src="main.js"></script>
UPDATE (I will leave answer whole, if somebody also gets stuck, so they can troubleshoot the problem):
The reason why it couldn't resolve path is because there was blank spaces between src and = ; when giving src, that part needs to be connected.
Just like this
<script type="text/javascript" src="main.js"></script>
Take a look here:
What happens:
I apologize if this is the wrong place to ask. If so, please let me know!
So I'm generating HTML files, and I am uploading them to OneDrive for other faculty and staff. These reports rely on JavaScript to neatly highlight the rows, and when I view the files directly in OneDrive the JavaScript does not display. Viewing the files in the browser works fine.
Is there a way to enable JavaScript when viewing these in OneDrive? Should I upload them to SharePoint instead to enable JavaScript, or would it be easier to do something else?
If it matters, the JavaScript is inside a script tag within the head of the document, and is called as follows:
<head>
<script>
function warnings(){
/* function logic */
}
</script>
</head>
<body onload="warnings()">
<!--tables and the like-->
</body>
Do they have to remain HTML Files? You could convert them to PDF using the HTML2PDF library, and simply upload the PDF file which would include the highlights that were on the HTML file. Unless it as to be an HTML file uploaded for some reason or another.
I know that HTML is read line by line. When you link multiple css files like a normalize file and a stylesheet file the stylesheet file should be linked after the normalize file because of CSS importance specificity and source order. It appears that this doesnt affect JavaScript files that are linked. Can I link my JavaScript files in any order?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Musical Playlist</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>My Music Playlist</h1>
<div id="listDiv">
</div>
<script src = "js/helpers.js"></script>
<script src = "js/playlist.js"></script>
</body>
</html>
If you’re planning on using any frameworks for JavaScript, make sure it’s linked prior to your main JavaScript files. Each JavaScript link is read sequentially, so if you try to run your main JavaScript file that contains a framework function before you link the framework, it’s not gonna work.
Other than that, if your JavaScript files are simply filled with functions then it doesn’t matter what order you link them in. Unless one of your JavaScript files runs and executed when the website loads that should be run first.
In some cases you can swap order without issues, however like mentioned if you'd use a framework/tool/... that would need to be available for the rest of your code to run it should be included earlier.
This is also why some scripts want to included in the <head> of your page and not at the end of the <body>, otherwise they would not be availble when they are needed.
The same goes for dependencies in the JS files, let's say that I have a file menu.js which I supply with a config variable from config.js I would have to include config.js before menu.js to prevent issues and undefined variables.
I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?
Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>
I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.
I have a javascript file main.js and five html files 1.html,2.html,3.html,4.html,5.html
I want to access the javascript file main.as in all files .
I have used in all of the five but I'm not able to access it . Is it possible to share the .js file among the html files.
Plz reply,
Thanks in advance
Prashant Dubey
Yes, it is entirely possible. That's the point of being able to have a JS file instead of having to embed all the code in the HTML.
yes this is well possible. You merely have to include
<script type="text/javascript" src="main.js"></script>
in your HTML files, preferably near the bottom (for faster rendering). What have you done so far?
Yes. Totally possible.
Just reference it in all of the files e.g. by
<script type="text/javascript" src="Scripts/main.js"></script>
Yes, it is possible.
Probably there is something wrong with the way you access the javascript from your html. Show us the <script ...>...</script> part of your html.
Yes. Are you using the correct path to the main.js file in your html files?
Create separate javascript file with .js extension with all your function in it and
just include this javascript file in the head tag of all the html scripts u wanna use that in.
Like::
<html>
<head>
<script type="text/javascript" src="JavaScriptFilePath.js"></script>
</head>
<body>
<!-- use javascript -->
It can happen both ways..
a single html file can use multiple javascript file
2.a javascript file can be used in several html files.
In first case javascript file load can be conditional based on location, user preferences, time, age group, content restriction.
You can see good example when facebook loads its page. I loads number of javascritps.