We Keep Coding

How to create vis.js timeline without gaps

I am working with the vis.js timeline (http://visjs.org/docs/timeline/).
I want to achieve that it is not possible to have gaps between the elements.
If someone is removing an element between other elements the and adding a new element to the gap the new element should auto-fit into the gap.
If someone is updating the time (size) of an element by resizing, it should also auto fit to the next element.
I need an validation that all elements in all groups are filled between a given date range.
These are my editable options:
editable: {
add: true, // add new items by double tapping
updateTime: true, // drag items horizontally
updateGroup: false, // drag items from one group to another
remove: true, // delete an item by tapping the delete button top right
overrideItems: false // allow these options to override item.editable
},
It is not allowed to move the elements between the groups.
My first guess is to use the onMove function but I couldn't figure out how to find the previous and next element do adjust the start and end.
Maybe someone else had the same problem and found a solution.

I had a similar scenario in which dragging an element would rearrenge all the others and dragging an element to another group would make it snap just after the last element.
There is no easy option to set to do this. Basically you have to listen to these events and keep track of where are your elements in order to update it.
For example, in your first case what you have to do is:
Listen for onAdd() event
Search through the elements of that group where this new element will be created by looking at the start and end times.
Update this new item to have the start equals to the end of the previous element and have the end equals to the start of the next element.
Here's a simple JS Fiddle to get you started: http://jsfiddle.net/rj35mbvd/
In this fiddle, everytime you try to add an item, it is added between the two elements already present in the timeline.

Here is the good answer guys :
Use in options of stack: false + stackSubgroups: true and simply use the same subgroup by default, the elements will be displayed inline ;)
Check the <script> at the end of this html page http://visjs.org/examples/timeline/groups/subgroups.html
I will share an advanced roadmap I am working on ;)
Best

Hiding certain choices in a qualtrics matrix

I am very new to programming but have come across a situation in my work where I believe I need to use some javascript to make my survey manageable for the participant. The client wants to use Qualtrics as a scheduling system. Faculty identify time slots that they are available and the survey would start by hiding the ones that they will not be available for. Then dynamically hides buttons as the quotas fill for a given time slot.
My matrix table is 10 columns x 15 rows to accommodate all the times and days. I'm trying to reuse snips of codes that I have found online and so far have gotten to:
Qualtrics.SurveyEngine.addOnload(function()
{
$("QR~QID14~1~4").up().hide();
});
This is hiding a choice, but instead of row 1 column 4 it is hiding row 1 column 15 (whose inspect element is QR~QID14~1~10). Whatever I change my column number to (4 in the example) it is always hiding the check box in the last column. I don't understand what I am doing wrong. So I've gone into my results and realize it is hiding the correct button but the rest of the buttons are shifting left so it appears that the last button is hidden.
Once I get it to hide the correct column I want to add conditions to my code that will hide it based on the value of a quota, which I believe would look like:
Qualtrics.SurveyEngine.addOnload(function()
{
if ('${qo://QUOTAID/QuotaCount}' > 0) $("QR~QID14~1~4").up().hide();
});
Where I would find the QUOTAID via Qualtric's piped text option
I know I can format this as a list but there are too many options for some faculty to make that look right.

You want to hide the contents of the table cell, not the cell itself.
Qualtrics.SurveyEngine.addOnload(function() {
$('QR~QID14~1~4').up('td').childElements().invoke('hide');
});

Capturing the drop values (not the drags) on bootstrap slider

I am trying to use the BootStrap Slider mentioned here :
http://seiyria.com/bootstrap-slider/
I seem to have run into a rather strange requirement. As users drag the slider, the change in the slider value can change and such change can be capture (as mentioned in the examples in the link above).
However, I want to capture only those values of the slider at which the user "rests" after a slider, (or drops after the drag). She slides, stops, slides back, stops, slides forth stops, and so on. I want to capture values only where she stops.
How can I do this ? Is there an event for a slider, that captures just the drop or the resting place ?
p.s. I have not included any detailed code because I use the code in those linked examples directly, Example 6 in particular, which mentions :
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});

You can do it like this:
$("#ex6").on("slideStop", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
More info Here

Angular Slick changing current-index

I have a row of slick items, and after loading them, I would like to go to a pre-selected section of items. There are 6 items per page and I would like to go to item 8, let's say.
I change the current-index attribute to 8.
This unfortunately works for a second...then it goes back to zero (I have it printed out). This also appears to break my next/prev arrow functionality, it always resets to zero.
I would have liked to use slickGoTo, but that method is not made available via angular-slick

Sort multiple selected items with jQueryUI

I want to make something that makes much sense, but I think its not actually included in the jQueryUI.
I have a list of items, that are both sortable and selectable.
I can sort them one at a time, and I can select multiple items.
The question is, how can I sort multiple selected items together ?
I got this code atm,
$( "#centermainlist" ).sortable({
scroll: false,
handle: ".dots",
appendTo: 'body',
helper: 'clone',
});
what should I add, to make it sort all selected items ?
Thanks in advance :)
All the best,
Alexander

This functionality is not included in jQueryUI, so there's nothing you can just add to make it work the way you want. You will need to write your own code or search for plugins if you want to sort multiple items like that.
I imagine the reason this isn't in jQuery is due to the high number of situational variables involved. You're probably trying to do something like select three sequential items, then drag to move them all up or down - but this isn't the only possibility. What if the items selected aren't in a row? How do you handle that?
Example:
Item 1
Item 2 - selected
Item 3
Item 4 - selected
Item 5 - selected
Item 6
How do you move these items? Do you enforce the space in between the selected items? If so, do you stop moving items when the user moves Item 2 to the first position (since you have to keep the space)? Or in that case do you collapse them? Then do you remember that there was a hole if they move back down again? Maybe you just collapse them to begin with (easiest to implement, but maybe not the desired functionality)? Or maybe you enforce sequential selection for the move - if the items are all next to each other you can move them, if there are holes you can't?
So there are a lot of things to consider here. This is easy to implement with buttons (select items, click up or down buttons to move - just loop through and apply the move to each selected item) but much more difficult with drag reordering.