i've been googling nearly a day just to get this to work with no luck. How can i achieve from this code
$(function () {
var slider2 = $("#slider2").slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
start: function( event, ui ) {
$(this).find('.ui-slider-handle.ui-state-hover')
.append('<span class="ui-slider-tooltip">'+ui.value+'</span>');
},
slide: function( event, ui ) {
$(this).find('.ui-slider-tooltip').text(ui.value);
},
stop: function( event, ui ) {
$(this).find('.ui-slider-tooltip').remove();
}
});
});
to this code
$(function () {
var slider2 = $("#slider2").slider({
range: true,
min: 0,
max: 500,
showTooltip: true
});
});
http://jsbin.com/epekex/1
Related
I want to create a chart that reads its data from an Api. To do that i have this fiddle http://jsfiddle.net/68oe1oLf/69/
Note: https://jsfiddle.net/68oe1oLf/69/ will lead to mixed content error and will fail to load data from the api
This is the javascript code
$(document).ready(function () {
$.get( "http://firmbridgecapital.com/live.php", function( dt ) {
localStorage.setItem("data", dt);
});
window.setInterval(function(){
$.get( "http://firmbridgecapital.com/live.php", function( dt ) {
localStorage.setItem("data", dt);
});
}, 5000);
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = parseInt(localStorage.getItem("data"));
series.addPoint([x, y], true, true);
}, 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
max: 3,
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -150; i <= 0; i += 25) {
data.push({
x: time,
y: parseInt(localStorage.getItem("data"))
});
}
return data;
}())
}]
});
});
I borrowed the idea from this docs example http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/
My chart is always grounded on value 1 and does not show the changing values in the y axis. How may i fix this?.
The value you are referencing, i.e. live php page, seems to be 1.x and increasing very slowly. (1.7 while I was looking).
In your parsing you do the following:
y = parseInt(localStorage.getItem("data"));
And since the value is 1.7, and you try to parse it as an integer with parseInt, it gets converted to 1. Using parseFloat will give you a slowly increasing graph.
I have the following script, using howler.js and jquery-ui-1.8.21.custom.min.js:
$(function(){
var sounduser1 = new Howl({
urls: ['studio/keysintheair.mp3', 'studio/keysintheair.ogg'],
buffer:true,
volume: 1.0,
onend: function() {
$('.buttons').fadeIn();
},
});
var sounduser2 = new Howl({
urls: ['studio/keysintheair-original.mp3'],
buffer:true,
volume: 0.1,
});
var thisArray = {
user1: sounduser1,
user2: sounduser2
};
$.each( thisArray, function(key,value) {
$('.buildplayer .player').clone().attr('id',key).appendTo('#song');
$('#song .player:last .waveform').css("width", value._duration + "px");
$('#song .player:last .slider').slider({
value: value.volume() * 100,
range: "min",
animate: true,
orientation: "horizontal",
//Slider Event
slide: function(event, ui) { //When the slider is sliding
var now_id = $(this).parent().parent('.player').attr('id');
thisArray[now_id].volume(ui.value/100);
},
});
});
$('.mainplayer .trackslider').slider({
value: 0,
range: "min",
animate: true,
orientation: "horizontal",
//Slider Event
slide: function trackslider(event, ui) { //When the slider is sliding
var audiogetlength = Object.keys( thisArray ).map(function ( key ) { return thisArray[key]._duration; });
var longest = Math.max.apply( null, audiogetlength );
var dividedlength = 100/ui.value;
$.each( thisArray, function( key, value ) {
value.pos(longest/dividedlength);
if (ui.value > value._duration) {
value.stop();
}
});
},
});
setInterval(function starttrackslider() {
var dividedslider = sounduser1._duration/sounduser1.pos();
$('.trackslider').slider('value', 100/dividedslider);
},1000);
//Single Audio Track Player
$('.ex1-play').on('click', function(){
var now_id = $(this).parent().parent('.player').attr('id');
thisArray[now_id].stop().play();
});
$('.ex1-stop').on('click', function(){
var now_id = $(this).parent().parent('.player').attr('id');
thisArray[now_id].stop();
});
$('.ex1-loop').on('click', function(){
var now_id = $(this).parent().parent('.player').attr('id');
thisArray[now_id].loop(true);
});
//Main All Track Player
$('.main-play').on('click', function(){
$.each( thisArray, function( key, value ) {
value.stop().play();
$('.buttons').fadeOut();
});
});
$('.main-pause').on('click', function(){
$.each( thisArray, function( key, value ) {
value.pause();
});
});
$('.main-stop').on('click', function(){
$.each( thisArray, function( key, value ) {
value.stop();
$('.buttons').fadeIn();
});
});
$('.main-loop').on('click', function(){
$.each( thisArray, function( key, value ) {
value.loop(true);
});
});
});
At the last part of $('.mainplayer .trackslider').slider({ }); you will find if (ui.value > value._duration) {value.stop();}
value equals the Howl called sounduser2
Both audiotracks start at the same time. Using a slider will make me skip through the audio. The slider will have the length of the longest audiotrack - which is Howl called sounduser1. Using the slider will return a number which will activate the position of the audio.
If the slider returns a number bigger then the actual length of the audiotrack it should stop the shorter audiotrack.
For some reason it won't stop playing, eventhough the situation is right. Is there anybody who knows what to do?
$('.mainplayer .trackslider').slider({
value: 0,
range: "min",
animate: true,
orientation: "horizontal",
//Slider Event
slide: function (event, ui) { //When the slider is sliding
var audiogetlength = Object.keys( thisArray ).map(function ( key ) { return thisArray[key]._duration; });
var longest = Math.max.apply( null, audiogetlength );
var dividedlength = 100/ui.value;
$.each( thisArray, function( key, value ) {
var percentvalue = (value._duration/longest)*100;
if (percentvalue > ui.value) {
if (value.pos()==0) {
value.play().pos(longest/dividedlength);
} else {
value.pos(longest/dividedlength);
}
} else {
value.stop();
}
});
}
});
Did the trick
I've written a script for a simple jquery ui slider. There are two sliders (later I'll add more) and when you change their value, it displays below them, and then updates a total. What I'm having a hard time figuring out, is how to make it so as you're sliding the values are getting updated, instead of getting updated after you've finished.
Thanks for any help!
Fiddle of Demo
http://jsfiddle.net/tMmDy/
HTML
<div class="slider_1 slider"></div>
<p id="slider_1-value"></p>
<div class="slider_2 slider"></div>
<p id="slider_2-value"></p>
CSS
.slider {
width:100px;
height:5px;
background:blue;
}
JS
$(".slider").slider({
animate: "fast",
max: 25,
min: 0,
step: 1,
value: 10,
option: {}
});
$(".slider_1").on("slidechange", function (event, ui) {
total_1 = $(".slider_1").slider("value");
$("#slider_1-value").html(total_1);
total_value_update();
});
$(".slider_2").on("slidechange", function (event, ui) {
total_2 = $(".slider_2").slider("value");
$("#slider_2-value").html(total_2);
total_value_update();
});
function total_value_update() {
total_values = total_1 + total_2;
$("#total_value").html(total_values);
}
Use the slider's .slide() event and try it like this:
jsFiddle example
var total_1, total_2;
$(".slider").slider({
animate: "fast",
max: 25,
min: 0,
value: 10,
slide: function (event, ui) {
total_1 = $(".slider_1").slider("value");
total_2 = $(".slider_2").slider("value");
$("#slider_1-value").html(total_1);
$("#slider_2-value").html(total_2);
total_value_update();
},
change: function (event, ui) {
total_1 = $(".slider_1").slider("value");
total_2 = $(".slider_2").slider("value");
$("#slider_1-value").html(total_1);
$("#slider_2-value").html(total_2);
total_value_update();
}
});
function total_value_update() {
total_values = total_1 + total_2;
$("#total_value").html(total_values);
}
I am working with jQuery UI slider.
Here is the code i am using:
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 5,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
There will be 5 steps and I'd like to show the strings in each step instead of the numbers:
1=very sad
2=sad
3=not so sad
4=happy
5=very happy
How can I do this ?
You can put your step labels in an array, then use the slider's value as an index into that array:
var steps = [
"very sad",
"sad",
"not so sad",
"happy",
"very happy"
];
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$("#amount").val(steps[ui.value]);
}
});
$("#amount").val(steps[$("#slider").slider("value")]);
});
i have following code for jQuery UI vertical slider, but i need auto slide (auto scroll) that slider.
(auto slide on page load)
anyone can help?
<script>$(function() {
var scrollPane = $('#content-scrolls'),
scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;
$("#slider-vertical").slider({
orientation: "vertical",
range: "max",
min: 0,
max: scrollableHeight,
value: scrollableHeight,
animate: true,
slide: function(event, ui) {
scrollPane.css({top: ui.value - scrollableHeight});
}
}); }); </script>
$(function() {
var scrollPane = $('#content-scrolls'),
scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;
$("#slider-vertical").slider(
{ change: handleChange,
slide: handleSlide,
orientation: "vertical",
range: "max",
min: 0,
max: scrollableHeight,
value: scrollableHeight,
animate: true,
});
setTimeout(scrollWindow, 1000);
function scrollWindow() {
var slideValue;
slideValue = $("#slider-vertical").slider("value");
if(slideValue > -100)
{
$("#slider").slider("value", slideValue - 1);
setTimeout(scrollWindow, 1000);
}
}
function handleChange(e, ui) {
var maxScroll = $("#scroller").attr("scrollHeight") -$("#scroller").height();
$("#scroller").animate({ scrollTop: -ui.value *(maxScroll / 100)}, 1000);
}
function handleSlide(e, ui) {
var maxScroll = $("#scroller").attr("scrollHeight") -$("#scroller").height();
$("#scroller").attr({ scrollTop: -ui.value* (maxScroll / 100) });
}
});
add the scroller as follow:
<div id="slider"></div>
<div id="scroller">