I have a jQquery UI Slider in the browser:
<meta comntent="text/html;charset=utf-8" http-equiv="Content-Type">
<html>
<head>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- JQuery -->
<script src="script/jquery/jquery-3.6.0.min.js"></script>
<script src="script/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="script/jquery-ui/jquery-ui.css">
<script>
$(document).ready(function(){
$("#slider1").slider({
max:10,
min:-10,
step:1,
value:-10,
animate: 'true',
animate: 3000,
});
$("#slider1").slider("value", 0);
$("#slider1").on('slidechange', slideChangeEvent);
});
function slideChangeEvent(event, ui){
$("#slider1").off('slidechange');
$("#slider1").slider( "option", "value", 0 );
$("#slider1").on('slidechange', slideChangeEvent);
}
</script>
</head>
<body>
<div id="slider1"></div>
</body>
</html>
The idea is that the slider stays at the middle.
When the user pull it right or left and releases the slider, it will automatically move back to middle - Animated.
But it moves back instantly, instead of animated.
Can you show me what I did wrong in the code?
Consider the following that uses the .animate() of jQuery:
$(function() {
$("#slider1").slider({
max: 10,
min: -10,
step: 1,
value: -10,
animate: 3000,
change: function(e, ui) {
var w = $(this).width();
$(ui.handle).animate({
left: (w / 2)
}, 3000);
ui.value = 0;
}
});
$("#slider1").slider("value", 0);
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="slider1"></div>
A similar example is discussed here: Animating slider handle when altering the jQuery UI slider value option?
Without the animation, the slider will just jump to the new value.
I am using the following code in my MVC application on visual studio to generate a pie chart using the chartjs JavaScript framework. The text does get displayed in the console on the browser. But the chart is not visible.
The following error I get is undefined based on this property [#Html.Raw(ViewBag.ProductSalesCountName)]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pie Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script>
var PieChartData =
{
labels: [#Html.Raw(ViewBag.ProductSalesCountName)],
datasets: [{
label: 'ProductWise Sales Count',
backgroundColor: [
"#f990a7",
"#aad2ed",
"#9966FF",
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [#ViewBag.ProductSalesCount]
}]
};
window.onload = function () {
var ctx1 = document.getElementById("Piecanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'pie',
data: PieChartData,
options:
{
title:
{
display: true,
text: "ProductWise Sales Count"
},
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="Piecanvas"></canvas>
</div>
<div style="text-align: center">
Disclaimer:- This data is for demo it is
not real data it wont relate to any company
</div>
</body>
</html>
This is because your serialization does not produce a valid javascript array.
First remove the square brackets from #Html.Raw(ViewBag.ProductSalesCountName)
And in the controller use Newtonsoft.Json for the serialization.
ViewBag.ProductSalesCountName=
Newtonsoft.Json.JsonConvert.SerializeObject(list);
I am using the org.doctales.reveal DITA Open Toolkit plugin. I understand how to use the outputclass attribute on an element in a DITA topic to transform that element to a fragment in the resulting reveal.js html file.
But what about other reveal.js attributes, such as data-autoslide? I want to apply that attribute to an element in the DITA topic so that I can control the timing of fragments displaying on the reveal.js slide. Is there a way to do this?
To be clear, I am not asking about the args.reveal.autoslide plugin parameter. I have that set to apply to all slides and fragments. Rather, I want to control the timing of individual fragments.
What I have done so far:
I have the following DITA XML topic:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE task PUBLIC "-//OASIS//DTD DITA Task//EN" "task.dtd">
<task id="t_Portal-Dashboard" xtrf="t_Portal-Dashboard">
<title>Viewing The Client Portal Dashboard</title>
<shortdesc>The dashboard provides a summary of activities.</shortdesc>
<taskbody>
<context id="context_fnf_xhv_5cb">The dashboard provides a summary of activities.</context>
<steps>
<step outputclass="fragment fade-in">
<cmd>If the dashboard is not displayed, click <uicontrol>Dashboard</uicontrol>.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Tab-183.png" id="image_c52_1gf5_jwx" width="664px" height="190px" outputclass="fragment fade-in"/>
</stepresult>
</step>
<step outputclass="fragment fade-in">
<cmd>View the summary of information.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Data-183.png" id="image_c52_1gs5_jwx" width="800px" height="520px" outputclass="fragment fade-in"/>
</stepresult>
</step>
</steps>
</taskbody>
</task>
The Doctales DITA-OT plugin transforms to the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." />
<meta name="DC.Format" content="XHTML" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</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, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
But I want to the plugin to read (data-autoslide) attributes I've added to the DITA topic and so transform to something like the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." /> <meta name="DC.Format" content="XHTML" />
<meta name="DC.Identifier" content="concept_Client-Report-Portal" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</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, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" data-autoslide="8000" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in" data-autoslide="1000">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
welcome to Stackoverflow. You can find a list of all currently supported parameters in the documentation. If you want to request new parameters, that are supported by reveal.js but not directly through the plugin, please raise an issue on Github. The autoslide function is supported by setting the args.reveal.autoslide property as explained in the docs. You are welcome to join our Slack group for discussing anything the plugin and other things.
I am new to rails.
I am trying to add this code:
$.ajax({
url: "states.geojson",
dataType: 'json',
success: function load(d) {
var states = L.geoJson(d).addTo(map);
L.marker([38, -102], {
icon: L.mapbox.marker.icon({
'marker-color': '#f22'
}),
draggable: true
}).addTo(map)
.on('dragend', function(e) {
var layer = leafletPip.pointInLayer(this.getLatLng(), states, true);
document.getElementById('state').innerHTML = layer.length ?
layer[0].feature.properties.name : '';
});
}
});
which I got from here: http://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/
this is my index.html.erb :
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' >
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#state {
position:absolute;
top:10px;
right:10px;
background:#fff;
font-size:30px;
padding:10px;
z-index:999;
}
</style>
<!-- <script src="leaflet-pip.min.js"></script> -->
<div id='map'></div>
<div id='state'></div>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'lizozomro.map-6yvs8g1g')
.setView([38, -102.0], 5);
$.ajax({
url: "states.geojson",
dataType: 'json',
success: function load(d) {
var states = L.geoJson(d).addTo(map);
L.marker([38, -102], {
icon: L.mapbox.marker.icon({
'marker-color': '#f22'
}),
draggable: true
}).addTo(map)
.on('dragend', function(e) {
var layer = leafletPip.pointInLayer(this.getLatLng(), states, true);
document.getElementById('state').innerHTML = layer.length ?
layer[0].feature.properties.name : '';
});
}
});
</script>
</body>
</html>
I am getting a resource not found error (404) on states.geojson
I am not sure where exactly I should place it or how to reference using the correct paths.
Right now I have a copy of the file in my root app folder, one in my view folder(called maps), right next to the index.html.erb
How can I reference the resource correctly?
put it in the my_project/public/ folder. You also want to rename the file to states.geojson.json
I'm building a simple application which will mark the states in India depending to state name.
So, I started with experimenting as the following example.
It works good if I set the displayMode : 'markers' but according to their documentation states can be display as regions.
But, its not working. Am I doing something wrong?
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State'],
['West Bengal'],
]);
var options = {
region: 'IN',
displayMode: 'regions',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You need to set your options to resolution: 'provinces'
Here is the code (working):
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Data'],
['West Bengal', 5],
]);
var options = {
region: 'IN',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>