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">
Related
I am trying to add/delete yAxis dynamically but I observe performance issues. It takes more than a second (sometimes it goes upto 4 seconds) to dynamically add or remove a series into a new yAxis. I need to load end of day data (price point for each day) for 10 or more years in the chart.
Any advice in improving the performance will be much appreciated.
Few points to note -
I can use different type of charts (line, ohlc, candlestick, area etc.)
I need mouse tracking to be enabled as I am using click events on the series.
User will have option to either choose to apply data grouping or to not.
Below is my code sample to illustrate the problem.
var chart;
var index = 2;
var groupingUnitsD = {units:[['day',[1]]], enabled:true};
var groupingUnitsWM = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
$(function () {
var ohlc = [];
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc
var volume = [],
dataLength = data.length,
i = 0;
for (i; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
}
loadChart(data);
});
function loadChart(cdata){
var highchartOptions = {
plotOptions:{
line: {
enableMouseTracking: true,
animation:false,
marker: {
enabled: false
}
},
series:{
cursor: 'pointer',
}
},
chart:{
renderTo:'container'
},
navigator: {
outlineColor: '#0066DD',
outlineWidth: 1
},
xAxis: [{
gridLineWidth: 1,
gridLineColor: "#eaf5ff",
lineColor: '#FF0000',
lineWidth: 1
}],
yAxis:[{
title:{
text:"initial data"
},
id:'myaxis-1',
height:'14%',
top:'0%'
}],
series: [{
data: cdata,
turboThreshold:0,
dataGrouping:groupingUnitsD
}]
};
chart = new Highcharts.StockChart(highchartOptions);
}
$button = $('#button');
$delButton = $('#delbutton');
$button.click(function () {
var axisObj = {
title: {
text: "axis-" + index,
},
id:'myaxis-'+ index
};
chart.addAxis(axisObj, false);
console.log("Added axis:" + 'myaxis-'+ index);
$('#axisList').append($('<option></option>').text('myaxis-'+ index));
var seriesData = new Object();
seriesData.name = 'axis-' + index;
seriesData.id = 'myaxis-' + index;
seriesData.yAxis = 'myaxis-'+ index;
seriesData.data = ohlc;
seriesData.type = 'line';
seriesData.dataGrouping = groupingUnitsD;
chart.addSeries(seriesData);
updateAxisHeight();
index++;
});
$delButton.click(function () {
var $select = $('#axisList');
console.log($select.val());
console.log(chart.get($select.val()));
var selId = $select.val();
chart.get(selId).remove();
$('option:selected', $select).remove();
var i=0;
updateAxisHeight();
});
updateAxisHeight = function(){
var i=0;
$("#axisList > option").each(function() {
chart.get(this.value).update({ height: '14%',top: (i*15) + '%',offset:0 });
i++;
});
}
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<button id="button" class="autocompare">Add yAxis</button><br>
<!--Entrt yAxis index to delete:<input type='text' id="delAxis"/> -->
<select id="axisList" name="axisList">
<option value="myaxis-1" selected="selected">myaxis-1</option>
</select>
<button id="delbutton" class="autocompare">Delete yAxis</button>
<div id="container" style="height: 800px"></div>
You can significantly improve the performance in this case with one trick: when performing several consecutive operations that each require a redraw (add series, add axis, update axis height), don't redraw until you've told Highcharts about all the operations.
On my machine, this improves the performance of your add axis function by 5x-6x. See code and comments below.
var chart;
var index = 2;
var groupingUnitsD = {units:[['day',[1]]], enabled:true};
var groupingUnitsWM = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
$(function () {
var ohlc = [];
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc
var volume = [],
dataLength = data.length,
i = 0;
for (i; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
}
loadChart(data);
});
function loadChart(cdata){
console.time("chart load");
var highchartOptions = {
plotOptions:{
line: {
enableMouseTracking: true,
animation: false,
marker: {
enabled: false
}
},
series:{
cursor: 'pointer',
}
},
chart:{
alignTicks: false,
events: {
load: function () {
console.timeEnd("chart load");
}
},
renderTo:'container'
},
yAxis:[{
title:{
text:"initial data"
},
id:'myaxis-1',
height:'14%',
top:'0%'
}],
series: [{
data: cdata,
turboThreshold:0,
dataGrouping:groupingUnitsD
}]
};
chart = new Highcharts.StockChart(highchartOptions);
}
$button = $('#button');
$delButton = $('#delbutton');
$button.click(function () {
var startTime = new Date().getTime();
var axisObj = {
title: {
text: "axis-" + index,
},
id:'myaxis-'+ index
};
chart.addAxis(axisObj, false, false); // don't redraw yet
console.log("Added axis:" + 'myaxis-'+ index);
$('#axisList').append($('<option></option>').text('myaxis-'+ index));
var seriesData = new Object();
seriesData.name = 'axis-' + index;
seriesData.id = 'myaxis-' + index;
seriesData.yAxis = 'myaxis-'+ index;
seriesData.data = ohlc;
seriesData.type = 'line';
seriesData.dataGrouping = groupingUnitsD;
chart.addSeries(seriesData, false); // don't redraw yet
updateAxisHeight(false); // don't redraw yet
index++;
// finally, redraw now
chart.redraw();
var endTime = new Date().getTime();
console.log("add axis took " + (endTime - startTime) + " msec");
});
$delButton.click(function () {
var $select = $('#axisList');
console.log($select.val());
console.log(chart.get($select.val()));
var selId = $select.val();
chart.get(selId).remove();
$('option:selected', $select).remove();
var i=0;
updateAxisHeight();
});
updateAxisHeight = function(redraw){
// set redraw to true by default, like Highcharts does
if (typeof redraw === 'undefined') {
redraw = true;
}
var i=0;
$("#axisList > option").each(function() {
// don't redraw in every iteration
chart.get(this.value).update({ height: '14%',top: (i*15) + '%',offset:0 }, false);
i++;
});
// redraw if caller asked to, or if the redraw parameter was not specified
if (redraw) {
chart.redraw();
}
}
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<button id="button" class="autocompare">Add yAxis</button><br>
<!--Entrt yAxis index to delete:<input type='text' id="delAxis"/> -->
<select id="axisList" name="axisList">
<option value="myaxis-1" selected="selected">myaxis-1</option>
</select>
<button id="delbutton" class="autocompare">Delete yAxis</button>
<div id="container" style="height: 800px"></div>
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'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
Using the jQuery UI Slider, I'm trying to figure out how to make it so that the slider stops working once certain conditions are met. Any ideas? I thought stopping event propogation in the "start" part would work, but ...it doesn't. So I'm still clueless and lost.
<script type="text/javascript">
$(document).ready(function () {
var spendable = 1000;
var spent = 0;
function spend(quantity) {
var remaining = spendable - quantity;
$('#spendable').text(remaining);
}
$("#eq .slider").each(function () {
var current = 0;
$(this).slider({
range: "min",
step: 100,
value: 0,
min: 0,
max: 500,
animate: true,
orientation: "horizontal",
start: function (event, ui) {
if (spent < spendable)
return true;
event.stopPropagation();
},
slide: function (event, ui) {
// set the current value to whatever is selected.
current = ui.value;
$(this).parent('div:eq(0)').find('.spent').text(current);
var totalled = 0;
$("#eq .slider").each(function () {
totalled += parseInt($(this).parent('div:eq(0)').find('.spent').text());
spend(totalled);
});
}
});
});
Try:
.....
slide: function (event, ui) {
// set the current value to whatever is selected.
current = ui.value;
if(current > 300){
current = 300; //otherwise, it's stuck at 301
return false;
}
....rest of your code