I need to use a Range Slider to set a time range (8-23) but I need some base conditions on it (I basically need the minimum range to be 1h):
When the two pickers are on the same position the right piker goes "+1"
On right limit (23) the values have to be "22,23)
Here is the code as I tested so far: JSFiddle URL
This works only before the right limit of the slider, when I have "23,23" or "22,23" my getSlide check function does not work properly and I don't understand how to fix it..
Any help?
Thanks!
I solved myself coding all conditions only in slide event:
...
slide: function (event, ui) {
val1 = ui.values[0];
val2 = ui.values[1];
if(val2-val1 < 1 || val1 > 22){
return false;
}
$("#start").text(ui.values[0]);
$("#stop").text(ui.values[1]);
},
...
The strange behaviour with the previous version is still not explained, but it works.
Related
I am currently trying to make an extended droppable area but I got some problem. Here is the code (explanation below) :
$('div#1').find('div[cid="draggable"]').each(function(i, e) {
$(e).after("<div id='drp' style='width:100%;'></div>");
$('div#drp').droppable({
drop:function(event, ui) {
ajaxCall = false;
ui.draggable.css("left", "0");
ui.draggable.css("top", "0");
$(event.target).after(ui.draggable);
$(this).css("height", "0px");
$(this).removeClass("isDroppable");
$(this).removeClass("mb-1");
var t = ui.draggable.attr("i");
// callPage(81758758, 'POST', {t:t,s:0}, '');
},
over:function(event, ui) {
$(this).css("height", (parseInt(ui.helper.css("height")) + 50)+"px");
$(this).addClass("isDroppable");
$(this).addClass("mb-1");
if($(this).prev().attr("o") < ui.helper.attr("o")) {
// Move to top : Un padding s'ajoute, étrangement.
}
},
out:function(event, ui) {
$(this).css("height", "0px");
$(this).removeClass("isDroppable");
$(this).removeClass("mb-1");
},
accept:function(d) {
if(d.attr("cid") == "draggable" && d.attr("i") != $(this).prev().attr("i")) {
return true;
}
},
tolerance:'touch'
});
});
So actually, I am creating, for each child of div#0, a div#drp. It means that if I have, in div#0, 5 div#card, I will have, for each div#card, a div#drp (width:100%, height:0), for a total amount of 5 div#drp. As you should have understand, each div#drp is a DROPPABLE AREA (and each div#card can be dropped on each div#drp).
But here is the problem : The only way to get this working is to set the tolerance, as it is on my code, to "touch", as long as "pointer", "intersect" & "fit" will never work because of div#drp is set to height=0px.
Now, imagine the following structure :
<div id="card" i="1" style="width:100%;height:300px;">CARDTEST</div>
<div id="grp" i="1" style="width:100%;height:0;"></div>
<div id="card" i="2" style="width:100%;height:100px;">CARDTEST</div>
<div id="grp" i="2" style="width:100%;height:0;"></div>
<div id="card" i="3" style="width:100%;height:100px;">CARDTEST</div>
<div id="grp" i="3" style="width:100%;height:0;"></div>
Here, if I move the 2nd or 3rd card, everything will be alright. But if I move the first card (with height:300px) :
First, the id#grp height will be set to "(parseInt(ui.helper.css("height")) + 50)+"px"", it means 350px.
Second, even with that, my first card will trigger the first div#drp and the second div#drp as long as it height is too big. It's like if changing the height of my div#drp doesn't extend my DROPPABLE AREA.
So, my question is : Is there a way to "actualise" the DROPPABLE AREA within the "over" event ? I tried to change the droppable event within the "over" event, I also tried to change the tolerance within the "over" event, but nothing seems to work.
Any idea ?
Solution :
There isn't anything in Droppable() making this possible. However, it is possible to update DROPPABLE AREA positions within Draggable options. See below :
$( ".selector" ).draggable({
refreshPositions: true
});
I didn't expect a DROPPABLE property to be editable through DRAGGABLE elements. Note that, according to the documentation :
"If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance."
Tested on multiples devices, it doesn't cause lags or freez, so it should be fine.
Note that this config value will also fix margins caused by any Element added on Droppable.over if the Draggable Element is under the Droppable element (In example, if you want to do the same as what Sortable() do, but with Draggable() & Droppable()).
Problem solved !
I have seen similar questions just like these (even with similar title) but none of them provide the answer I need.
I have a bar-negative-stack chart with drilldown.
In order to keep the Y-axis centered, I am calculating the maximum value among the series and setting it as the extremes of the chart.
The thing is I haven't find a good place to put this logic. I have tried putting it on redraw or render events but, since I am changing the yAxis, this causes a stackoverflow.
What I have so far that is more or less working is having the drilldown event set up with a setTimeout to delay the calculation, otherwise it would get the values before the drilldown. I would need some event like drilldownFinish.
Here's a working fiddle with this drilldown logic (not on negative-bar-stack though): http://jsfiddle.net/6qpq78do/
Any ideas on how to do this without a setTimeout?
Thanks
Maximum callstack exceeded message is caused by setExtremes function. Its third argument is redraw - it's true by default: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
So setExtremes will call the redraw event again and the redraw event will call setExtremes and so on...
The solution here is to create a flag (redrawEnbaled) that is going to control the access to the logic placed in redrawEvent and prevent this infinite recursive loop:
var redrawEnabled = true;
(...)
events: {
redraw: function() {
if (redrawEnabled) {
redrawEnabled = false;
let values = [];
this.series.forEach(s => {
s.yData.forEach(v => values.push(Math.abs(v)));
});
let max = values.reduce((acc, val) => (acc > val) ? acc : val, 0);
this.yAxis[0].setExtremes(-max, max);
redrawEnabled = true;
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/zjuy21k5/
I am using Jquery mask plugin to display time.This mask does not allow to enter more than 2 as 1st number. But my requirement is if I enter '5', it should display as '05:00'.Could anyone please help me, how to achieve this.
Thanks in advance,
Can you try this block of code.
$(function() {
$('input).bind('keydown', function(e)
{
var keyCode = e.keyCode;
if (keyCode == ? ) //? check its more than 2
{
//read the value 5 and update the input with 05:00
}
});
});
I am not sure this is what exactly you want. But it will work
I made a small code for panning in yAxis, but its a little slow. it becomes faster if I increase the value of tickInterval. But the downside is that with increased tickInterval, the code starts working oddly when I drag the mouse for less than the tickInterval size (try changing tickInterval to 500 in my fiddle and then drag mouse for a minute increment.
My link to jsfiddle.
Pertinent Code:
var mouseY;
$(chart.container)
.mousedown(function(event) {
mouseY=event.offsetY;
yData=chart.yAxis[0].getExtremes();
yDataRange=yData.max-yData.min;
isDragging=true;
})
.mousemove(function(e) {
var wasDragging = isDragging;
if (wasDragging) {
yVar=mouseY-e.pageY;
if(yVar!=0) {
yVarDelta=yVar/500*yDataRange;
chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
}
}
})
.mouseup(function (e) {
isDragging = false;
});
Will also appreciate if someone can provide an alternate route to converting pixels (e.pageY) to y co-ordinate. As you can see in code, currently I am doing a workaround.
EDIT
I included translate function in this jsfiddle and have put logic such that the panning happens only at mouseup and not at mousemove. The issue I am currently facing is that if the drag is less than tick interval, not only does the code pan, but it also zooms. I presume its happening because the change in yAxis min and max occurs at a floor for min and ceiling for max.
There are a few problems here. Firstly, when you call setExtremes, your range gets bigger ( causing the zoom effect). This is because you are not moving by an exact tick interval. You can cure this by setting set/end on tick on the y axis to false:
yAxis: {
min: -50,
tickInterval: 500,
startOnTick:false,
endOnTick:false
},
The way to convert pixels to coordinates is to use 'translate'. I changed your first jsfiddle as follows:
http://jsfiddle.net/uLHCx/
if(yVar<-50 || yVar > 50) {
mouseY = e.pageY;
yVarDelta=yVar/100*yDataRange;
yVarDelta = chart.yAxis[0].translate(e.pageY) - chart.yAxis[0].translate(e.pageY - yVarDelta);
chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
}
You can change the scroll amount by changing the calculation of yVarDelta.
Note, I put a range check on the yVar so that we don't redisplay unless the mouse has moved a given amount, and reset the valu of mouseY.
This may not do exactly what you want, but it should be enough for you to modify it as required.
I am using the jquery-ui draggable component with jquery.gantt here. I could do enable drag on the items easily by $('.ganttRed').draggable() but the problem with this is that once we start scrolling the graph left to right using the slider below, the elements that are moved remain where they are instead of scrolling with the graph.
I looked through the source and from my understanding the margin-left is being changed during the scrolling; but jquery-ui uses the left attribute and in the presence of left the element keeps its position. My CSS knowledge ends just about there so if any of you are willing to provide any suggestions on how this can be fixed; I will greatly appreciate it.
I have a created a fiddle demonstrating the problem at: http://jsfiddle.net/Y2cxa/. In order to see the behavior I am speaking about:
Scroll the graph (either with your mouse wheel or the slider at the bottom); things should look and behave as expected.
Move any of the magenta(-ish) bars around and then scroll.
Again, thank you for your time and any assistance will be greatly appreciated.
Best regards
You have probably solved this or done something else by now but since I needed this aswell i solved it.
Got a solution for you here:
http://jsfiddle.net/Y2cxa/18/
First I simply copied the left value to margin-left and then removed the left value completely, however this led to some strange numbers.
To solve this I compared the start value of left with the final value of left and applied the same difference in pixels to margin-left!
Simply replace:
$('.ganttRed').draggable({axis:'x'});
with:
$('.ganttRed').draggable({
axis:'x',
start: function(event, ui) {
$(this).data("startx",$(this).offset().left);
},
stop: function(event, ui) {
var change = $(this).offset().left - $(this).data("startx");
var value = $(this).css('margin-left');
value = value.split("px");
value = parseInt(value[0]) + change;
$(this).css('margin-left', value);
$(this).css('left', '');
}
});
I believe below is a better solution and I am using it in my application
For vertical and horizonal dragging
$('.ganttRed').draggable(
{
start: function (event, ui) {
$(this).data("startx", $(this).css('left').split("px")[0]);
$(this).data("starty", $(this).css('top').split("px")[0]);
},
stop: function (event, ui) {
var left = parseInt($(this).css('left').split("px")[0]);
var changex = left - parseInt($(this).data("startx"));
var top = parseInt($(this).css('top').split("px")[0]);
top -= top % 24;
$(this).css('top', top);
var changey = top - parseInt($(this).data("starty"));
}
});
changex, changey will be used in calculation while updating in database
For horizontal resizing
$(".ganttRed").resizable({ handles: 'e, w' });