I would like to make use of the wonderful looking chessboard available at chessboard.js. However, after downloading the folder and entering the code offered on the home page, it doesn't seem to be doing anything.
Is there something beyond the linking to the folders that is required?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.css">
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.js"></script>
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</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>
You're missing jQuery and you should throw your javascript in a document ready function like so:
http://jsbin.com/mapenefesi/edit?html,css,js,output
$(function(){
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);
});
I am not sure you want both .css and .min.css as well as .js and .min.js references of the same resources.
Also, since you're not referencing jQuery (as mentioned in some other answers), you'll need to change your javascript...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</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
});
document.getElementById('startBtn').click = function() { board2.start; };
document.getElementById('clearBtn').click = function() { board2.clear; };
</script>
</body>
</html>
You appear to be using jQuery selectors (e.g. $('#startBtn')) without including the jQuery library https://jquery.com/. Try including...
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
Related
I am trying to implement the very basic example of magnific-popup ("Single image lightbox" in the official examples) on a page, but I can't get it to to work - when clicking on the thumbnail it just opens the fullsize image in the browser.
This is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
</head>
<body>
<div id="page">
<a class="image-popup-vertical-fit" href="tbig.jpg">
<img src="tsmall.jpg">
</a>
</div>
</body>
</html>
Any idea what might be going wrong? I don't see any error in the console.
I have added delegate:'a' to the script as per another topic, but it doesn't seem to help.
I suppose it's something pretty basic, but it really is eluding me...
Thanks!
With the delegate:'a' the following did not work. Without it I believe it does as you are expecting
<html>
<head>
<link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js'></script>
<script>
$( document ).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type:'image', // no delegate:'a'
closeOnContentClick:true,
mainClass:'mfp-img-mobile',
image: { verticalFit:true }
});
});
</script>
<title>Magnific Popup</title>
</head>
<body>
<div id='page'>
<a class='image-popup-vertical-fit' href='//farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg'>
<img src='//farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg' width='150px' height='150px' />
</a>
</div>
</body>
</html>
I want my button to change to a loading state as per the boostrap documentation http://getbootstrap.com/javascript/#buttons
Why does my button not change to a loading state here?
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Bootstrap Example</TITLE>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css ">
<STYLE>
</STYLE>
</HEAD>
<BODY>
<button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
<script type="text/javascript">
$(function(){
$('#btnD').click(function(){
var btn = $(this);
btn.button('loading');
});
});
</script>
</BODY>
</HTML>
The bootstrap URLs are not correct, no JS or CSS were loaded. These will work :
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Bootstrap Example</TITLE>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<STYLE>
</STYLE>
</HEAD>
<BODY>
<button type="button" class="btn btn-primary" id="btnD" data-loading-text=":)">hola!!!</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btnD').click(function(){
var btn = $(this);
btn.button('loading');
});
});
</script>
</BODY>
</HTML>
The visual aspect of the button should change too.
I recommend you to download the bootstrap css and js files in your machine. It works fine when the bootstrap css and js files are placed inline or link to css and js files placed in client machine. The Bootstrap css and js Urls are not valid one. Download Bootstrap css and js files here
How can I use dropzone without using the class in the form.
I basically want to have a div inside a form and call class="dropzone" in that div. But it doesn't seems to work.
Here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "file-upload"})
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
Initiate .ready event when DOM ready and use like this.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
});
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
</html>
your url parameter is not pointing to any valid php file. I believe your code should be thus
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/dropzone.css"/>
<script src="dropzone.min.js"></script>
<script type="text/javascript">
var myDropzone = new Dropzone("div#myId", { url: "upload.php"}) //according to your forms action
</script>
<body>
<form action="upload.php">
<input type="text">
<div id="myId" class="dropzone"></div>
</form>
</body>
I need a 2-handle slider which displays the handle value when I move it. I am using nouislider. I am having problem making it work. I stripped off unwanted most code and will add the move and change good stuff later. How do I initialize the slider? Below is my code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery No UI Slider - Range slider</title>
<link rel="stylesheet" href="nouislider.css" />
<link rel="stylesheet" href="site.css" />
<script src="jquery-1.8b1.js"></script>
<script src="jquery.nouislider.js"></script>
</head>
<body>
<div class="example">
<div id="noUiSlider" class="noUiSlider"></div>
<div id="valueInput">
START <input type="text" id="start" value="0"/></label>
END <input type="text" id="end" value="60"/></label>
</div>
<script>
window.onload =$(function(){
$("#noUiSlider").empty().noUiSlider( 'init', {
handles: 2,
connect: true,
scale:[10,30],
start:[0,60]
});
</script>
</div>
</body>
</html>
$(function() {
$("#noUiSlider").noUiSlider({
handles: 2,
connect: true,
scale:[10,30],
start:[0,60]
});
});
I've downloaded the YUI library for the nice SimpleEditor. When installed and created a simple test. It will not display right.
this is how it should look like.
http://developer.yahoo.com/yui/examples/editor/simple_editor.html
and this is how it looks with my example:
http://ms.robertcabri.nl/testing.php
Here is the code of my testing page:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/assets/skins/sam/skin.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/element/element-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/editor/simpleeditor-min.js"></script>
<script type="text/javascript">
window.onload = function () {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
var editor = new YAHOO.widget.SimpleEditor('blaat', {
dompath: true,
handleSubmit: false
});
editor.render();
};
</script>
</head>
<body>
<form action="#" method="post" id="test">
<fieldset>
<legend>test</legend>
<textarea name="blaat" id="blaat" cols="30" rows="5"></textarea>
</fieldset>
</form>
</body>
</html>
Well found the answer myself.
YUI SimpleEditor documentation is really bad. The Main styling has to be set for this element.
in my example i've set a wrapper around the textarea and then the styling picks up.
<div class="yui-skin-sam">
<textarea></textarea>
</div>
You also could place this class on a form element or on the body. It has to be a parent of the textarea node you want to replace with the simpleeditor
You need to put the "yui-skin-sam" class on your body tag, for one thing.