I am new using reveal.js.
I did not manage to reduce the space on top of my slides. Could somebody help me ?
Note : I a am using pandoc to create my slideshow from Markdown sources. This is the command line I use :
pandoc -s -f markdown+tex_math_single_backslash \
--bibliography=bibliography.bib --filter pandoc-citeproc \
--slide-level 2 --toc --mathjax -i -t revealjs -V theme:beige \
-H mysettings.css mfront.md -o mfront.html
This is generated code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="author" content="Thomas Helfer" />
<meta name="dcterms.date" content="2014-01-01" />
<title>MFront User Meeting: TFEL 2.0 and beyond</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal.js/css/reveal.min.css"/>
<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; }
code > span.dt { color: #902000; }
code > span.dv { color: #40a070; }
code > span.bn { color: #40a070; }
code > span.fl { color: #40a070; }
code > span.ch { color: #4070a0; }
code > span.st { color: #4070a0; }
code > span.co { color: #60a0b0; font-style: italic; }
code > span.ot { color: #007020; }
code > span.al { color: #ff0000; font-weight: bold; }
code > span.fu { color: #06287e; }
code > span.er { color: #ff0000; font-weight: bold; }
</style>
<link rel="stylesheet" href="reveal.js/css/theme/simple.css" id="theme">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'reveal.js/css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="reveal.js/lib/js/html5shiv.js"></script>
<![endif]-->
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<style type="text/css">
.reveal h1 { font-size: 2.5em; }
.reveal section img {
border: none;
box-shadow: none;
}
body {
background: url("images/background.svg") no-repeat fixed top left
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
</section><section id="logarithmic-strains---principle" class="slide level2">
<h1>Logarithmic strains - Principle</h1>
<ul>
<li class="fragment"><span class="math">\({\underline{T}}\)</span> is the dual of the logarithmic strain <span class="math">\({\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}\)</span>
<ul>
<li class="fragment"><span class="math">\(P={\underline{T}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}={\underline{S}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{GL}}\)</span></li>
</ul></li>
<li class="fragment">if the small strain behaviour is <strong>thermodynamically consistent</strong>, so does the corresponding finite strain behaviour.</li>
<li class="fragment">the behaviour is <strong>objective</strong> due to its lagrangian nature.</li>
<li class="fragment"><strong>no restriction</strong> on the small strain behaviour (initial and induced <strong>orthotropy</strong> can be handled appropriately: application to Zircaloy ?)
<ul>
<li class="fragment">much more appealing than the hypoelastic Cast3M formulation</li>
</ul></li>
<li class="fragment"><em>drawbacks:</em> the pre- and post-processing stage are non trivial and may have a significant computation costs.</li>
<li class="fragment"><span class="math">\({\underline{T}}\)</span> is the dual of the logarithmic strain <span class="math">\({\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}\)</span>
<ul>
<li class="fragment"><span class="math">\(P={\underline{T}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}={\underline{S}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{GL}}\)</span></li>
</ul></li>
<li class="fragment"><span class="math">\({\underline{T}}\)</span> is the dual of the logarithmic strain <span class="math">\({\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}\)</span>
<ul>
<li class="fragment"><span class="math">\(P={\underline{T}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{log}}={\underline{S}}\,\colon\,{\underline{\epsilon}^{\mathrm{to}}}{}_{\text{GL}}\)</span></li>
</ul></li>
</ul>
</section></section></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: 'beige', // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
// { src: 'reveal.js/plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; }, }
// { src: 'reveal.js/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]});
</script>
</body>
</html>
This leads to a slide title under a significant margin and parts of the slide hidden.
reveal.js has a "height" option that can be set when you call Reveal.initialize.
With pandoc, provided you have a recent templates/default.revealjs, you can set the "height" variable:
---
author: me
title my title
height: 800
...
my presentation
Related
As the title above.
Assume, I have a paragraph:
It will be seen that this mere painstaking burrower and grub-worm of a poor devil of a Sub-Sub appears to have gone through the long Vaticans and street-stalls of the earth..
The bold string is a highlight. When I drag my mouse to select string
grub-worm of a poor devil of a Sub-Sub
Then I want to check if my selected text contains the highlight(or the part of the highlight) or not. How could I do that?
The code below is the example to add a highlight when I select a text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Highlights Example</title>
<script src="../dist/epub.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
<style type="text/css">
::selection {
background: yellow;
}
#extras {
width: 600px;
margin: 40px auto;
}
#highlights {
list-style: none;
margin-left: 0;
padding: 0;
}
#highlights li {
list-style: none;
margin-bottom: 20px;
border-top: 1px solid #E2E2E2;
padding: 10px;
}
#highlights a {
display: block;
}
#viewer.spreads {
top: 0;
margin-top: 50px;
}
[ref="epubjs-mk"] {
background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4JyB2aWV3Qm94PScwIDAgNzUgNzUnPjxnIGZpbGw9JyNCREJEQkQnIGlkPSdidWJibGUnPjxwYXRoIGNsYXNzPSdzdDAnIGQ9J00zNy41LDkuNEMxOS42LDkuNCw1LDIwLjUsNSwzNC4zYzAsNS45LDIuNywxMS4zLDcuMSwxNS42TDkuNiw2NS42bDE5LTcuM2MyLjgsMC42LDUuOCwwLjksOC45LDAuOSBDNTUuNSw1OS4yLDcwLDQ4LjEsNzAsMzQuM0M3MCwyMC41LDU1LjQsOS40LDM3LjUsOS40eicvPjwvZz48L3N2Zz4=") no-repeat;
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 0;
}
</style>
</head>
<body>
<div id="frame">
<div id="viewer" class="spreads"></div>
<a id="prev" href="#prev" class="arrow">‹</a>
<a id="next" href="#next" class="arrow">›</a>
</div>
<div id="extras">
<ul id="highlights"></ul>
</div>
<script>
// Load the opf
var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", {
width: "100%",
height: 600,
ignoreClass: 'annotator-hl',
manager: "continuous"
});
var displayed = rendition.display(6);
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
var next = document.getElementById("next");
next.addEventListener("click", function(){
rendition.next();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(){
rendition.prev();
}, false);
var keyListener = function(e){
// Left Key
if ((e.keyCode || e.which) == 37) {
rendition.prev();
}
// Right Key
if ((e.keyCode || e.which) == 39) {
rendition.next();
}
};
rendition.on("keyup", keyListener);
document.addEventListener("keyup", keyListener, false);
rendition.on("relocated", function(location){
// console.log(location);
});
// Apply a class to selected text
rendition.on("selected", function(cfiRange, contents) {
rendition.annotations.highlight(cfiRange, {}, (e) => {
console.log("highlight clicked", e.target);
});
contents.window.getSelection().removeAllRanges();
});
this.rendition.themes.default({
'::selection': {
'background': 'rgba(255,255,0, 0.3)'
},
'.epubjs-hl' : {
'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
}
});
// Illustration of how to get text from a saved cfiRange
var highlights = document.getElementById('highlights');
rendition.on("selected", function(cfiRange) {
book.getRange(cfiRange).then(function (range) {
var text;
var li = document.createElement('li');
var a = document.createElement('a');
var remove = document.createElement('a');
var textNode;
if (range) {
text = range.toString();
textNode = document.createTextNode(text);
a.textContent = cfiRange;
a.href = "#" + cfiRange;
a.onclick = function () {
rendition.display(cfiRange);
};
remove.textContent = "remove";
remove.href = "#" + cfiRange;
remove.onclick = function () {
rendition.annotations.remove(cfiRange);
return false;
};
li.appendChild(a);
li.appendChild(textNode);
li.appendChild(remove);
highlights.appendChild(li);
}
})
});
</script>
</body>
</html>
I assume you only know the functionality of epubjs you listed above. From rendition.on(selected,...), we can get output: cfiRange. From book.getRange(cfiRange).then(function (range)..., we can get output: range.
That means whenever we select a word or sentence, we get cfiRange and range.
cfiRange is epubcfi(/6/10[id139]!/4/2[filepos12266]/6,/3:1,/3:4, which based on position of the selected word. I don't know how it calculates/works but if you do then you can check if the cfiRange contains a existing highlight word's cfiRange.
range.toString() can give you the text. if your application is only storing a word. then you can check if the new selected word == or contain your existing highlight word.
For past many days i have been struggling to make a draggable and droppable event with specific CSS effect. All i want is , when draggble enters or touches the droppable , an under line should appear. i am fine with underline text-decoration thing if it gives me freedom to change color and space between text/element. And when draggable over/fit , the droppable should highlight. I have tried many things out there but no luck so far. I am using below code where any element can be draggble and droppable.
Please help.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
</head>
<style>
.nav li{
display:block;
position:relative;
padding: 8px;
margin:16px;
text-decoration: none;
color: blue;
text-align: left;
}
.UnderLine {
border-bottom: 4px solid blue;
}
.BcgColor {
background-color: yellow;
}
.active
{
border-color : cyan;
background :#F781D8;
}
.hover
{
border-color : red;
background : #00FF80;
}
<!-- .nav li span:after{
content: "";
position:absolute;
bottom: 0;
left:0px;
height: 2px;
width:0;
background: brown;
text-align: left;
} -->
</style>
<script>
$(function() {
//console.log("About 1 "+ $("li").css("width") );
//console.log("About 2 "+ $("#DragContact").innerWidth() );
var mywid = '94px'
$("li").css({"width": mywid});
var myimg = $('<img/>').attr({
src:"add-icon.png",
width:15
})
//$("li").addClass('UnderLine')
$( "li" ).draggable({
revert: 'invalid',
/*cursor: "pointer",
cursorAt: { top: -10, left: -20 },
helper: function( event ) {
return $( myimg );
},*/
drag: function( event ) {
$(this).css('opacity','0.2');
}
});
$( "li" ).droppable({
tolerance: "touch",
hoverClass: "UnderLine",
over: function(event, ui) {
console.log("i am over")
$(this).addClass('BcgColor');
},
out: function(event, ui) {
console.log("i am out")
$(this).removeClass('BcgColor');
},
drop: function(event, ui) {
console.log("hi dropped ");
$(this).removeClass('BcgColor');
$(this).after($(ui.draggable));
$(ui.draggable).css('opacity','1');
}
});
$( "li2" ).droppable({
tolerance: "intersect",
hoverClass: "BcgColor",
drag: function( event ) {
console.log("hello dragging")
$(this).css('opacity','0.2');
},
drop: function(event, ui) {
console.log("hi drop intersect")
console.log($(this).nodeName)
$(this).removeClass('BcgColor');
$(this).after($(ui.draggable))
}
});
});
</script>
<body>
<div>
<ul class="nav">
<li id="About">1 About</li>
<li id="Portfolio">2 Portfolio</li>
<li id="Contact">3 Contact</li>
<li id="DragContact">4 DragContact</li>
</ul>
</div>
</body>
</html>
What is I am trying to do ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
display-property="{{displayProperty}}"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
I am trying to bind display-property of ng-tagsinput to displayProperty model. It is working only first time. If I change the displayProperty, I am not seeing updates. How can I bind display-property so that whenever it changes, ng-tags-input to consider the change.
Another question -
How to use "text" attribute in ngTagsInput ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
key-property="name"
display-property="flag"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
Okay i am very new to learning how to use Laravel, however i am quite alright using core php. So i am just curious how would one correctly use Javascript in a Laravel Website?
Example: I wish to have some effects to Navigation Menu items which will hide or show on click.
Thanks
place your javascript code into blade template /resources/views/view_name.blade.php
for example my old script for test sorting:
routes.php
Route::post('sort', '\Rutorika\Sortable\SortableController#sort');
Route::get('sort/test', 'SortController#sort');
SortController
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
use App\Cat;
class ManagerController extends Controller
{
public function sort()
{
return view('sort',['cats'=>Cat::orderBy('position')->get()]);
}
}
sort.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery-1.8.3.min.js"></script>
<script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery.ui.touch-punch.min.js"></script>
<script src="http://sortable5.boxfrommars.ru/vendor/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
<style>
.grid-actions {
text-align: right;
}
.grid-actions .btn {
margin-left: 16px;
}
.sortable-handle {
cursor: move;
width: 40px;
color: #ddd;
}
.id-column {
width: 40px;
}
/** notifications style */
.alert {
font-size: 14px;
}
.bootstrap-growl .close {
margin-left: 10px;
}
/** forms */
</style>
</head>
<body>
<table class="table table-striped table-hover">
<tbody class="sortable" data-entityname="cats">
#foreach ($cats as $cats)
<tr data-itemId="{{{ $cats->id }}}">
<td class="sortable-handle"><span class="glyphicon glyphicon-sort"></span></td>
<td class="id-column">{{{ $cats->id }}}</td>
<td>{{{ $cats->title }}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
<script>
/**
*
* #param type string 'insertAfter' or 'insertBefore'
* #param entityName
* #param id
* #param positionId
*/
var changePosition = function(requestData){
$.ajax({
'url': '/sort',
'type': 'POST',
'data': requestData,
'success': function(data) {
if (data.success) {
console.log('Saved!');
} else {
console.error(data.errors);
}
},
'error': function(){
console.error('Something wrong!');
}
});
};
$(document).ready(function(){
var $sortableTable = $('.sortable');
if ($sortableTable.length > 0) {
$sortableTable.sortable({
handle: '.sortable-handle',
axis: 'y',
update: function(a, b){
var entityName = $(this).data('entityname');
var $sorted = b.item;
var $previous = $sorted.prev();
var $next = $sorted.next();
if ($previous.length > 0) {
changePosition({
parentId: $sorted.data('parentid'),
type: 'moveAfter',
entityName: entityName,
id: $sorted.data('itemid'),
positionEntityId: $previous.data('itemid')
});
} else if ($next.length > 0) {
changePosition({
parentId: $sorted.data('parentid'),
type: 'moveBefore',
entityName: entityName,
id: $sorted.data('itemid'),
positionEntityId: $next.data('itemid')
});
} else {
console.error('Something wrong!');
}
},
cursor: "move"
});
}
$('.sortable td').each(function(){ // fix jquery ui sortable table row width issue
$(this).css('width', $(this).width() +'px');
});
});
</script>
</html>
I'm creating a page to manage the our times at the office (for example when we made home-office). This requires selecting a date and then time-range.
I know about the Date-Picker from jQuery-UI, and there also seems to be something interesting for time picking. But since I need a start and end time, a UI to select date and time range would be perfect. Is there something you could recommend?
Visit jQuery UI datepicker range example and click "view source".
Combine with jquery timepicking solution found here.
That should hopefully get you going in the right direction.
Another interesting option could be handle the date in the date-picker and the time-range with a separated UI component (in this specific case start and end time are in the same day).
You can take a look at these time-range sliders:
$("#slider-range").slider(options_object);
http://jsfiddle.net/jrweinb/MQ6VT/
http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/
$(document).ready(function(){
$(".datetimepicker").datetimepicker({
timepicker: true,
allowTimes: [
'12:00', '12:30', '13:00','13:30','14:00',
'14:30', '15:00', '15:30', '16:00', ]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.16/jquery.datetimepicker.css">
<input type="text" class="datetimepicker" />
You can select time using this slider.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
background: url('https://www.w3schools.com/howto/contrasticon.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('https://www.w3schools.com/howto/contrasticon.png');
cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
<input type="range" min="10" max="22" maxvalue="10" class="slider" id="myRange">
<p>Value: <span id="demo">4PM</span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
slider.oninput = function() {
var time=slider.value;
if(time<12){
time=time+'AM';
}
else if(time>12){
time=time-12+'PM';
}
else if(time=12){
time=12+'PM';
}
//alert(time);
output.innerHTML = time;
}
</script>
</body>
</html>