I want to add to the beginning of the axes a label to indicate "not very important" and a label to the end of the axes "very important." I am using the following slider program: http://sujeetsr.github.io/d3.slider/.
As a beginner to JS, would appreciate your help on how it would be best to do that.
How about this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.js"></script>
</head>
<body>
<div id="slider"></div>
<script>
var tickFormatter = function(d) {
return d === 0 ? "not important" : "very important"
}
var slider = d3.slider().min(0).max(1).ticks(1).tickFormat(tickFormatter)
d3.select('#slider').call(slider);
d3.select(".tick>text").style("text-anchor", "start");
d3.select(".tick:last-of-type>text").style("text-anchor", "end");
</script>
</body>
</html>
Related
I am developing a Radial Gauge and I need to add dynamic data to it. The following is the code that i have done with dynamic data. Can some one help me with it to add dynamic data. My code example is given below.
var arrGauge_360 = [
{key:"data-type",value:"radial-gauge"},
{key:"data-width",value:"400"},
{key:"data-height",value:"400"},
{key:"data-max-value",value:"100"},
{key:"data-value",value:"50"}, //this value has to be dynamic. not a static data.
{key:"data-animate-on-init",value:"true"},
{key:"data-major-ticks",value:"0,20,40,60,80,100"},
];
function myFunction_gauge_360(){
debugger
$("#gauge_360").append("<canvas id='ht_gauge_360'></canvas>");
arrGauge_360.forEach(function(item,index){
debugger
$("#ht_gauge_360").attr(item.key,item.value);
});
};
<!doctype html>
<html>
<head>
<title>Gauge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="jquery-3.4.1.js"></script>
<script src="HKgauge.js"></script>
</head>
<body>
<div style="text-align: center;">
<div id="gauge_360">
</div>
</div>
</body>
<script>
$(function(){
myFunction_gauge_360("gauge_360",arrGauge_360);
})
</script>
</html>
I'm trying to dynamically change my html by calling my Javascript class in jQuery. I keep getting an Uncaught Reference error. I know I have to window.onload my class somewhere. I've tried to load it before and after the class, before and after my jquery, right before the end of my HTML body, but I keep getting Uncaught Reference errors for the class I'm calling and the prototype (randomCard()) that I use in my jQuery.
I've also tried switching the order of script files at the end of my HTML body. I'm new to Javascript.
game.js
function CardsAgainstHumanity () {
this.blackCards = [
"How did I lose my virginity?",
"Why can't I sleep at night?",
"What's that smell?",
"I got 99 problems but ______________ ain't one.",
"Maybe she's born with it. Maybe it's ______________.",
"What's the next Happy Meal toy?",
"Here is the church. </br> Here is the steeple. </br> Open the doors </br> And there is ________________.",
"It's a pity that kids these days are all getting involved with _______________."
];
this.whiteCards = [];
this.score = 0;
randomCard();
}
CardsAgainstHumanity.prototype.randomCard = function () {
var random = this.blackCards[Math.floor(Math.random() * this.blackCards.length)];
return random;
};
index.js
$(document).ready (function() {
$(".black-cards").on("click", function () {
$(this).text(randomCard());
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cards Against Humanity</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
<div class="container">
<div class="black-cards"> </div> <!-- Black Cards -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/game.js"></script>
<script src="js/index.js"></script>
</body>
</html>
actually, I'm trying to change DIV Content when Date changed..
I can change Div content through animate function().
But I can't apply it as Date changed...T.T
here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="js/jquery-1.12.2.min.js"></script>
<style>
.stick{
background :cyan;
width:0px; height:20px
}
<body>
<div class="stick"></div>
</body>
<script>
var d = new Date();
//d.getDate().. what function should I use?
$(".stick").animate({width:"+=10"}); //here is ok
</script>
</html>
Try this its working :
HTML :
<input type="date" name="date" id="date"/>
<div class="stick"></div>
JS :
var d = $('#date').change(function(){
$(".stick").animate({width:"+=10"});
});
CSS :
.stick{
background :cyan; width:0px; height:20px
}
Jsfiddle : https://jsfiddle.net/w5ur8w2u/
If what you're looking after is something like a digital clock, then you may need setInterval.
I use from TouchSwipe jQuery plugin in my code for detect movement mouse and show pixel move when go to left or right.
I download TouchSwipe jQuery plugin from this address : TouchSwipe
and use in my code...
this is my code :
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/Newsfeed.css" media="screen" type="text/css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.touchSwipe.js" type="text/javascript"></script>
<script src="js/Newsfeed.js" type="text/javascript"></script>
</head>
<body>
<div id="fullpage">
<div class="content-part selected"></div>
<div class="content-part selected"></div>
<div class="content-part selected"></div>
<div class="content-part selected"></div>
</div>
</body>
</html>
jQuery:
$(document).ready(function() {
$('#fullpage .selected').swipe( {
swipeStatus:function(event, phase, direction, distance, duration)
{
var str = "";
if (phase == "move")
str="You have moved " + distance +" px, If you leave the swipe object, the swipe will end";
if (phase == "end")
str="The swipe has ended"
$(this).text(str);
},
triggerOnTouchLeave:true,
threshold:null
});
});
but this jQuery code not working please help me.... XD
your last js part ends with a ":" not a ";", maybe thats the problem?
EDIT:
I tried the code myself and it works fine, do your "fullpage" and "selected" divs have height and width?
I am trying to render the Y-axis label rotated 90 degree. Quoting the jqplot example
By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements.
Here is the error i get from Firebug
TypeError: a.jqplot.CanvasFontRenderer is not a constructor
Here is my whole code
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<!--Jquery Base Library 2.0.3 -->
<script src="jquery-2.0.3.min.js"></script>
<!-- jqPlot Libraro -->
<script src="jquery.jqplot.min.js"></script>
<!-- More jqplot file -->
<script src="jqplot.canvasTextRenderer.min.js"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<!-- example jqplot file -->
<script src="test.js"></script>
</head>
<body style="margin:0px; padding-left:50px; padding-right:50px;" >
<div style="padding-left: 20px; padding-right:20px; background-color:#FF7519;">
<div id="chart" style="height:300px;width:800px; "></div>
</div>
</body>
</html>
here is test.js
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
cosPoints.push([i, Math.cos(i)]);
}
var plot1 = $.jqplot('chart', [cosPoints], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Some X Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Some Y Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
});
I am clueless, I don't understand what I am doing wrong since I am following the basic tutorial of this API. Thank you for your time
match your text renderer file with the file from this link: jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.js
I think this is the correct file and it has the jqplot.CanvasFontRenderer inside it. Maybe your file doesn't have that