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]
});
});
Related
I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>
I am using the Emojione Area JavaScript plugin. However, I am only getting the text area displayed, without the emoji pane.
Here is my HTML file :
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
</script>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
</body>
</html>
There is two things to fix on your code:
You need to import the Javascript File from jQuery before EmojioneArea
Your Script in Javascript doesn't close the function $(document).ready()
So the should should be:
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
})
</script>
</body>
</html>
The Popup will appear on the Right side because Left is not a valid value for the propertie pickerPosition. According to the documentation (www.github.com/mervick/emojionearea) the only valid values are top, right and bottom. The value top is the default one
I Hope it helps you
Best regards
I had a similar issue with the emojioneArea panel not being visible no mater what the position was set to. I added the property inline: true and it showed up.
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet",
inline: true
});
})
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>
Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.
Here's my testing form for the bootstrap datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="well span12 main">
<input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."
name="date"> <br>
</div>
<input type="submit" value="Search" class="btn">
</form>
</center>
<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
</body>
</html>
What exactly am I doing wrong?
You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
man you can use the basic Bootstrap Datepicker this way:
<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and inside body:
<body>
<div id="testDIV">
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</div>
</div>
</div>
datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side.
Hope this help someone, greetings.
I believe you have to reference bootstrap.js before bootstrap-datepicker.js
Just add this below JS file
<script type="text/javascript">
$(document).ready(function () {
$('your input's id or class with # or .').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:
<span style="position: relative">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</span>
I've made a small page that just has this as the HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link type="text/css" href="js/jquery-ui-1.9.1.custom/css/black-tie/jquery-ui-1.9.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<link type="text/css" href="css/main.css" rel="Stylesheet" />
<script src="js/main.js"></script>
<script>
$(main());
/* or $(document).ready(main()); */
</script>
</head>
<body>
<div id="loginDiv" class="popupDiv">
<div id="usernameDiv">
<label for="username">username</label>
<input type="text" id="username"/>
</div>
<div id="passwordDiv">
<label for="password">Password</label>
<input type="password" id="password"/>
</div>
</div>
<div id="introDiv">
<div class="headerDiv">
<button id="loginButton">Login</button>
</div>
</div>
</body>
</html>
And then I have my main.js:
function main()
{
var $loginButton = $('#loginButton');
var $loginDiv = $('#loginDiv');
$loginDiv.dialog({ autoOpen: false });
$loginButton.click(function() {
$loginDiv.dialog("open");
//alert('sfsdf');
});
}
I can trigger alerts, but selectors will not return any elements if the .ready() handler is specified in the head.
I have tried moving it to the end of the body tag and everything works fine. According to the JQuery docs, the entire DOM and all images and resources are supposed to be loaded before the handler gets called. What gives?
Firefox 16.0.2 on Linux x86
JQuery 1.8.2
JQuery UI 1.9.2 (not really used for the purposes here)
Because you are calling your function!
$(main()); <--() means run it
You want to assign a reference to it
$(main); <-- no ()!