First of all, I'm pretty new to jQuery but with the help of http://css-tricks.com/examples/Circulate/ I managed to figure out how to create ellipses in my code.
Here's the thing though, I want to create an input field/text box for users to type in their own "speed" value (which is now set at "500") and then click a submit button to start the ellipse.
$("#ball").circulate({
speed: 500,
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
I figured out the submit button part, but I keep running in circles when it comes to finding a way for a visitor of my website to manually input the "speed". I would be much obliged if someone could point me in the right direction/could give me a starting point.
Try this:
$('#submitButton').click(function() {
var userSpeed = +$('#inputBox').val();
if (!userSpeed) {userSpeed == 500};
$("#ball").circulate({
speed: userSpeed,
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
});
Then, when the user clicks on the submit button, your code gets the new value and sets the speed for the function. If the user clicks the button without having entered a number, a default speed is used.
You have to use .val() function to get the value from an input and then use it to set the speed.
var input = $("#YOUR_INPUT_ID");
$("#ball").circulate({
speed: input.val(),
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
Related
I recently encountered a problem trying to make a div's content horizontaly scrollable, smooth. I achieved the result I want when using a touchpad, sadly its diffrent with a mouse scrollwheel. To get the scroll intensity I use "event.wheelDelta". When logging this to the console and using a touchpad to scroll to the right I will get numbers indicating the intensity, which looks similar to this: 1, 2, 3, 4, 15, 45, 150, 50, 30, 15, 13, 4, 3, 2, 1... But when I use a scrollwheel on a mouse to scroll it looks like this: 150, 150, 150, 150, 150... That in the end causes a non smooth scrolling behavior when using the scrollwheel on a mouse. Here is a good example of the issue: https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event. Can someone help me with this? Below you see the logic of the function I use. The function gets called on a wheel event in Vue.js (v-on:wheel="replaceScrollDirection($event)").
replaceScrollDirection() {
event.preventDefault()
this.scrollPosition = document.getElementById("holideWrapper").scrollLeft
this.scrollIntensity = event.wheelDelta
this.scroll = this.scrollPosition + this.scrollIntensity * -1
document.getElementById("holideWrapper").scrollTo({left: this.scroll})
}
var lbr = (lengthbrsvg) ? lengthbrsvg : def_svg;
let's say def_svg is a valid image URL.
lengthbrsvg is dynamically set which is either image URL or empty.
Now lbr is valid image URL even if the lengthbrsvg is empty.
loadSVGFromURL function only accepts valid svg url. otherwise throws error. So the default image is passed when the lengthbrsvg is empty. We use loadSVGFromURL function inside another same function repeatedly to add svg to a canvas one by one. Due to the use of def_svg the number of request increases which is unnecessary. So, is there a way to not run that function if the image URL is empty which in turn dont request for def_svg image. in other words is there another way than using ternary operator.
fabric.loadSVGFromURL(lbr, function(obj_lengthbr) {
var lpatpath;
lpatpath = new fabric.PathGroup(obj_lengthbr, { left: 0, top: 0, width: 620, height: 641 });
lpatpath.setPatternFill({ source: lengthbrpattern, repeat: 'repeat', offsetX: 'left', offsetY: 'top' });
canva.add(lpatpath);
fabric.loadSVGFromURL((lengthbrbottom) ? lengthbrbottom : def_svg , function(obj_lengthbrbot) {
var BorPath;
//========
//========
fabric.loadSVGFromURL( , function(obj_lengthbrbot) {
//=====
//=====
});
});
});
From the above snippet, I don't want to run the loadSVGFromURL if the passing image URL is empty. how do I achieve that?
I create time counter using Knob:
$(function($) {
$(".knob").knob({
'fgColor': '#b9e672',
'thickness': 0.3,
'width':150,
'data-min': 0,
'data-max': 30,
'readOnly': true
});
var initval = 30;
$({value: 0}).animate({value: initval},{
duration: 10000,
easing:'swing',
step: function()
{
$('.knob').val(this.value).trigger('change');
}
});
});
I want to display counter in milliseconds, like picture:
how to do this?
thanks,
You can use the step option to chose the step that you would update in your knob value.
There is also another useful thing you can do, that is set the draw function. The draw function determines what gets drawn in the label. By default, it matches the value, but you don't have to.
For instance, if you want to update the knob in milliseconds, but want to round the value to display only the full seconds in the label, you could do something like:
draw: function () { $(this.i).val(Math.round(this.cv)); }
where, accordingly to the comments on the jQuery-knob source, this.cv is the "change value ; not commited value", and this.i the "mixed HTMLInputElement or array of HTMLInputElement"
I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!
Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.
I'm using Sparklines and am trying to draw a simple blox plot with predetermined min, max, whiskers, quartiles, and one additional value -- the user's value that might fall within the quartile or outside (the whole point is to show the user where his/her value falls in the distribution)
What is the appropriate way to do this? I can get a basic box up but can't see how to lay a point on top of it. Also I can't see how to set min and max but it looks like the outliers sort of do this.
Here's my code:
<script type="text/javascript">
$(function() {
var myboxvalues = [0, 200, 450, 500, 550, 800, 1000];
$('.inlinebox').sparkline( myboxvalues, {type: 'box', raw: true });
});
</script>
</head>
<body>
<p>
My box: <span class="inlinebox"></span>
</p>
Thanks!
The flag is "target: ..."
{type: 'box', raw: true, target: 713 }